需要注意的地方见注释:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html,body {
margin: -12px 0 0 0;
padding: 0;
border: 0;
width:100%;
height:100%;
}
#wrapper{
margin:0 auto;
padding:0;
width:80%;
height:100%;
}
#top {
margin: 0 auto;
width: 100%;
height: 100px;
background-color: #ddd;
filter: alpha(opacity = 70); /*IE透明*/
-moz-opacity:0.7; /*Mozilla早期版本透明*/
opacity: 0.7; /*firefox透明*/
text-align: center;
padding:0px;
border-bottom:5px solid red;
}
#nav {
background: #dadada;
width: 100%;
height: 50px;
line-height: normal;
border-bottom: 2px solid #804040;
font-size: large;
margin: 0 auto;
padding: 0px;
overflow:hidden;
}
#nav ul {
margin: 0px 0px 0px 50px;
list-style-type: none;
line-height: 50px; /*设定UL行高*/
white-space:nowrap; /*文本不换行*/
}
#nav ul li {
float: left;
margin: -1px;
border: 1px solid #c0c0c0;
background: #abd3be;
border-right-width: 3px;
}
#nav ul a {
text-decoration: none;
padding: 15px 15px; /*确定a标标签的大小*/
color: #408080;
white-space: nowrap;
star: expression(onfocus=this.blur); /*缺除链接虚线框,只有IE能识别,所以直接加在a标签上了*/
border:1px solid #c0c0c0;;
}
#nav a:hover { /*设置动态效果*/
color: #fff; /*设定前景颜色,也可以在此时设定自己想要的背景颜色*/
border-right-color:#008040;
border-left-color:#808080;
border-top: 1px solid #400080;
border-bottom: 1px solid #400080;
}
#sign{
filter: alpha(opacity = 50);
-moz-opacity:0.5;
opacity: 0.5;
width:88px;
height:50px;
background:#abd3be;
position:absolute;
left:190px;
top:81px;
z-index:6;
display:none;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="wrapper">
<div id="top">
<h1>logo</h1>
</div>
<div id="nav">
<ul>
<li>
<a href="#" onfocus="this.blur()" title="Link 1"><span>Link 1</span></a>
</li>
<li>
<a href="#" onfocus="this.blur()" title="Link 2"><span>Link 2</span></a>
</li>
<li>
<a href="#" onfocus="this.blur()" title="Link 3"><span>Link 3</span></a>
</li>
<li>
<a href="#" onfocus="this.blur()" title="Link 4"><span>Long 4</span></a>
</li>
<li>
<a href="#" onfocus="this.blur()" title="Link 5"><span>Link 5</span></a>
</li>
<li>
<a href="#" onfocus="this.blur()" title="Link 6"><span>Link 6</span></a>
</li>
<li>
<a href="#" onfocus="this.blur()" title="Link 7"><span>Link 7</span></a>
</li>
<li>
<a href="#" onfocus="this.blur()" title="Link 8"><span>Link 8</span></a>
</li>
</ul>
</div>
</div>
<div id="sign"></div>
</body>
</html>
分享到:
相关推荐
符合web标准的二级横向下拉菜单
JS横向循环滑动也可移动性切换
完美的css菜单汇总,各种经典横向菜单按钮。
JavaScript实现的3级横向导航菜单源码
横向二级菜单,采用div+css+js打造。
内容索引:脚本资源,jQuery,滑动菜单,... 动态的横向jquery滑动菜单,Blog用的话最合适不过了,鼠标滑过某一菜单项的时候,菜单会滑出一些,突出显示,鼠标连续滑过整个菜单,会有更炫的效果,为你的网页增加动感元素。
JS横向三级菜单代码,向右展开多级导航效果,黑色风格,效果图如上所示,菜单整体看上去挺专业,设计漂亮唯美,小编在国外网站上看到的菜单,感觉还是挺不错的,如果你想使用,自己修改一下菜单名称就可以了。
五款WEB2.0漂亮的CSS横向下拉菜单导航条
这个例子是我从别人那里借来的,很不错,实训ASP.NET时用的就是这个还得到老师的夸奖!
横向菜单,鼠标进入即缓慢显示下拉二级菜单,支持各种浏览器。
常见下拉菜单#nav li ul { line-height: 27px; list-style-type: none;text-align:left; visibility : hidden; width: 180px; position: absolute; padding: 5px}
第七天 横向导航菜单今天我们开始学习《十天学会web标准(div+css)》的html列表,包含以下内容和知识点:
js鼠标滑过显示横向二级导航菜单代码
这是一款基于CSS3的颜色渐变菜单导航,该菜单提供横向和纵向两种方式,当鼠标滑过菜单时,菜单项会出现不错的颜色渐变动画。 建议开发童鞋使用统一开发环境UDE来进行查看、调试、开发哦~~其属于MM应用引擎的应用...
这个效果还不错,主要是用于做导航条使用。。可以参考
项目列表 列表的符号 图片符号列表 竖直排列导航菜单 横向导航菜单 传统的HTML语言提供了项目列表的基本功能,包括顺序式列表的标记和无顺序列表的标记等。当引入CSS后,项目列表被赋予了很多新的属性,甚至超越了它...
内容索引:脚本资源,jQuery,下拉菜单,水平菜单 基于jQuery的横向、纵向下拉菜单,支持五级,其实这已经够用了,横向和竖向都有了,方便大家的调用,效果如上示,jQuery加入后,菜单下拉更平滑了,也希望jQuery爱好者...
变色效果蓝色横向二级导航条代码 非常美观的一款导航菜单
内容索引:脚本资源,jQuery,动感菜单,三级菜单 三级横向导航菜单,使用了jQuery插件,菜单可平滑展开,一共支持三级,颜色与菜单文字的配合看上去也很舒服。前几天已经放出来了不少类似功能的菜单,帮助脚本爱好者...
内容索引:脚本资源,jQuery,动感菜单,水平导航菜单 jQuery 带动态效果的两级横向导航菜单,全部是由jquery+CSS代码完成,菜单很简洁,使用背景色平铺而成,因此没有使用GIF等图像资源,这个菜单可以两级展开,当把...