2017年6月15日木曜日

開発環境

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

EXERCISE(No. 8298)

Header Providing all the caffeine you need to power your life.

BEVERAGES

House Blend, $1.49

Mocha Cafe Latte, $2.35

Cappuccino, $1.89

Chai Tea, $1.85

ELIXIRS

We proudly serve elixirs brewed by our friends at the Head First Lounge.

Green Tea Cooler, $2.99

Raspberry Ice Concentration, $2.99

Blueberry Bliss Elixir, $2.99

Cranberry Antioxidant Blast, $2.99

Chai Chiller, $2.99

Black Brain Brew, $2.99

Main
Sidebar
Footer

HTML5

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="sample6.css">
  </head>
  <body>
    <div id="header0">Header
      <img id="headerLogo" alt="Starbuzz Coffee Logo image" src="">
      <img id="headerSlogan"
           alt="Providing all the caffeine you need to power your life." src="">
    </div>
    <div id="tableContainer">
   <div id="drinks0">
  <h1>BEVERAGES</h1>
  <p>House Blend, $1.49</p>
  <p>Mocha Cafe Latte, $2.35</p>
  <p>Cappuccino, $1.89</p>
  <p>Chai Tea, $1.85</p>
  <h1>ELIXIRS</h1>
  <p>
    We proudly serve elixirs brewed by our friends
    at the Head First Lounge.
  </p>
  <p>Green Tea Cooler, $2.99</p>
  <p>Raspberry Ice Concentration, $2.99</p>
  <p>Blueberry Bliss Elixir, $2.99</p>
  <p>Cranberry Antioxidant Blast, $2.99</p>
  <p>Chai Chiller, $2.99</p>
  <p>Black Brain Brew, $2.99</p>
   </div>
      <div id="tabelRow">
        <div id="main0">
          Main
        </div>
        <div id="sidebar0">
          Sidebar
        </div>
      </div>
    </div>
    <div id="footer0">Footer</div>
  </body>
</html>

CSS(Stylesheet)

#header img#headerSlogan {
    float: right;
}
#tableContainer {
    display: table;
}
#tableRow {
    display: table-row;
}
#main0 {
    display: table-cell;
    vertical-align: top;
}
#sidebar0 {
    display: table-cell;
    vertical-align: top;
}
#drinks0 {
    display: table-cell;
    vertical-align: top;
}

0 コメント:

コメントを投稿