帶陰影綠色的CSS網(wǎng)站導(dǎo)航條_菜單導(dǎo)航特效

一個(gè)帶陰影效果的純CSS實(shí)現(xiàn)的網(wǎng)站導(dǎo)航條，看著比較大氣，每個(gè)菜單項(xiàng)還有立體效果，響應(yīng)鼠標(biāo)變背景，綠色風(fēng)格，當(dāng)然顏色你可以自己調(diào)整哦，只要學(xué)會(huì)了思路，修改就方便了。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS陰影效果的網(wǎng)站導(dǎo)航菜單</title>
<style type="text/css">
body {
margin:30px 0 10px 0;
/*/*/
font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
background-color:#f3f3e0;
}
h1.left {
text-align:left;
padding-left:30px;
}
a {
text-decoration:none;
}
ul, li {
margin:0;
padding:0;
}
/* navigator css */
.wrapper {
background-color:#629b5b;
border-bottom:2px solid #e0e9d0;
}
.innerWrapper {
border-top:2px solid #8bb486;
}
.innerWrapper #navigator {
padding:5px 0 5px 0;
border-top:2px solid #71a46b;
border-bottom:1px solid #54814e;
}
.innerWrapper li {
list-style-type:none;
display:inline;
margin:2px 10px 2px 10px;
}
.innerWrapper li a {
padding:2px 9px 2px 9px;
font-family: tahoma;
font-weight:bold;
font-size:10.2pt;
color:#ffffcc; /*yellow*/
font-variant:small-caps;
}
.innerWrapper li {
padding:2px 9px 2px 9px;
font-family: tahoma;
font-size:10pt;
color:#ffffcc; /*yellow*/
}
.innerWrapper li a:hover {
background-color:#6c9e66;
border-width:1px;
border-style:solid;
border-color:#7ba775 #54814e #54814e #7ba775;
padding:2px 8px 2px 8px;
}
.innerWrapper li.youAreHere a {
border-width:1px;
border-style:solid;
border-color:#55814e #7ca775 #7ca775 #55814e;
background-color:#64985c;
padding:2px 9px 2px 9px;
color:#e8ebc0;
}
.innerWrapper li.youAreHere a:hover {
border-width:1px;
border-style:solid;
border-color:#55814e #7ca775 #7ca775 #55814e;
background-color:#64985c;
padding:2px 9px 2px 9px;
color:#e8ebc0;
}
.shadowWrapper {
height:3px;
overflow:hidden;
border-bottom:2px solid #a1bc94;
background-color:#54814e;
}
/* mrc */
div#mrc {
margin-top:40px;
padding:30px;
}
/* footer */
div#footer {
margin-top:40px;
text-align:center;
font-size:10pt;
}
</style>
<body>
<h1 class="left"><a href="/">mb5u.com</a></h1>
<div id="wrapper" class="wrapper">
<div id="innerWrapper" class="innerWrapper">
<ul id="navigator">
<li class="youAreHere"><a href="/"> 網(wǎng)站首頁(yè) </a></li>
<li><a href="/jscss/">站長(zhǎng)博客 </a></li>
<li><a href="/">mb5u.com</a></li>
<li><a > 網(wǎng)頁(yè)殊效 </a></li>
<li><a >源碼下載</a></li>
</ul>
</div>
<div id="shadow" class="shadowWrapper"></div>
</div>
</body>
</html>

所屬頻道：菜單導(dǎo)航特效/更新時(shí)間：2010-05-22

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)菜單導(dǎo)航特效：

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁(yè)鏈接| 搜索帶陰影綠色的CSS網(wǎng)站導(dǎo)航條
特效說(shuō)明：
菜單導(dǎo)航模板-帶陰影綠色的CSS網(wǎng)站導(dǎo)航條。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

帶陰影綠色的CSS網(wǎng)站導(dǎo)航條_菜單導(dǎo)航特效

菜單導(dǎo)航特效Rss訂閱特效代碼搜索

菜單導(dǎo)航特效推薦

猜你也喜歡看這些