感觉很不错的门户网站导航菜单,这是腾讯网站头部的导航菜单,简洁、明快但不失大气,符合W3C标准,兼容IE、火狐等众多浏览器类型,代码精简,修改完善方便。
程序代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿门户网腾讯的头部导航菜单</title>
<style>
*{padding:0px;margin:0px;list-style:none;}
.nav{width:558px;height:56px;font-size:12px;border:1px solid #ccc;margin:20px}
.nav ul{margin:6px 0 0;}
.nav ul li{float:left;width:175px;border-right:1px dashed #ccc;padding:0 4px 0 6px;line-height:23px;}
.nav ul li a{padding:2px 3px 0;color:#666;margin:0 3px;text-decoration:none}
.nav ul .noborder{border:none}
.nav ul li a:hover{color:#fff;background:#ff5500;}
.nav ul li .b{font-weight:bold;}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#" class="b">腾讯首页</a><a href="#">新闻</a><a href="#">科技</a><a href="#">百姓</a></li>
<li><a href="#" class="b">腾讯生活</a><a href="">餐饮</a><a href="">消费</a><a href="">读书</a></li>
<li class="noborder"><a href="#" class="b">腾讯拍拍</a><a href="">商家</a><a href="">问吧</a><a href="#">圈子</a></li>
<li><a href="#" class="b">分类信息</a><a href="#">二手</a><a href="#">房产</a><a href="#">交友</a></li>
<li><a href="#" class="b">腾讯娱乐</a><a href="">鹿城</a><a href="">旅游</a><a href="">地图</a></li>
<li class="noborder"><a href="#" class="b">腾讯专题</a><a href="">会员</a><a href="">论坛</a><a href="">家园</a></li>
</ul>
</div>
</body>
</html>