详解学习DIV+CSS之二-导航栏实例

<! 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=gb2312"   />
< title > 彻底弄懂CSS盒子模式(导航栏实例详解) </ title >
< style  type ="text/css" > ...
<!--
* {...}{
 margin: 0px;
 padding: 0px;
 }
#nav {...}{
 background: url(http://www.hsptc.com/cssImg/bj.jpg) repeat-y;
 width: 200px;
 overflow: hidden;
}
#nav li {...}{
 background: url(http://www.hsptc.com/cssImg/mylan.gif) no-repeat left center ;
 height: 35px;
 width: 190px;
 padding-top:15px;
}

#nav a {...}{
 background: url(http://www.hsptc.com/cssImg/lanbj2.gif) no-repeat left center;
 text-decoration: none;
 height: 20px;
 width: 155px;
 display: block;
 float: right;
 padding: 0px 0px 0px 5px;
 font-weight: bold;
 font-size: 9pt;
 line-height: 20px;
 color: #630;
 border-left:10px solid #f90;
}

#nav a:hover {...}{
 background-image: url(http://www.hsptc.com/cssImg/lanbj3.gif);
 color: #FFFFFF;
}
-->
</ style >
</ head >

< body >
< ul  id ="nav" >
  < li >
    < a  href ="#" > 彻底弄懂CSS盒子模式1 </ a >
  </ li >
 
  < li >
    < a  href ="#" > 彻底弄懂CSS盒子模式2 </ a >
  </ li >
 
  < li >
    < a  href ="#" > 彻底弄懂CSS盒子模式3 </ a >
  </ li >
 
  < li >
    < a  href ="#" > 彻底弄懂CSS盒子模式4 </ a >
  </ li >
 
  < li >
    < a  href ="#" > 彻底弄懂CSS盒子模式5 </ a >
  </ li >
</ ul >
</ body >
</ html >

 

 原文地址是 http://www.showweb.cn/info.asp?articleid=1384