上下导航的一种写法
看效果，这种做法鼠标翻转的时候鼠标所在导航下面会没有横线。要点就在对图片的处理和对id为subnav的div的处理上，subnav使用相对定位，以便于设置z-index属性让能被上面的导航遮盖住（设置负值的上边距）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
* {margin:0px;padding:0px;}
ul {list-style:none}
body ,td ,div ,li ,span {font:12px Arial, Helvetica, sans-serif;}
body {margin: 0px;}
a:link {color:#000;text-decoration:none;}
a:hover {color:#ff3300;text-decoration:none;}
#nav ,#subnav{margin:0 auto;padding-left:15px;width:785px;}
#nav li {display:inline}
#nav li a {display:block;float:left;padding-left:4px;height:25px;line-height:25px;background:url(http://etosun.cn/content/uploadfile/200802/1203774693_2367aa94.gif) no-repeat left 0;}
#nav li a span {display:block;padding:8px 12px 3px 6px;background:url(http://etosun.cn/content/uploadfile/200802/1203774693_12239dff.gif) right 0;}
#nav li a:hover {background-position: 0 -25px;}
#nav li a:hover span {background-position: right -25px;}
#subnav {position:relative;z-index:-100;margin-top:-1px;height:26px;background:#E2EBF4;border-top:1px solid #BCD2E6}
-->
</style></head>
<body >
<ul id="nav">
<li><a href="#"><span>导航名字</span></a></li>
<li><a href="#"><span>导航名字</span></a></li>
<li><a href="#"><span>导航名字</span></a></li>
<li><a href="#"><span>导航名字</span></a></li>
</ul>
<div id="subnav">
subnav
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
* {margin:0px;padding:0px;}
ul {list-style:none}
body ,td ,div ,li ,span {font:12px Arial, Helvetica, sans-serif;}
body {margin: 0px;}
a:link {color:#000;text-decoration:none;}
a:hover {color:#ff3300;text-decoration:none;}
#nav ,#subnav{margin:0 auto;padding-left:15px;width:785px;}
#nav li {display:inline}
#nav li a {display:block;float:left;padding-left:4px;height:25px;line-height:25px;background:url(http://etosun.cn/content/uploadfile/200802/1203774693_2367aa94.gif) no-repeat left 0;}
#nav li a span {display:block;padding:8px 12px 3px 6px;background:url(http://etosun.cn/content/uploadfile/200802/1203774693_12239dff.gif) right 0;}
#nav li a:hover {background-position: 0 -25px;}
#nav li a:hover span {background-position: right -25px;}
#subnav {position:relative;z-index:-100;margin-top:-1px;height:26px;background:#E2EBF4;border-top:1px solid #BCD2E6}
-->
</style></head>
<body >
<ul id="nav">
<li><a href="#"><span>导航名字</span></a></li>
<li><a href="#"><span>导航名字</span></a></li>
<li><a href="#"><span>导航名字</span></a></li>
<li><a href="#"><span>导航名字</span></a></li>
</ul>
<div id="subnav">
subnav
</div>
</body>
</html>
用到的图片
-
« 上下导航写法的补充
|
鼠标翻转连接颜色无效的一种情况»
- 2008-2-24 7:21
- 艺术pk技术