div+css實(shí)現(xiàn)藍(lán)色vista風(fēng)格css導(dǎo)航菜單效果
發(fā)布時間：2015-08-26 15:26:35 作者：佚名 
我要評論
我要評論這篇文章主要為大家介紹了div+css實(shí)現(xiàn)藍(lán)色vista風(fēng)格css導(dǎo)航菜單效果,是一款非常美觀大方的藍(lán)色導(dǎo)航菜單效果,鼠標(biāo)滑過可顯示對應(yīng)的背景圖片,需要的朋友可以參考下
本文實(shí)例講述了div+css實(shí)現(xiàn)藍(lán)色vista風(fēng)格css導(dǎo)航菜單效果。分享給大家供大家參考。具體如下：
這是一款藍(lán)色vista風(fēng)格css導(dǎo)航菜單，第一眼看上去很大氣的菜單，采用那種比較艷但不刺眼的藍(lán)色作為菜單背景色，另外加入了一些鼠標(biāo)效果，在鼠標(biāo)滑上菜單的時候，對應(yīng)菜單項(xiàng)突出顯示，背景發(fā)生變化，CSS代碼還可有再優(yōu)化的空間，希望大家喜歡。
運(yùn)行效果如下圖所示：
在線演示地址如下：
http://demo.jb51.net/js/2015/div-css-vista-style-blue-nav-menu-codes/
具體代碼如下：
復(fù)制代碼
代碼如下:<!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>藍(lán)色vista風(fēng)格css導(dǎo)航菜單</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>導(dǎo)航菜單</span></a></li>
<li><a href="#"><span>源碼下載</span></a></li>
<li><a href="#"><span>網(wǎng)頁特效</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>藍(lán)色vista風(fēng)格css導(dǎo)航菜單</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>導(dǎo)航菜單</span></a></li>
<li><a href="#"><span>源碼下載</span></a></li>
<li><a href="#"><span>網(wǎng)頁特效</span></a></li>
</ul>
<div class="menu_nav_right"></div>
</div>
</div>
<!--nav,end-->
</body>
</html>
希望本文所述對大家的div+css程序設(shè)計有所幫助。
相關(guān)文章
div+css實(shí)現(xiàn)仿豬八戒首頁導(dǎo)航菜單效果
這篇文章主要為大家介紹了div+css實(shí)現(xiàn)仿豬八戒首頁導(dǎo)航菜單效果,涉及css實(shí)現(xiàn)鼠標(biāo)結(jié)合動態(tài)背景變換效果的實(shí)現(xiàn)技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-08-26DIV CSS制作的個性水平導(dǎo)航菜單實(shí)例-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
先看下效果: CSS樣式代碼: 以下為引用的內(nèi)容： #pointermenu{ border-top: 7px solid black; /*optio2008-10-17CSS DIV制作梯形狀的不規(guī)則網(wǎng)站導(dǎo)航-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
前段時間做一個小項(xiàng)目碰到了一個導(dǎo)航制作的方式然后突然想到曾經(jīng)很久以前看到的梯形狀的不規(guī)則導(dǎo)航，就嘗試做了一下。結(jié)果碰到了幾個問題，后來在同事的提醒下總算完成了，2008-10-17
DIV+CSS實(shí)現(xiàn)的天貓知名商家店鋪導(dǎo)航匯總頁面效果源碼
DIV+CSS實(shí)現(xiàn)的天貓知名商家導(dǎo)航頁面效果源碼，是一段匯總了天貓所有知名商家店鋪網(wǎng)址和名稱的代碼，并且為各商家分類顯示，還具有有效的搜索功能，及真實(shí)的店鋪網(wǎng)址，有需2014-11-21div+css縱向?qū)Ш饺绾螌?shí)現(xiàn)且為導(dǎo)航添加超鏈接
縱向?qū)Ш皆谀承┣闆r下還是比較實(shí)用的，下面有個不錯的示例，其實(shí)現(xiàn)縱向?qū)Ш焦δ?，并為?dǎo)航添加了超鏈接，需要的朋友可以參考下2014-02-17
