開発環境
- 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
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 コメント:
コメントを投稿