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

当前位置: 首页 > 图文教程 > 网页特效 > 导航代码 > CSS制作带阴影的网站导航代码

导航代码: 网页制作的网页下拉菜单（5）; 网页制作的网页下拉菜单（6）; CSS Sprite制作的鼠标感应网站导航条; 100%高度全屏自适应网页布局; 类似按钮效果的网站导航CSS代码

No. « ‹ 1 2 »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-10 浏览: 294 ::

收藏到网摘: n/a

树形导航特效,CSS特效代码网页制作的网页下拉菜单（1）

本网页特效是由纯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制作的带阴影效果的网站导航--软晨学习网ruanchen.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="软晨学习网, ruanchen.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 全部选择提示：你可先修改部分代码，再按运行]

树形导航特效,CSS特效代码网页制作的网页下拉菜单（1）

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

评论 (0) All