【CSS06】
【CSS06】
・以下の画像と同じように表示させるCSSを記述しなさい
・文字の擬似クラスも設定しなさい(色は自由選択)
・XHTML 1.0 Transitional
・記述場所はエンベッド
<html> <head> <title>css06</title> <style type="text/css"> body{ font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS P Gothic", "MS Pゴシック", sans-serif; } #container{ margin: 0 auto; width: 740px; background-color: #F5F6F1; padding: 10px; } ul{ list-style-type: none; margin-top: 0; margin-left: -40px; } #aboutus{ background-image: url(navi01.gif); height: 100px; margin-top: -15px; } #works{ background-image: url(navi02.gif); height: 100px; margin-top: 10px; } #access{ background-image: url(navi03.gif); height: 100px; margin-top: 10px; } #contact{ background-image: url(navi04.gif); height: 100px; margin-top: 10px; } a:link{ color: black; } a:visited{ color: yellow; } a:hover{ color: pink; } a:active{ color: white; } .info{ text-align: right; } .info p{ display: inline; padding: 0 5px 0 5px; } address{ text-align: center; font-style: normal; } </style> </head> <body> <div id="container"> <div id="navi"> <h1><a href="TAG"><img src="header.gif" title="header" /></a></h1> <ul> <li id="aboutus"><a href="about us">>> About Us<a/></li> <li id="works"><a href="works">>> Works</a></li> <li id="access"><a href="access">>> Access<a/></li> <li id="contact"><a href="contact">>>Contact<a/</li> </ul> </div> <div class="info"> <p><a href="#">個人情報の取り扱いについて</a> </p> <p><a href="#">サイトマップ<a/> </p> </div> <address>Copyright (c) 2012 WebDesign</adress> </div> </body> </html>
修正しました。