【CSS】確認テスト（2）各ブロック同士の空きは、「0」
課題は→http://d.hatena.ne.jp/kyushokusha-shienkunren/20120527/p1
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>確認テスト（2）</title> <link rel="stylesheet" type="text/css" href="css_test21.css"> </head> <body> <div id="container"> <div id="header"> <h1>サイトタイトル</h1> </div> <div id="nav"> <ul> <li><a href="#">menu01</a></li> <li><a href="#">menu02</a></li> <li><a href="#">menu03</a></li> <li><a href="#">menu04</a></li> <li><a href="#">menu05</a></li> </ul> </div> <div id="content"> </div> <div id="side"> </div> <div id="footer"> <p>(c)copyright</p> </div> </div> </body> </html>
@charset "utf-8"; * { margin: 0; padding: 0; } body { font-family: sans-serif; line-height: 1.5em; background-color:#FFCCFF; } #container { margin: 0 auto; width: 800px; height: 600px; background-color: #FFF; } #header { width: 800px; height: 120px; background-color: #CCC; } #header h1 { color: #000033; margin-left: 60px; padding-top: 60px; } #nav { width: 800px; height: 60px; background-color: #FF66CC; } #nav ul { list-style-type: none; margin: 0; padding: 0; } #nav li { float: left; width: 160px; text-align: center; padding-top: 15px; } #nav li a { display: inline; position: relative; text-align: center; text-decoration: none; font-weight: bold; color: #000; } #nav li a:hover { color: #fff; background-color: #FF6633; } #content { float: right; width: 600px; height: 360px; background-color: #FFCC33; } #side { float: left; width: 200px; height: 360px; background-color: #66FF66; } #footer { clear: both; width: 800px; height: 60px; background-color: #993366; } #footer p { font-size: 0.875em; color: #fff; margin-left: 20px; padding-top: 30px; }
