0顶

css制作阴影导航菜单

稿源：互联网 2022-07-27 05:31:03 点击： 3406 撤稿纠错

制作阴影导航菜单css代码，鼠标经过时显示。

以下讨论的是和阴影导航菜单相关的css制作阴影导航菜单教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<?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>
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 CSS制作的带阴影效果的网站导航 站长特效网欢迎您。</title>
<meta http-equiv="ImageToolbar" content="no" />
<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>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<div id="wrapper" class="wrapper">
<div id="innerWrapper" class="innerWrapper">
<ul id="navigator">
<li class="youAreHere"><a href="http://www.zzjs.net"> 网站首页 </a></li>
<li><a href="http://www.zzjs.net"> 网站博客 </a></li>
<li><a href="/music"> 好听音乐 </a></li>
<li><a href="http://www.zzjs.net"> 网页特效 </a></li>
<li><a href="http://www.zzjs.net"> 关于我们 </a></li>
</ul>
</div>
<div id="shadow" class="shadowWrapper"></div>
</div>
</body>
</html>

关于css制作阴影导航菜单的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010083164339.shtml方便下次再访问哦。

·上一篇： 树形导航菜单css代码
·下一篇： 制作二级菜单css代码

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

css制作阴影导航菜单

文章分类LIST >>返回首页

最新游戏

最新新闻