確認テスト
<html lang="ja"> <head> <meta charset="UTF-8"> <title>確認テスト(2)</title> <style type="text/css"> <!-- *1338484986*{ padding:0; margin:0; } body{ background-color:#fff; } #container{ width:800px; height:600px; margin:0 auto; background-color:#FCFFEC; } #header{ width:800px; height:120px; background-color:#FFF338; } #nav{ background-color:#33cc99; } #nav ul{ list-style-type:none; } #nav li { width:160px; height:60px; float:left; overflow:hidden; } #nav1{ background-color:#B0E27C; } #nav2{ background-color:#FCCF23; } #nav3{ background-color:#CAE8E6; } #nav4{ background-color:#CFDB00; } #nav5{ background-color:#C2E6ED; } #wrapper{ width:800px; height:360px; } #sidebar{ width:200px; height:360px; float:left; background-color:#ff9999; } #content{ width:600px; height:360px; float:left; background-color:#FCFFEC; } #footer{ width:800px; height:60px; background-color:#3173ff; clear:both; } </pp><pp>--></pp><pp></style> </head> <body> <div id="container"> <div id="header"><a class="okeyword" href="g:web:keyword:header">header</a></div> <div id="nav"> <ul> <li id="nav1"><a href="#">nav1</a></li> <li id="nav2"><a href="#">nav2</a></li> <li id="nav3"><a href="#">nav3</a></li> <li id="nav4"><a href="#">nav4</a></li> <li id="nav5"><a href="#">nav5</a></li> </ul> </div> <div id="wrapper"> <div id="sidebar">sidebar</div> <div id="content">content</div> </div> <div id="footer"><a class="okeyword" href="g:web:keyword:footer">footer</a></div> </div> </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>記述実践</title> <style type="text/css"> <!-- *{ padding:0; margin:0; } body{ background-color:#fff; } #container{ width:800px; height:640px; margin:0 auto; background-color:#993366; padding-top:10px; } #header{ width:780px; height:120px; background-color:#33CC99; margin:0 30px 10px 10px; } #nav{ background-color:#6633FF; margin:0 10px; } #nav ul{ list-style-type:none; margin:0 10px 0 0; } #nav li { width:140px; height:60px; float:left; overflow:hidden; } #nav1{ background-color:#FF66CC; margin-left:10px; } #nav2{ background-color:#FFFF66; margin-left:10px; } #nav3{ background-color:#C9C; margin-left:10px; } #nav4{ background-color:#FFF; margin-left:10px; } #nav5{ background-color:#C90; margin-left:10px; } #wrapper{ width:800px; height:360px; } #sidebar{ width:200px; height:360px; float:left; background-color:#FF9999; margin:10px; } #content{ width:570px; height:360px; float:left; background-color:#33FF33; margin-top:10px; } #footer{ width:780px; height:60px; background-color:#3366FF; clear:both; margin:10px 10px; } --> </style> </head> <body> <div id="container"> <div id="header">header</div> <div id="nav"> <ul> <li id="nav1"><a href="#">リスト1</a></li> <li id="nav2"><a href="#">リスト2</a></li> <li id="nav3"><a href="#">リスト3</a></li> <li id="nav4"><a href="#">リスト4</a></li> <li id="nav5"><a href="#">リスト5</a></li> </ul> </div> <div id="wrapper"> <div id="sidebar">sidebar</div> <div id="content">content</div> </div> <div id="footer">footer</div> </div> </body> </html>
何回かやってみるが、毎回どこかに打ち間違えや、ミスがあり安定しない結果になってしまいました。なんとか、アップしておきます。