漂亮纯css蓝白色横向导航条代码
展示图如下:
详细代码:
<!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=gb2312" />
<title>纯css打造漂亮蓝白色横向导航条代码_www.mianfeimoban.com</title>
<style type="text/css">
<!--
/*通用*/
body{font:12px Arial,Verdana,Tahoma,"宋体";}
*{padding:0px;margin:0px;}
* li{list-style:none;}
a{text-decoration:none;color:#20537A;}
a:hover{text-decoration:underline;}
.menu_navcc{width:970px; margin:0 auto;}
.menu_nav{width:970px;height:53px;background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0309/menu/menu_1203092/img/nav_bg.gif) repeat-x top;float:left;}
.menu_nav .nav_content{padding-left:4px;background:url(img/nav_l_bg.gif) no-repeat left top;float:left;}
.menu_nav .nav_content li{width:114px;height:53px;padding-left:10px;padding-right:10px;background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0309/menu/menu_1203092/img/nav_li_right.gif) no-repeat right top;float:left;line-height:53px;text-align:center;font-size:14px;font-weight:bold;}
.menu_nav .nav_content li a{color:#000;width:114px;height:53px;display:block;}
.menu_nav .nav_content li.current{line-height:53px;}
.menu_nav .nav_content li.current a,.menu_nav .nav_content li a:hover{width:114px;height:53px;background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0309/menu/menu_1203092/img/nav_li_current.gif) no-repeat bottom;display:block;color:#fff;}
.menu_nav .nav_content li a:hover{background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0309/menu/menu_1203092/img/nav_li_hover.gif) no-repeat bottom;height:53px;line-height:53px;text-decoration:none;}
.menu_nav_right{padding-right:20px;background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0309/menu/menu_1203092/img/nav_r_bg.gif) no-repeat right top;float:right;margin-left:50px;padding-top:13px;height:23px;padding-bottom:12px;}
p{
margin-bottom:15px}
-->
</style>
</head>
<body style="text-align:center">
<div style="height:100px;"></div>
<div style="clear:both"></div>
<!--nav,start-->
<div class="menu_navcc">
<div class="menu_nav clearfix">
<ul class="nav_content">
<li class="current"><a href="http://www.mianfeimoban.com/"><span>首页</span></a></li>
<li><a href="http://www.mianfeimoban.com/"><span>广告代码</span></a></li>
<li><a href="http://www.mianfeimoban.com/"><span>CSS教程</span></a></li>
<li><a href="http://www.mianfeimoban.com/"><span>导航菜单</span></a></li>
<li><a href="http://www.mianfeimoban.com/"><span>免费模板</span></a></li>
<li><a href="http://www.mianfeimoban.com/"><span>常用代码</span></a></li>
</ul>
<div class="menu_nav_right"></div>
</div>
</div>
<!--nav,end-->
</body>
</html>
18万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
