【CSS】復習課題・header
本日の授業中の課題→http://d.hatena.ne.jp/web-design-advance/20120515/p1
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>【復習】header(1)</title> <link rel="stylesheet" type="text/css" href="css_1.css"> </head> <body> <div id="container"> <div id="header"> <h1>Information World</h1> <h2>Technical Information</h2> </div> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ * { margin: 0; padding: 0; } #container { width: 800px; height: auto; } #header { background-image: url(images/head_bg.jpg); background-repeat: repeat-x; height: 110px; } h1 { color: #fff; font-family: Georgia, "Times New Roman", Times, serif; position: relative; top: 40px; left: 20px; } h2 { color: #fff; text-align: right; font-size: 0.875em; font-family: Georgia, "Times New Roman", Times, serif; position: absolute; top: 10px; left: 620px; }
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Information World</title> <link rel="stylesheet" type="text/css" href="css_2.css"> </head> <body> <div id="container"> <div id="header"> <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; height: auto; } #header { background-image: url(images/head_bg2.jpg); height: 110px; } h1 { color: #fff; font-family: Georgia, "Times New Roman", Times, serif; position: relative; top: 40px; left: 20px; } form { color: #fff; font-size: 0.875em; font-family: Georgia, "Times New Roman", Times, serif; position: relative; top: 5px; margin-right: 10px; float: right; } #header ul { color: #fff; font-size: 0.875em; font-family: Georgia, "Times New Roman", Times, serif; position: absolute; top: 5px; left: 20px; overflow: auto; } #header li { list-style-type: none; padding: 0 20px 0 10px; display: inline; } #header li a { color: #fff; }
