一个横向的导航菜单制作实例


Web起点实战教程——一个横向导航菜单的制作实例，一步步教会您导航菜单的制作过程，从最初的新建页面到最后的CSS代码以及HTML标签使用，都可通过这款小小的菜单制作实例表现出来，是您参考的好素材。

答案：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web起点实战教程——横向导航的制作</title>
<style>
body{margin:0;font:12px "宋体";}
ul{margin:0;padding:0;list-style-type:none;}
.nav{width:647px;height:30px;background:#3FF;margin:100px auto;}
ul.w1{}
.w1 li{float:left;width:80px;height:30px;line-height:30px;background:#0CF;text-align:center;border-right:solid 1px #FFF}
.w1 a{text-decoration:none;display:block;color:#000;}
.w1 a:hover{background:#CCC;color:#fff;font-weight:bold;}
.w1 .right{border:none;}
</style>
</head>
<body>
<div class="nav">
	<ul class="w1">
    <li><a href="#">源码下载</a></li>
    <li><a href="#">网页特效</a></li>
    <li><a href="#">Web脚本</a></li>
    <li><a href="#">Serv脚本</a></li>
    <li><a href="#">Css hack</a></li>
    <li><a href="#">CSS特效</a></li>
    <li><a href="#">资源下载</a></li>
    <li class="right"><a href="#">学者留言</a></li>
    </ul>
</div>
</body>
</html>

上一个：三级的jquery动画菜单，下拉菜单
下一个：多级css3渐变效果下拉菜单导航【荐】

更多图片编程知识: