本文实例讲述了div+css实现蓝色vista风格css导航菜单效果。分享给大家供大家参考。具体如下：
这是一款蓝色vista风格css导航菜单，第一眼看上去很大气的菜单，采用那种比较艳但不刺眼的蓝色作为菜单背景色，另外加入了一些鼠标效果，在鼠标滑上菜单的时候，对应菜单项突出显示，背景发生变化，CSS代码还可有再优化的空间，希望大家喜欢。
运行效果如下图所示：
在线演示地址如下：
http://demo.jb51.net/js/2015/div-css-vista-style-blue-nav-menu-codes/
具体代码如下：
复制代码@H_ 360 _20@
代码如下:<!DOCTY PE ht ML P ub LIC "-//W3C//DTD XHTML 1.0 Trans IT ional//EN"
"http://HdhCmsTestw3. org /TR/xhtml1/DTD/xhtml1 -t ransitional.dtd">
<html XM lns="http://HdhCmsTestw3.org/1999/xhtml">
<head>
< ;m eta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>蓝色vista风格css导航菜单</title>
<style type="text/css">
<!--
body{font:12px Arial,Verdana,Tahoma," 宋体 ";}
*{padding:0px;m arg in:0px;}
* li{list -s tyle:none;}
a{text-decoration:none;color: # 20557A;}
a:hover{text-decoration:underline;}
.menu_navcc{width:970px; mar gin :0 auto;}
.menu_nav{width:970px;h ei ght:55px;background:url(images/nav_bg.gif) repeat-x to p; float:left;}
.menu_nav .nav_content{padding-left:4px;background:url(images/nav_l_bg.gif) no-repeat left top;float:left;}
.menu_nav .nav_content li{width:114px;height:55px;padding-left:10px;padding-right:10px;background:url(images/nav_li_right.gif) no-repeat right top;float:left;line-height:55px;text-align: center ;font- Size: 14px; font-weight :bold;}
.menu_nav .nav_content li a{color:#fff;width:114px;height:55px;dis play :block;}
.menu_nav .nav_content li. current {line-height:55px;}
.menu_nav .nav_content li.current a,.menu_nav .nav_content li a:hover{width:114px;height:55px;background:url(images/nav_li_current.gif) no-repeat bottom;display:block;color:#000;}
.menu_nav_right{padding-right:20px;background:url(images/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">
<ul class="nav_content">
<li class="current"><a hr ef="#"><span>首页</span></a></li>
<li><a href="#"><span>广告代码</span></a></li>
<li><a href="#"><span>CSS教程</span></a></li>
<li><a href="#"><span>导航菜单</span></a></li>
<li><a href="#"><span> 源 码下载</span></a></li>
<li><a href="#"><span>网页特效</span></a></li>
</ul>
<div class="menu_nav_right"></div>
</div>
</div>
<!--nav,end-->
</body>
</html>
希望本文所述对大家的div+css 程序设计 有所帮助。
总结
以上是 为你收集整理的 div+css实现蓝色vista风格css导航菜单效果 全部内容，希望文章能够帮你解决 div+css实现蓝色vista风格css导航菜单效果 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于div+css实现蓝色vista风格css导航菜单效果的详细内容...