サイト構成1
横並びのナビゲーションが出来なかった。
この形はもうほぼ完璧ですが復習の為にやりました!
ナビゲーションだけ理解したら次のレイアウトにいきます。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>!ナビゲーション!</title> <style type="text/css"> <! -- *{ padding: 0; margin: 0; font-size: 100%; font-style: normal; font-height: normal; text-align: left; border: none; list-style-type: none; } ul{ list-style-type: none; } body{ background } #container{ width: 800px; height: 800px; padding: 10px; background-color: #0f0; } #header{ width: auto; height: 200px; text-align: center; margin-bottom: 10px; padding: 10px; background-color: #191; } #nav{ height: auto; width: 800px; } #nav ul[ height: auto; width: 750px; border-top: 8px dashed #f0f; border-right: 8px dashed #f0f; border-bottom: 8px dashed #f0f: border-left: 10px dashed #f0f; overflow: auto; ] #nav li{ height: 30px; width: 800px; float: left; display: inline; background-color: #fff; } #nav li a{ padding: 10px; display: block; } #nav a: link, #nav a; visited{ color: #000; text-decoration: underline; } #nav a: hover{ color: #fff; background-color: #999; } #wrapper{ width: 780px; height: 370px; padding: 10px; background-color: #456; } #sidebar{ height: 370px; width: 300px; background-color: #789; float: left; } #content{ height: 370px; width: 470px; float: right; background-color: #987; } #footer{ height: 170px; width: 800px; margin-top: 10px; clear: both; background-color: #543; } --> </style> </head> <body> <div id="container"> <div id="header"> <h1>お好み焼き$鉄板</h1> <div id="nav"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">店舗紹介</a></li> <li><a href="#">アクセス</a></li> <li><a href="#">問い合わせ</a></li> </ul> </div> </div> <div id="wrapper"> <div id="sidebar"> <img src="#"height="50"width="50"alt="bunner"> <img src="#"height="50"width="50"alt="bunner"> <img src="#"height="50"width="50"alt="bunner"> </div> <div id="content"> <h2>夕方から夜まで鉄板焼き!深夜はbarに!</h2> <p>コンテンツ内容</p> </div> </div> <div id="footer"> <address>=壱壱四=<br />住所<br />東京都北区東十条1−2−3<br />電話03-1234-5678</address> </div> </div> </body> </html>