水平导航条

和垂直导航条一样,先要建无序列表:
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CLIENTS</a></li>
<li><a href="#">CASE STUDIES</a></li>
</ul>
去掉列表符号,并将padding和margin设置为0,想让水平导航条宽度为720px,并加上背景:
ul {
  padding:0;
  margin:0;
  list-style:none;             /*去掉列表符号*/
  width:720px;               /*该句也可取消,这样其宽度由所有锚总宽决定*/
  background:#66CCFF;   /*若想为整个水平导航条加背景,就在说行加*/
}
到这里,它还是垂直的,还得让它有变成水平的:
ul li{
  float:left;
  }
我们知道，当元素浮动时，它不再占据文档流的任何空间，因此，父列表实际上没有内容，它就会收缩，从而隐藏列表背景。
有两种方法可父列表可包含浮动元素：其一是加人一个进行清理的元素（但这要加人不必要的元素），其二是对父元素也进行浮动：
ul {
  padding:0;
  margin:0;
  list-style:none;
  width:720px;
  folat:left;
  background:#66CCFF;
}
接着,设置块状效果,以块宽度,行高,链文本样式:
ul a{
  display:block;
  padding:0 1em;
  line-height:1.5em;
  color:#FFFFFF;
  text-decoration:none;
  }
再加一点就可以实现漂亮的翻转效果了:
ul a:hover{
  background:#FFFFFF;
  color:#000000;
  }
到此,大多数浏览器材都能正确工作,但Mac IE5.2还不能正确显示,为避免这个问题,需要对锚进行浮动:
ul a{
  display:block;
  float:left;      /*为了能在Mac上的IE5.2能正确工作,就要加上它*/
  padding:0 1em;
  line-height:1.5em;
  color:#FFFFFF;
  text-decoration:none;
  }
最后的完整代码
有这么一种情况:直接在ul内加人id,而整个列表又被置于一个容器wrap内,这时,该怎么写:
#wrap{
  margin:6em 20em;
  }
#nav{
  paddign:0;
  margin:0;
  width:500px;
  font:bold;
  float:left;
  background:#CC9966 url(images/mainNavBg.gif) repeat-x;
  list-style:none;
}

#nav li{
  float:left;
  }  
 
#nav a{
  display:bock;
  float:left;
  padding:0 2em;
  line-height:1.5em;
  color:white;
  text-decoration:none;
}
#nav a:hover{
  background:#33CCFF;
  color:white;
}
......
<div id="wrap">
  <ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
posted @ 2008-11-17 07:02  尚远  阅读(472)  评论(0)    收藏  举报