2017年6月19日月曜日

開発環境

Head First HTML and CSS (Elisabeth Robson(著)、Eric Freeman(著)、O'Reilly Media)の Chapter 12.(HTML5 Markup Modern HTML)、SHARPEN YOUR PENCIL(No. 8740) を取り組んでみる。

SHARPEN YOUR PENCIL(No. 8740)

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
Footer

HTML5

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="sample3.css">
  </head>
  <body>
    <header>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="">
    </header>
    <div id="tableContainer">
      <div id="tabelRow">
     <section 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>
     </section>
        <section id="main0">
          Main
        </section>
        <aside>
          Sidebar
        </aside>
      </div> <!-- tableRow -->
    </div>   <!-- tableContainer -->
    <footer>Footer</footer>
  </body>
</html>

CSS(Stylesheet)

#header img#headerSlogan {
    float: right;
}
#tableContainer {
    display: table;
}
#tableRow {
    display: table-row;
}
section#drinks0 {
    display: table-cell;
    background-color: #efe5d0;
    width: 20%;
    padding: 15px;
    vertical-align: top;
}

section#main0 {
    display: table-cell;
    background: #efe5d0 url() top left;
    font-size: 105%;
    padding: 15px;
    vertical-align: top;
}
#sidebar0 {
    display: table-cell;
    vertical-align: top;
}

0 コメント:

コメントを投稿

Comments on Google+: