2017年6月9日金曜日

開発環境

Head First HTML and CSS (Elisabeth Robson(著)、Eric Freeman(著)、O'Reilly Media)の Chapter 11.(Layout and Positioning: Arranging Elements)、EXERCISE(No. 7706) を取り組んでみる。

EXERCISE(No. 7706)

Head First Lounge

Header1

Paragraph id="amazing"

Paragraph

Paragraph

Paragraph

Paragraph, em detailed directions

Header2

Lemon Breeze Elixir

Lemon Breeze

Paragraph

Chai Chiller Elixir

Header3

Paragraph

Black Brain Brew Elixir

Header3

Paragraph

Paragraph elixirs.

Header2

Paragraph

  • li1
  • li2
  • li3
  • li4
  • li5

HTML5

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="sample2.css">
  </head>
  <body>
    <div>
      <p><img alt="Head First Lounge"></p>
      <h1>Header1</h1>
      <p id="amazing">
        Paragraph id="amazing"
      </p>
      <p>
        Paragraph
      </p>
      <p id="guarantee">
        Paragraph
      </p>
      <p>
        Paragraph
      </p>
      <p>
        Paragraph, <em>em</em>
        <a title="Detailed Directions to the Lounge">detailed directions</a> 
      </p>
      <h2>Header2</h2>
      <p>
        <img src="" alt="Lemon Breeze Elixir">
      </p>
      <h3>Lemon Breeze</h3>
      <p>
        Paragraph
      </p>
      <p>
        <img src="" alt="Chai Chiller Elixir">
      </p>
      <h3>Header3</h3>
      <p>
        Paragraph
      </p>
      <p>
        <img src="" alt="Black Brain Brew Elixir">
      </p>
      <h3>Header3</h3>
      <p>
        Paragraph
      </p>

      <p>
        Paragraph
        <a title="Head First Lounge Elixirs">elixirs</a>.
      </p>

      <h2>Header2</h2>
      <p>
        Paragraph
      </p>
      <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
      </ul>

      <p id="footer">
        Paragraph
      </p>
    </div>
  </body>
</html>

CSS(Stylesheet)

#amazing {
    width: 200px;
    float: right;
}

0 コメント:

コメントを投稿