div+css實現(xiàn)仿豬八戒首頁導(dǎo)航菜單效果
發(fā)布時間：2015-08-26 11:29:30 作者：佚名 
我要評論
我要評論這篇文章主要為大家介紹了div+css實現(xiàn)仿豬八戒首頁導(dǎo)航菜單效果,涉及css實現(xiàn)鼠標(biāo)結(jié)合動態(tài)背景變換效果的實現(xiàn)技巧,非常簡單實用,需要的朋友可以參考下
本文實例講述了div+css實現(xiàn)仿豬八戒首頁導(dǎo)航菜單效果。分享給大家供大家參考。具體如下：
這是一款仿豬八戒2010年首頁的網(wǎng)頁導(dǎo)航菜單，藍(lán)色風(fēng)格，非常漂亮大氣、簡潔專業(yè)，在此推薦給大家。菜單上有一個標(biāo)記，指引當(dāng)前的位置，也是本菜單的亮點。用CSS究竟是如何實現(xiàn)的呢？那么就請一起看代碼吧。
先來看看運行效果截圖：
在線演示地址如下：
http://demo.jb51.net/js/2015/div-css-fzbj-web-menu-style-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>仿2010豬八戒首頁導(dǎo)航菜單</title>
<style type="text/css">
<!--
body{font:12px 微軟雅黑,Verdana,Tahoma;}
*{padding:0px;margin:0px;}
* li{list-style:none;}
a{text-decoration:none;color:#20537A;}
a:hover{text-decoration:underline;}
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}
.clearfix {
_zoom: 1;
}
*+html .clearfix {
overflow:auto;
}
.menu_navcc{width:970px; margin:0 auto;}
.menu_nav{width:970px;height:48px;background:url(images/nav_bg.gif) repeat-x;float:left;margin-top:18px;}
.menu_nav .nav_content{padding-left:25px;background:url(images/nav_l_bg.gif) no-repeat;float:left;}
.menu_nav .nav_content li{width:88px;height:48px;padding-left:15px;padding-right:13px;background:url(images/nav_li_right.gif) no-repeat right center;float:left;line-height:48px;text-align:center;font-size:14px;font-weight:bold;}
.menu_nav .nav_content li a{color:#fff;width:88px;height:48px;display:block;}
.menu_nav .nav_content li.current{line-height:37px;}
.menu_nav .nav_content li em{background:url(images/bid_new.gif) no-repeat;width:35px;height:21px;display:inline-block;position:absolute;top:-20px;left:40px;}
.menu_nav .nav_content li.current a,.menu_nav .nav_content li a:hover{width:88px;height:37px;background:url(images/nav_li_current.gif) no-repeat;display:block;color:#fff;}
.menu_nav .nav_content li a:hover{background:url(images/nav_li_hover.gif) no-repeat;line-height:37px;text-decoration:none;}
.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 clearfix">
<ul class="nav_content">
<li class="current"><a href="#" title="首頁"><span>網(wǎng)站首頁</span></a></li>
<li><a href="#" title="廣告代碼"><span>廣告代碼</span></a></li>
<li><a href="#" title="CSS教程"><span>CSS教程</span></a></li>
<li style="position:relative;"><a href="#" title="導(dǎo)航菜單"><span>導(dǎo)航菜單</span></a><em></em></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>
<!--nav,end-->
<p></p>
<p></p>
</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>仿2010豬八戒首頁導(dǎo)航菜單</title>
<style type="text/css">
<!--
body{font:12px 微軟雅黑,Verdana,Tahoma;}
*{padding:0px;margin:0px;}
* li{list-style:none;}
a{text-decoration:none;color:#20537A;}
a:hover{text-decoration:underline;}
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}
.clearfix {
_zoom: 1;
}
*+html .clearfix {
overflow:auto;
}
.menu_navcc{width:970px; margin:0 auto;}
.menu_nav{width:970px;height:48px;background:url(images/nav_bg.gif) repeat-x;float:left;margin-top:18px;}
.menu_nav .nav_content{padding-left:25px;background:url(images/nav_l_bg.gif) no-repeat;float:left;}
.menu_nav .nav_content li{width:88px;height:48px;padding-left:15px;padding-right:13px;background:url(images/nav_li_right.gif) no-repeat right center;float:left;line-height:48px;text-align:center;font-size:14px;font-weight:bold;}
.menu_nav .nav_content li a{color:#fff;width:88px;height:48px;display:block;}
.menu_nav .nav_content li.current{line-height:37px;}
.menu_nav .nav_content li em{background:url(images/bid_new.gif) no-repeat;width:35px;height:21px;display:inline-block;position:absolute;top:-20px;left:40px;}
.menu_nav .nav_content li.current a,.menu_nav .nav_content li a:hover{width:88px;height:37px;background:url(images/nav_li_current.gif) no-repeat;display:block;color:#fff;}
.menu_nav .nav_content li a:hover{background:url(images/nav_li_hover.gif) no-repeat;line-height:37px;text-decoration:none;}
.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 clearfix">
<ul class="nav_content">
<li class="current"><a href="#" title="首頁"><span>網(wǎng)站首頁</span></a></li>
<li><a href="#" title="廣告代碼"><span>廣告代碼</span></a></li>
<li><a href="#" title="CSS教程"><span>CSS教程</span></a></li>
<li style="position:relative;"><a href="#" title="導(dǎo)航菜單"><span>導(dǎo)航菜單</span></a><em></em></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>
<!--nav,end-->
<p></p>
<p></p>
</body>
</html>
希望本文所述對大家的div+css程序設(shè)計有所幫助。
相關(guān)文章
DIV CSS制作的個性水平導(dǎo)航菜單實例-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)
前段時間做一個小項目碰到了一個導(dǎo)航制作的方式然后突然想到曾經(jīng)很久以前看到的梯形狀的不規(guī)則導(dǎo)航，就嘗試做了一下。結(jié)果碰到了幾個問題，后來在同事的提醒下總算完成了，2008-10-17
DIV+CSS實現(xiàn)的天貓知名商家店鋪導(dǎo)航匯總頁面效果源碼
DIV+CSS實現(xiàn)的天貓知名商家導(dǎo)航頁面效果源碼，是一段匯總了天貓所有知名商家店鋪網(wǎng)址和名稱的代碼，并且為各商家分類顯示，還具有有效的搜索功能，及真實的店鋪網(wǎng)址，有需2014-11-21div+css縱向?qū)Ш饺绾螌崿F(xiàn)且為導(dǎo)航添加超鏈接
縱向?qū)Ш皆谀承┣闆r下還是比較實用的，下面有個不錯的示例，其實現(xiàn)縱向?qū)Ш焦δ?，并為?dǎo)航添加了超鏈接，需要的朋友可以參考下2014-02-17
DIV+CSS實現(xiàn)的黑色回轉(zhuǎn)懸浮下拉二級菜單動態(tài)特效源碼
純CSS實現(xiàn)的黑色回轉(zhuǎn)下拉二級菜單動態(tài)特效源碼，是一段純DIV+CSS實現(xiàn)的動態(tài)效果懸浮下拉二級菜單代碼，適應(yīng)于所有網(wǎng)頁，需要此段代碼的朋友們可以前來下載使用2014-11-20- [html] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <2009-04-01
符合標(biāo)準(zhǔn)的div css制作的彈出菜單-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)
本文介紹了五款符合標(biāo)準(zhǔn)的div css制作的彈出菜單,而且不含有js的. NO.1最基本的：二級dropdown彈出菜單 <!2008-10-17
