開発環境
- macOS Sierra - Apple (OS)
- Emacs (Text Editor)
- Safari(Web browser)
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)
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
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 コメント:
コメントを投稿