先看效果：
http://blog.never-online.net/uploads/200607/25_152941_css_shadow_navi.html
特别地：主要是有一个阴影，完全没有用图片，都是用css做的，但还不算太逼真。
支持Mozilla, Opera, IE，代码如下
PS，我blog新改版，欢迎大家多提意见，网址：http://blog.never-online.net
<?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.never-online.net </title> <meta http-equiv="ImageToolbar" content="no" /> <meta name="author" content="never-online, BlueDestiny"/> <meta name="keywords" content="never modules, Mozilla CSS, C#, .net, Refercence, BlueDestiny, never-online"/> <meta name="description" content="BlueDestiny, never-online"/> <meta name="title" content=" - http://www.never-online.net" /> <meta name="creator.name" content="never-online, BlueDestiny" />
<style type="text/css" media="all" title="Default">...
/**//**
* design by never-online * http://blog.never-online.net
*//**//* 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.never-online.net"> <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.never-online.net"> Home </a></li> <li><a href="http://blog.never-online.net"> Blog </a></li> <li><a href="http://www.never-online.net/music"> Music </a></li> <li><a href="http://www.never-online.net/code"> Code </a></li> <li><a href="http://www.never-online.net/about"> About </a></li> <li> Power by blog.never-online.net</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.never-online.net/blog/article.asp?id=57"> href </a> to disscuss with this menu </div> <div id="footer"> never-online, BlueDestiny - http://www.never-online.net </div> </body></html>
|