開発環境
- macOS Sierra - Apple (OS)
- Emacs (Text Editor)
- Safari(Web browser)
Head First HTML and CSS (Elisabeth Robson(著)、Eric Freeman(著)、O'Reilly Media)の Chapter 11.(Layout and Positioning: Arranging Elements)、EXERCISE(No. 8167) を取り組んでみる。
EXERCISE(No. 8167)
Header
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
HTML5
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="sample6.css">
</head>
<body>
<div id="header0">Header</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)
#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 コメント:
コメントを投稿