div+css实现蓝色vista风格css导航菜单效果

本文实例讲述了div+css实现蓝色vista风格css导航菜单效果。分享给大家供大家参考。具体如下：

这是一款蓝色vista风格css导航菜单，第一眼看上去很大气的菜单，采用那种比较艳但不刺眼的蓝色作为菜单背景色，另外加入了一些鼠标效果，在鼠标滑上菜单的时候，对应菜单项突出显示，背景发生变化，CSS代码还可有再优化的空间，希望大家喜欢。

运行效果如下图所示：

在线演示地址如下：

http://demo.jb51.net/js/2015/div-css-vista-style-blue-nav-menu-codes/

具体代码如下：

复制代码代码如下:!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风格css导航菜单/title>
style type="text/css">
!--
body{ font:12px Arial,Verdana,Tahoma,"宋体"; }
*{ padding:0px; margin:0px; }
* li{ list-style:none; }
a{ text-decoration:none; color:#20557A; }
a:hover{ text-decoration:underline; }
.menu_navcc{ width:970px; margin:0 auto; }
.menu_nav{ width:970px; height:55px; background:url(images/nav_bg.gif) repeat-x top; 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; display: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 href="#"> 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程序设计有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！