2007-05

初学div+css之选项卡篇

Jason at 15:04

经历简单的横向、纵向、二级菜单后，开始“滑动门”之旅。

(在阿捷的网站上借用了一幅图片)

想法是用无序列表ul来实现

<!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>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
#nav
{
padding:10px 0 0 46px;
margin:0px;
width:80%;
list-style:none;
height:26px;
border-bottom:solid 1px #690;
}
#nav li
{
float:left;
margin-right:6px;
padding:0px;
display:block;
height:25px;
width:80px;
border:1px solid #690;
border-bottom:none;
line-height:25px;
}
#nav a
{
height:25px;
width:80px;
font-family:verdana;
display:block;
color:#333;
text-decoration:none;
text-align:center;
background:#f9e9a9;
font-size:12px;
}
#nav li a.active
{
background:white;
padding-bottom:5px;
}
#nav li:hover a,#nav li.over a
{
background:white;
padding-bottom:2px;
position:absolute;
}
</style>
<script type="text/javascript">
var init = function()
{
var nav = document.getElementById('nav');
var childs = nav.childNodes;
for(var i = 0;i<childs.length;i++)
{
if(childs<i>.nodeName=="LI")
{
childs<i>.onmouseover = function(){this.className='over';}
childs<i>.onmouseout = function(){this.className='';}
}
}
}
window.onload = init;
</script>
</head>
<body>
<ul id="nav">
<li id="1"><a href="#1">aaa</a></li>
<li><a href="#1">aaa</a></li>
<li><a href="#1">aaa</a></li>
<li><a href="#1">aaa</a></li>
<li><a href="#1">aaa</a></li>
<li><a href="#1">aaa</a></li>
</ul>
</body>
</html>

Run This Code

每一个li设定好border属性，除了底部的之外，因为底部那根线条要ul的border-bottom去处理。

因为横向显示，所以li要进行float:left；

再则，li进行float:left之后，ul无法确定其自身的高度，所以需要显示指定一个高：

#nav
   {
   padding:10px 0 0 46px;
   margin:0px;
   width:80%;
   list-style:none;
   height:26px;   /*这里一定要指定*/
   border-bottom:solid 1px #690;   /*设定底部线条*/
   }

由于IE与FireFox的差异性，需同时指定li与li a的width/height的值。
没想到这样一小小的东东，却这样大伤脑筋 T_T