蓝色vista系统风格导航栏代码分享

蓝色vista系统风格导航栏代码分享

图片演示:


详细代码:

<!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>蓝色vista系统风格一级高亮显示导航菜单代码免费下载_www.mianfeimoban.com</title>
<style type="text/css">
<!--
/*通用*/
body{ background:#2b66a0;font:12px Arial,Verdana,Tahoma,"宋体";}
*{padding:0px;margin:0px;}
* li{list-style:none;}
a{text-decoration:none;color:#20537A;}
a:hover{text-decoration:underline;}
.head{width:100%;background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0314/menu1/img/head_bg.gif) repeat-x;}
.header{width:970px;height:65px; margin:0 auto;}
.header .left{background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0314/menu1/img/head_left.gif) no-repeat;height:65px;width:1px;float:left}
.header .main{background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0314/menu1/img/menu_bg.gif) repeat-x;float:left}
.header .right{background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0314/menu1/img/head_right.gif) no-repeat;height:65px;width:1px; float:right}

.menu{width:100%;height:42px;background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0314/menu1/img/menu_bg.gif) repeat-x;margin:0;}
.menu_navcc{width:970px; margin:0 auto;}
.menu_nav{width:970px;height:42px;background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0314/menu1/img/nav_bg.gif) repeat-x;float:left;}
.menu_nav .nav_content{padding-left:2px;background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0314/menu1/img/nav_l_bg.gif) no-repeat;float:left;}
.menu_nav .nav_content li{width:120px;height:42px;padding-right:3px;background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0314/menu1/img/nav_li_right.gif) no-repeat right center;float:left;line-height:42px;text-align:center;font-size:14px;font-weight:bold;}
.menu_nav .nav_content li a{color:#fff;width:120px;height:42px;display:block;}
.menu_nav .nav_content li.current{line-height:42px;}
.menu_nav .nav_content li.current a,.menu_nav .nav_content li a:hover{width:120px;height:42px;background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0314/menu1/img/nav_li_hover.gif)  bottom repeat-x;display:block;color:#fff;}
.menu_nav .nav_content li a:hover{background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0314/menu1/img/nav_li_hover.gif) bottom repeat-x;line-height:42px;text-decoration:none;}
.menu_nav_right{padding-right:20px;background:url(http://cssdh.mianfeimoban.com/uploadfile/2012/0314/menu1/img/nav_r_bg.gif) no-repeat right top;float:right;margin-left:50px;height:42px;}


p{margin-bottom:15px}
-->
</style>
</head>

<body style="text-align:center">
<div class="head">
<div class="header">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
</div>

<!--nav,start-->
<div class="menu">
<div class="menu_navcc">
<div class="menu_nav clearfix">
<ul class="nav_content">
<li class="current"><a href="#" title="首页"><span>首页</span></a></li>
<li><a href="#" title="JS广告代码"><span>广告代码</span></a></li>
<li><a href="#" title="CSS教程"><span>导航条代码</span></a></li>
<li><a href="#" title="导航菜单"><span>导航菜单</span></a></li>
<li><a href="#" title="溶图素材"><span>导航素材</span></a></li>
<li><a href="#" title="常用代码"><span>菜单代码</span></a></li>
<li><a href="#" title="常用代码"><span>导航栏素材</span></a></li>
</ul>
<div class="menu_nav_right">
</div>
</div>
</div>
</div>
<!--nav,end-->
</body>
</html>

本代码可去免费模板网导航菜单频道下载,http://www.mianfeimoban.com/divcss_daohang/10741.html

你可能感兴趣的:(蓝色vista系统风格导航栏代码分享)