開発環境
- 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. 8298) を取り組んでみる。
EXERCISE(No. 8298)
Header
![Starbuzz Coffee Logo image]()
![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
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 コメント:
コメントを投稿