確認テスト(2)
以下の指示通りに表示するよう記述しなさい。
記述実践
作業時間15分
http://felica.boy.jp/css-kadai/0528/
- HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>確認テスト(2)</title> <link rel="stylesheet" href="index.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; } #header { height: 120px; background-color: fuchsia; } #nav { height: 60px; } #sidebar { width: 200px; height: 360px; background-color: aqua; float: left; } #content { width: 600px; height: 360px; background-color: yellow; float: left; } #footer { height: 60px; background-color: green; clear: both; } ul { margin: 0; padding: 0; list-style-type: none; overflow: hidden; } li { float: left; width: 160px; height: 60px; } #nav1 { background-color: lime; } #nav2 { background-color: navy; } #nav3 { background-color: purple; } #nav4 { background-color: red; } #nav5 { background-color: white; }