各种导航的制作
1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
/* nav1 */
.nav1{width:489px;height:42px;}
.nav1 h1{margin-left:5px;}
.nav1 a{float:left;height:28px;width:77px;text-align:center;line-height:28px;text-decoration:none;font-size:10px;color:#7d796d;background: #dadada;margin-top:6px;}
.nav1 p{height:8px;width:489px;background:#fee00c;clear:both;border-bottom:1px solid #d7b760;display:block;}
.nav1 a:hover{background:#fce10e;margin-top:0;height:34px;line-height:36px;}
</style>
</head>
<body>
<!--nav1-->
<div class="nav1">
<h1>
<a href="#">sample</a>
<a href="#">sample</a>
<a href="#">sample</a>
<a href="#">sample</a>
<a href="#">sample</a>
</h1>
<p></p>
</div>
</body>
</html>
2.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
/* nav2 */
.nav2{margin-top:100px; width:450px; background:#ff0; border-bottom:1px solid #000; padding-left:30px; height:39px;}
.nav2 ul li{list-style:none;}
.nav2 ul li a{text-decoration:none; font-size:9px; color:#beb1a9; padding:0px 14px 0px; float:left; background:#f7f7f7; margin-left:9px; margin-top:3px; border:1px solid #999; border-bottom:none; height:35px; line-height:35px;}
.nav2 ul li a:hover{background:#fff;margin-top:0;height:40px;/*line-height:40px;*/border-color:#000;}
</style>
</head>
<body>
<!--nav2-->
<div class="nav2">
<ul>
<li><a href="#">sample</a></li>
<li><a href="#">sample</a></li>
<li><a href="#">sample</a></li>
<li><a href="#">sample</a></li>
<li><a href="#">sample</a></li>
</ul>
</div>
</body>
</html>
3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
/* nav3 */
.nav3{width:477px;height:34px;margin-top:50px; border-bottom:1px solid #000;}
.nav3 ul li{list-style:none;background:#ff0;}
.nav3 ul li a{text-decoration:none; height:32px; line-height:32px; font-size:8px; color:#f1ffff; float:left;padding:0 10px;margin-top:1px;border-top:1px solid #000; background:#1a79bd;}
.nav3 ul li a:hover{height:33px;margin-top:0;background:#2586d7;}
</style>
</head>
<body>
<!--nav3-->
<div class="nav3">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">sample</a></li>
<li><a href="#">sample</a></li>
<li><a href="#">sample</a></li>
<li><a href="#">sample</a></li>
<li><a href="#">sample</a></li>
<li><a href="#" style="border-right:1px solid #000;">sample</a></li>
</ul>
</div>
</body>
</html>