網(wǎng)頁(yè)特效代碼模板無(wú)憂(yōu)>網(wǎng)頁(yè)特效>菜單導(dǎo)航特效代碼>

立體感很強(qiáng)的CSS暖色調(diào)導(dǎo)航Menu_菜單導(dǎo)航特效

此為一款通用的網(wǎng)站欄目導(dǎo)航條，熱色調(diào)，特別之處是用CSS控制它顯示出了很強(qiáng)的立體感，鼠標(biāo)放上往的變化也是很明顯的，這種色調(diào)的菜單也不少，假如顏色不是你想要的，你可以自己改。

<!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</a>">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>立體菜單-For www.wf0088.com</title>
<style type="text/css">
<!--
#navcontainer
{
background: #f0e7d7;
margin: 0 auto;
padding: 1em 0 0 0;
font-family: Arial;
text-transform: lowercase;
}

/* to / */
#navcontainer:after
{
mrc: ".";
display: block;
line-height: 1px;
font-size: 1px;
clear: both;
}

ul#navlist
{
list-style: none;
padding: 0;
margin: 0 auto;
width: 88%;
font-size: 11pt;
}

ul#navlist li
{
display: block;
float: left;
width: 15%;
margin: 0;
padding: 0;
}

ul#navlist li a
{
display: block;
width: 100%;
padding: 0.5em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
text-decoration: none;
background: #f7f2ea;
}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a
{
background: #f0e7d7;
color: #800000;
}

ul#navlist li a:hover, ul#navlist li#active a:hover
{
color: #800000;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}

-->
</style>
</head>

<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="/" id="current">mb5u.com</a></li>
<li><a href="/sort/list_1_1.shtml">ASP</a></li>
<li><a href="/sort/list_11_203_1.shtml">AJAX</a></li>
<li><a href="/sort/list_11_112_1.shtml">JQUERY</a></li>
<li><a href="/sort/list_11_1.shtml">EXT</a></li>
</ul></div>
</body>
</html>

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

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

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

立體感很強(qiáng)的CSS暖色調(diào)導(dǎo)航Menu_菜單導(dǎo)航特效

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

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

猜你也喜歡看這些