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

2024-09-05 12:19:43

字体：大中小

来源：转载

供稿：网友

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

<!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阴影效果的网站导航菜单</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">Logo</h1><div id="wrapper" class="wrapper"><div id="innerWrapper" class="innerWrapper"><ul id="navigator"><li class="youAreHere"> 网站首页 </li><li>站长博客 </li><li>个性相册</li><li> 网页特效 </li><li>更换皮肤</li></ul></div><div id="shadow" class="shadowWrapper"></div></div></body></html>

上一篇：向上展开的半透明菜单

下一篇：标准CSS+Js下拉菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注