当前位置 :| 主页>CSS菜单>

用XHTML+CSS做带阴影的导航菜单

来源：cssplay 作者：cssplay 时间：2008-08-14 点击：

特别地：主要是有一个阴影，完全没有用图片，都是用css做的，但还不算太逼真。

支持Mozilla, Opera, IE，代码如下

<?xml version="1.0" encoding="UTF-8"?> <!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> navigator shadow css - http://www.cssplay.org.cn </title> <meta http-equiv="ImageToolbar" content="no" /> <meta name="author" content="玩转CSS - CSSPLAY中文官方网站致力于CSS技术的提高"/> <meta name="keywords" content="never modules, Mozilla CSS, C#, .net, Refercence, CSSPLAY"/> <meta name="description" content="玩转CSS - CSSPLAY中文官方网站致力于CSS技术的提高"/> <meta name="title" content=" - http://www.cssplay.org.cn" /> <meta name="creator.name" content="玩转CSS - CSSPLAY中文官方网站致力于CSS技术的提高" /> <style type="text/css" media="all" title="Default"> /** * design by never-online * http://www.cssplay.org.cn */ /* basic 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; } /* content */ div#content { margin-top:40px; padding:30px; } /* footer */ div#footer { margin-top:40px; text-align:center; font-size:10pt; } </style> <body id="www.cssplay.org.cn"> <h1 class="left"> shadow css navigator </h1> <div id="wrapper" class="wrapper"> <div id="innerWrapper" class="innerWrapper"> <ul id="navigator"> <li class="youAreHere"><a href="http://www.cssplay.org.cn" _fcksavedurl="http://www.cssplay.org.cn"> Home </a></li> <li><a href="http://www.cssplay.org.cn/" _fcksavedurl="http://www.cssplay.org.cn/"> Blog </a></li> <li><a href="http://www.cssplay.org.cn/music" _fcksavedurl="http://www.cssplay.org.cn/music"> Music </a></li> <li><a href="http://www.cssplay.org.cn/code" _fcksavedurl="http://www.cssplay.org.cn/code"> Code </a></li> <li><a href="http://www.cssplay.org.cn/about" _fcksavedurl="http://www.cssplay.org.cn/about"> About </a></li> <li> Power by www.cssplay.org.cn</li> <li> more css or js code </li> </ul> </div> <div id="shadow" class="shadowWrapper"></div> </div> <div id="content"> click <a href="http://www.cssplay.org.cn/css-menu/20080814/658.html" _fcksavedurl="http://www.cssplay.org.cn/css-menu/20080814/658.html"> href </a> to disscuss with this menu </div> <div id="footer"> 玩转CSS - CSSPLAY中文官方网站致力于CSS技术的提高 - http://www.cssplay.org.cn </div> </body> </html>
提示：您可以先修改部分代码再运行

Tag：CSS菜单 导航菜单 带阴影 css XHTML

[收藏] [推荐] [评论] [打印] [关闭]

顶一下

上一篇：利用a:hover,li:hover做的纯CSS菜单 - 简洁注释版
下一篇：没有了

最新评论共有 0 位网友发表了评论

查看所有评论

发表评论

栏目列表

热点实例