header作成
http://felica.boy.jp/css-kadai/0524
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>header(1)</title> <link rel="stylesheet" href="back.css"> </head> <body> <div id="container"> <div id="header"> <h1>Information World</h1> <h2>Technical Information</h2> </div> </div> <div id="container2"> <div id="header2"> <ul> <li><a href="#">Internet</a></li> <li><a href="#">Computer</a></li> <li><a href="#">Networking</a></li> <li><a href="#">Database</a></li> </ul> <form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"> <input name="textfield" type="text" size="15"> <input type="submit" name="Submit" value="検索"> </form> <h1>Information World</h1> </div> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ * { margin: 0; padding: 0; } #container { width: 800px; margin: 0 auto; } #header h1 { background-image: url(back.jpg); height: 100px; color: #fff; line-height: 100px; padding-left: 20px; } #header h2 { font-size: 1em; float: right; padding-right: 10px; position: relative; bottom: 95px; color: #fff; } #container2 { width: 800px; margin: 20px auto 0 auto; } #header2 h1 { background-image: url(back2.jpg); height: 100px; color: #fff; line-height: 100px; padding-left: 20px; clear: both; } #header2 ul { list-style-type: none; padding-left: 15px; } #header2 li { float: left; padding: 0 10px; position: relative; top: 22px; font-weight: bold; } #header2 li a { text-decoration: none; color: #fff; } form { float: right; position: relative; top: 22px; padding-right: 10px; }