確認テスト(2)応用
各ブロック同士の空きは、「10px」
幅「800px」を前提に、他の数値の変化は適宜おこなうこと
作業時間15分
http://felica.boy.jp/css-kadai/0528/index2.html
- HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>確認テスト(2)</title> <link rel="stylesheet" href="index2.css" media="screen,print"> </head> <body> <div id="container"> <div id="header"> </div> <div id="nav"> <ul> <li id="nav1"></li> <li id="nav2"></li> <li id="nav3"></li> <li id="nav4"></li> <li id="nav5"></li> </ul> </div> <div id="wrapper"> <div id="sidebar"> </div> <div id="content"> </div> </div> <div id="footer"> </div> </div> </body> </html>
@charset "UTF-8"; #container { width: 800px; height: 600px; margin: 0 auto; background-color: gray; padding: 5px; } #header { height: 110px; background-color: fuchsia; margin: 5px; } #nav { height: 50px; margin: 5px; } #wrapper { margin: 5px; padding-top: 10px; } #sidebar { width: 190px; height: 340px; background-color: aqua; float: left; margin-right: 5px; } #content { width: 590px; height: 340px; background-color: yellow; float: left; margin-left: 5px; margin-bottom: 10px; } #footer { height: 50px; background-color: green; clear: both; margin: 5px; padding-top: 10px; } ul { margin: 0; padding: 0; list-style-type: none; overflow: hidden; } li { float: left; width: 150px; height: 50px; } #nav1 { background-color: lime; margin: 5px 5px 5px 0; } #nav2 { background-color: navy; margin: 5px; } #nav3 { background-color: purple; margin: 5px; } #nav4 { background-color: red; margin: 5px; } #nav5 { background-color: white; margin: 5px 0 5px 5px; }