css實現(xiàn)適用于團(tuán)購網(wǎng)站的橙色導(dǎo)航菜單代碼
發(fā)布時間：2015-09-11 16:48:39 作者：佚名 
我要評論
我要評論這篇文章主要為大家介紹了css實現(xiàn)適用于團(tuán)購網(wǎng)站的橙色導(dǎo)航菜單代碼,采用純css設(shè)置背景圖片及相關(guān)樣式實現(xiàn)美觀漂亮的導(dǎo)航菜單效果,非常具有實用價值,需要的朋友可以參考下
本文實例講述了css實現(xiàn)適用于團(tuán)購網(wǎng)站的橙色導(dǎo)航菜單代碼。分享給大家供大家參考。具體如下：
這是一款橙色風(fēng)格的CSS菜單，沒有使用Javascript技術(shù)，完全CSS代碼實現(xiàn)，當(dāng)初主要是想用在團(tuán)購網(wǎng)站上，大家修改一下，可以用在各種各樣的網(wǎng)站上。菜單兩頭的那個布局或許是你要研究的重要吧。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/css-orange-tg-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>橙色團(tuán)購網(wǎng)站導(dǎo)航菜單</title>
<style>
* {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
BODY {
BACKGROUND-COLOR: #ffffff; MARGIN: 0px auto; COLOR: #000000; FONT-SIZE: 9pt
}
.nav_box { width:960px; height:44px; background:url(images/nav_bg.jpg); margin:0 auto; position:relative; overflow:visible; margin-top:100px; }
.nav_box_l { width:32px; height:57px; background:url(images/nav_left.png) no-repeat; position:absolute; left:-32px; top:0; }
.nav_box_r { width:31px; height:57px; background:url(images/nav_right.png) no-repeat; position:absolute; right:-31px; top:0; }
.nav_box li { float:left; padding:0 30px; font-size:16px; font-weight:bold; line-height:40px; list-style:none;}
.nav_box li.li_r { float:right; padding:0 10px; font-size:16px; line-height:40px; color:#FFF; font-size:12px }
.nav_box li a { color:#FFF; text-decoration:none }
.nav_box li a.font_min { font-weight:400; }
</style>
</head>
<body style="text-align:center">
<div class="nav_box">
<div class="nav_box_l"></div>
<div class="nav_box_r"></div>
<div class="">
<ul>
<li><a linkindex="16" href="#">今日團(tuán)購</a></li>
<li><a linkindex="17" href="#">往期團(tuán)購</a></li>
<li><a linkindex="18" href="#">玩轉(zhuǎn)團(tuán)購</a></li>
<li><a linkindex="19" href="#">常見問題</a></li>
<li class="li_r"><a href="#">登錄</a> | <a href="#">注冊</a></li>
<li class="li_r"><a linkindex="20" href="#" > <<邀請好友購買返10 元 </a></li>
</ul>
</div>
</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>橙色團(tuán)購網(wǎng)站導(dǎo)航菜單</title>
<style>
* {
PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
BODY {
BACKGROUND-COLOR: #ffffff; MARGIN: 0px auto; COLOR: #000000; FONT-SIZE: 9pt
}
.nav_box { width:960px; height:44px; background:url(images/nav_bg.jpg); margin:0 auto; position:relative; overflow:visible; margin-top:100px; }
.nav_box_l { width:32px; height:57px; background:url(images/nav_left.png) no-repeat; position:absolute; left:-32px; top:0; }
.nav_box_r { width:31px; height:57px; background:url(images/nav_right.png) no-repeat; position:absolute; right:-31px; top:0; }
.nav_box li { float:left; padding:0 30px; font-size:16px; font-weight:bold; line-height:40px; list-style:none;}
.nav_box li.li_r { float:right; padding:0 10px; font-size:16px; line-height:40px; color:#FFF; font-size:12px }
.nav_box li a { color:#FFF; text-decoration:none }
.nav_box li a.font_min { font-weight:400; }
</style>
</head>
<body style="text-align:center">
<div class="nav_box">
<div class="nav_box_l"></div>
<div class="nav_box_r"></div>
<div class="">
<ul>
<li><a linkindex="16" href="#">今日團(tuán)購</a></li>
<li><a linkindex="17" href="#">往期團(tuán)購</a></li>
<li><a linkindex="18" href="#">玩轉(zhuǎn)團(tuán)購</a></li>
<li><a linkindex="19" href="#">常見問題</a></li>
<li class="li_r"><a href="#">登錄</a> | <a href="#">注冊</a></li>
<li class="li_r"><a linkindex="20" href="#" > <<邀請好友購買返10 元 </a></li>
</ul>
</div>
</body>
</html>
希望本文所述對大家的div+css網(wǎng)頁設(shè)計有所幫助。
相關(guān)文章
- 這篇文章主要為大家介紹了純CSS實現(xiàn)的菱形導(dǎo)航菜單效果代碼,采用純css實現(xiàn)菱形效果的導(dǎo)航菜單效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-10
CSS3實現(xiàn)銀灰色動畫效果的導(dǎo)航菜單代碼
這篇文章主要為大家介紹了CSS3實現(xiàn)銀灰色動畫效果的導(dǎo)航菜單代碼,采用純css3技術(shù)實現(xiàn)的導(dǎo)航效果,鼠標(biāo)滑過有背景變換的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-01div+css實現(xiàn)藍(lán)色vista風(fēng)格css導(dǎo)航菜單效果
這篇文章主要為大家介紹了div+css實現(xiàn)藍(lán)色vista風(fēng)格css導(dǎo)航菜單效果,是一款非常美觀大方的藍(lán)色導(dǎo)航菜單效果,鼠標(biāo)滑過可顯示對應(yīng)的背景圖片,需要的朋友可以參考下2015-08-26div+css實現(xiàn)仿豬八戒首頁導(dǎo)航菜單效果
這篇文章主要為大家介紹了div+css實現(xiàn)仿豬八戒首頁導(dǎo)航菜單效果,涉及css實現(xiàn)鼠標(biāo)結(jié)合動態(tài)背景變換效果的實現(xiàn)技巧,非常簡單實用,需要的朋友可以參考下2015-08-26- 這篇文章主要介紹了使用CSS3制作響應(yīng)式導(dǎo)航菜單的方法,這種菜單在移動端的網(wǎng)頁制作中也經(jīng)常能夠用到,需要的朋友可以參考下2015-07-12
純CSS實現(xiàn)的水平下拉導(dǎo)航菜單特效源碼
是一段實現(xiàn)了鼠標(biāo)懸浮導(dǎo)航菜單上時會在下方出現(xiàn)水平的二級菜單效果的代碼，本段代碼適應(yīng)于所有網(wǎng)頁使用，有興趣的朋友們可以前來下載使用2015-04-30css3實例教程 一款純css3實現(xiàn)的環(huán)形導(dǎo)航菜單
今天要給大家?guī)硪豢罴僣ss3實現(xiàn)的環(huán)形導(dǎo)航菜單。該導(dǎo)航比較新鮮，列表圖標(biāo)位于中間，單擊列表圖標(biāo)的時候，各項分布于列表圖表的四周。形成一個環(huán)形，是現(xiàn)代碼如下2014-10-20css3和jquery實現(xiàn)的可折疊導(dǎo)航菜單適合放在手機(jī)網(wǎng)頁的導(dǎo)航菜單
今天為大家在介紹的是一款適合放在手機(jī)網(wǎng)頁的導(dǎo)航菜單。點擊列表圖標(biāo)以下拉式的形式顯示菜單，單擊關(guān)閉，動畫關(guān)閉。效果相當(dāng)不錯，喜歡的朋友可以學(xué)習(xí)下2014-09-02
