CSS制作带阴影的网站导航代码

大中小文章来源：万象互联更新时间：2011-8-18 14:30:33

本网页特效是由纯CSS制作的一个效果不错的网站导航，有点类似万象互联网络资讯网的网站导航啊！呵呵。

CSS制作的一种网站导航特效，主要是有一个阴影，完全没有用图片，都是用css做的，但还不算太逼真。

<?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>CSS制作的带阴影效果的网站导航--万象互联网络资讯网webjx.com</title> <meta http-equiv="ImageToolbar" content="no" /> <meta name="author" content="万象互联网络资讯网"/> <meta name="keywords" content="网页,网页教学,网页制作,网页设计"/> <meta name="description" content="万象互联网络资讯网用CSS制作的带阴影的网站导航"/> <meta name="title" content=" css网站导航 " /> <meta name="creator.name" content="万象互联网络资讯网, webjx.com" /> <style type="text/css" media="all" title="Default"> /* 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> <h1 class="left">带阴影效果的CSS制作的网站导航</h1> <div id="wrapper" class="wrapper"> <div id="innerWrapper" class="innerWrapper"> <ul id="navigator"> <li class="youAreHere"><a href=""> 网站首页 </a></li> <li><a href="/blog"> 网站博客 </a></li> <li><a href="/music"> 好听音乐 </a></li> <li><a href="/code"> 网页特效 </a></li> <li><a href="/about"> 关于我们 </a></li> </ul> </div> <div id="shadow" class="shadowWrapper"></div> </div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

版权说明:本站原创文章,由万象互联 SEO优化发表.
本文地址:https://www.hulian.top/zixun/post/4073.html

分享到：QQ空间新浪微博腾讯微博微信百度贴吧百度空间搜狐微博