実践演習課題H11C11
HTML
<!doctype html> <htmllang="ja"> <head> <metacharset="UTF-8"> <title>H11C11</title> <linkrel="stylesheet"href="css/H11C11.css"> </head> <body> <divid="container"> <divid="header"> <h1>Café de la plante</h1> <p>サブタイトルサブタイトルサブタイトル</p> <divid="nav"> <ul> <li><ahref="#">トップページ</a></li> <li><ahref="#">カフェについて</a></li> <li><ahref="#">本日のおすすめ</a></li> <li><ahref="#">ブログ</a></li> <li><ahref="#">お問い合わせ</a></li> </ul> </div><!-- /nav--> </div><!--/header--> <divid="content"> <divclass="section"> <h2>コンテンツのタイトル</h2> <p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p> <p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p> </div> <imgsrc="img/11/photo200.jpg"width="200"height="300"alt="海"> </div><!--/content--> <divid="footer"> <small>Copyright ©2013 AUTHOR NAME, All Rights Reserved.</small> </div><!--/footer--> </div><!-- /container--> </body> </html>
@charset "UTF-8"; /* CSS Document */ body , div, h1, h2, p ,ul ,li { margin: 0; padding: 0; } a{ text-decoration: none; } body { font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; color: #333333; line-height: 1.5em; } #container{ width: 800px; margin: 0 auto; background: url(../img/11/plant_middle.jpg) repeat-y; } #header{ height:350px; background: url(../img/11/plant_top.jpg) no-repeat; padding: 50px 0 0 40px; } #nav{ height: 50px; margin-top: 240px; text-align: center; } #content{ overflow: hidden; padding: 0px 50px; } #footer{ height: 40px; padding-top: 80px; background: #000000 url(../img/11/plant_bottom.jpg) no-repeat; text-align: center; clear: both; } h1{ font-family: Georgia, "Times New Roman", Times, serif; font-size: 30px; color: #ffffff; margin-bottom:10px; } h1 a{ color:#ffffff; } #header p{ color:#ffffff; letter-spacing: 1px; } ul{ list-style:none; padding: 8px 10px; } li { display: inline; margin: 5px; } li a{ color: #333333; font-size: 14px; } li a:hover{ color: #ffc87a; } h2{ background: #000000; font-size: 18px; font-weight: 400; color: #ffffff; line-height: 1.8; padding-left: 10px; margin-bottom: 20px; } p{ font-size: 14px; line-height: 1.4; letter-spacing: -0.2px; margin-bottom: 20px; } .section{ width: 445px; margin: 0px 5px 30px 10px; float:left; } img{ width: 200px; margin: 0px 10px 30px 10px; float:right; } small{ font-size: 10px; color: #ffffff; }