当前位置： > 网页特效 > 导航代码 > 文章内容

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

http://www.itjxue.com 2015-08-05 00:29 来源:未知 点击次数:

本网页特效是由纯CSS制作的一个效果不错的网站导航，有点类似IT教学网的网站导航啊！呵呵。

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

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE <a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=html&' target='_blank'><u>html</u></a> 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制作的带阴影效果的网站导航--IT教学网itjxue.com</title> <meta http-equiv="ImageToolbar" content="no" /> <meta name="author" content="IT教学网"/> <meta name="keywords" content="网页,网页教学,<a href='http://www.itjxue.com/web/' target='_blank'><u>网页制作</u></a>,网页设计"/> <meta name="description" content="IT教学网用CSS制作的带阴影的网站导航"/> <meta name="title" content=" css网站导航 " /> <meta name="creator.name" content="IT教学网, itjxue.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-ca<a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=ps&se' target='_blank'><u>ps</u></a>; } .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 全部选择提示：你可先修改部分代码，再按运行]

(责任编辑：IT教学网)

复制链接发给好友收藏本文关闭此页

上一篇：不错的翻页特效(CSS实现)

下一篇：网页特效代码：非常简洁的网页导航菜单

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

(责任编辑：IT教学网)

相关导航代码文章

阅读排行

专题教程

推荐导航代码文章

最新更新导航代码