html5
div+css实现蓝色vista风格css导航菜单效果
发布时间：2022-04-14 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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>
"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程序设计有所帮助。
脚本宝典总结
以上是脚本宝典为你收集整理的div+css实现蓝色vista风格css导航菜单效果全部内容，希望文章能够帮你解决div+css实现蓝色vista风格css导航菜单效果所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
猜你在找的html5相关文章
- 关于移动端h5开发相关内容总结 2022-05-17
- html5教程-学表单的第二天 2018-12-10
- html5教程-HTML5浏览器支持 2018-12-10
- html5教程-HTML5智能表单 2018-12-10
- html5教程-微信H5使用resLoader实现加载页效果 2018-12-10
- html5教程-day01-初级-JS0-热身运动、JS入门教程 2018-12-10
- html5教程-html5shiv.js和respond.min.js 2018-12-10
- html5教程-不同浏览器对于html5 audio标签和音频格式的兼容性 2018-12-10
- html5教程-使用Html5实现手风琴案例 2018-12-10
- html5教程-html5笔记 2018-12-10
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新html5教程