Today & Tomorrow...

勝手気ままな、備忘録的な感じです。

【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>

修正しました。