背景画像と横並びのナビゲーションとhover
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-traditional.dtd">
<html xmlns="http://www/w3/org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta heep-equiv="Content-Type" conten="text/html;cgarset=utf-8"/>
<title>ナビゲーション</title>
<style type="text/css">
<!--
*[HTML][HTML] {
margin: 0;
padding: 0;
}
body {
font-size:0.75em;
font-family:
"Hiragino Kaku Gothic Pro",
"ヒラギノ 角ゴ pro.W3"，
Meiryo,
"メイリオ",
Osaka,
"MS P Gothic",
"ＭＳ Ｐゴシック,"
sans-serif;
background-image: url(images/03.png);
background-repeat: repeat-y;
background-position: center;
}
div#container {
width: 511px;
height: auto;
margin: 0 auto;
background-color: transparent;
}
div#nav {
width:511px;
margin: 10px;
}
div#nav ul {
list-style:none;
}
div#nav ul li {
float:left;
display: inline;
}
div#nav ul li a {
width: 73px;
height: 21px;
border: 1px solid #00FF00;
display: block;
}
div#nav ul li a:link,div#nav ul li a:visited {
border: 1px solid #00FF00;
display: block;
}
div#nav ul li a:hover {
border: 1px solid #00F;
}
div#nav ul li img {
border:none;
}
-->
</style>
<body>
<div id="container">
<div id="nav">
<ul>
<li><a href="#"><img src="images/home.jpg" width="73" height="21" alt="ホーム"></a></li>
<li><a href="#"><img src="images/menu.jpg" width="73" height="21" alt="メニュー"></a></li>
<li><a href="#"><img src="images/blog.jpg" width="73" height="21" alt="ブログ"></a></li>
<li><a href="#"><img src="images/access.jpg" width="73" height="21" alt="アクセス"></a></li>
</ul>
</div>
</div>
</body>
</head>
