带阴影绿色的CSS网站导航条

 首页 > 网页特效 > 菜单特效 > 带阴影绿色的CSS网站导航条

带阴影绿色的CSS网站导航条

 2018-07-16  438  收藏  0 赞一个  0 真差劲  0 去评论

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS阴影效果的网站导航菜单</title>
<style type="text/css">
body {
margin:30px 0 10px 0;
font-family: sans-serif;
background-color:#f3f3e0;
}
h1.left {
text-align:left;
padding-left:30px;
}
a {
text-decoration:none;
}
ul, li {
margin:0;
padding:0;
}
.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;
}
.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;
}
div#content {
margin-top:40px;
padding:30px;
}
div#footer {
margin-top:40px;
text-align:center;
font-size:10pt;
}
</style>
<body>
<h1 class="left"><a href="#">Logo</a></h1>
<div id="wrapper" class="wrapper">
<div id="innerWrapper" class="innerWrapper">
<ul id="navigator">
<li class="youAreHere"><a href="#"> 网站首页 </a></li>
<li><a href="#">站长博客 </a></li>
<li><a href="/">个性相册</a></li>
<li><a href="#"> 网页特效 </a></li>
<li><a href="#">更换皮肤</a></li>
</ul>
</div>
<div id="shadow" class="shadowWrapper"></div>
</div>

<!-- 以下与演示代码无关,使用时请移除. --> 
	<style type="text/css">
	#azz_discription{ width:600px; height:auto; border:1px dashed #CCC; margin:0 auto; padding:10px;}
	#azz_discription p{ line-height:25px;}
	</style>
	<div style="height:20px;"></div>
	<div id="azz_discription">
	<p style="text-align:center;">来源：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a>　代码整理：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a></p>
	<p>&hearts;尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
	</div>

<!-- 以上与演示代码无关,使用时请移除. --> 


</body>
</html>

运行代码 全选代码 复制代码 清除代码 恢复代码

预览图片

一个带阴影效果的纯CSS实现的网站导航条，看着比较大气，每个菜单项还有立体效果，响应鼠标变背景，绿色风格，当然颜色你可以自己调整哦，只要学会了思路，修改就方便了。

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

 大家评论

 站长推荐

 点击排行