CSS样式学习笔记之四：创建导航条

1基本的列表的样式

#common ul{
  margin :0;
  padding :0;
  list-style:none ;/*去掉点号*/
}

#common li{
  padding-left :30px;/*添加填充*/
  background :background-image:url(ba.gif);/*设置背景*/
}

 <div id="common ">
      <ul>
         <li>Read emails</li>
         <li>Writer book</li>
        <li>Go shopping</li>
        <li>Cook dinner</li>
      </ul>
  </div>

/*------------------------------------------------------------*/

2垂直的导航条

.cuizhi ul a{
   display :block ;
   width :100px;
   height :50px;
   line -height :40px;
   color :#CC0000;
   margin :0;
   padding:0;
   list-style:none;
   text -decoration :none ;

}
.cuizhi li{
   display:inline;
}

.cuizhi ul a:link,a:visited{
    color:#CC0000;
    text-decoration:none;

}
.cuizhi ul a:hover,a:active{
    text-decoration:underline;
    background-color:#999933;
}

<div class="cuizhi ">
      <ul>
         <li><a href="http://www.baidu.com">baidu</a></li>
         <li><a href="http://www.google.cn">google</a></li>
        <li><a href="http://www.qq.com">qq网站</a></li>
        <li><a href="http://www.baidu.com">baidu</a></li>
     </ul>
</div>

3创建水品导航条

.row ul a:hover,a:active{
     text-decoration:underline;
     background-color:#999933;
}

.row ul li{
   display:block;
   width:100px;
   height:50px;
   line-height:40px;
   color:#CC0000;
   margin:0;
   padding:0;
   list-style-type:none;
   text-decoration:none;
   float:left;
}

    <div class="row ">
      <ul>
         <li><a href="http://www.baidu.com">baidu</a></li>
         <li><a href="http://www.google.cn">google</a></li>
        <li><a href="http://www.qq.com">qq</a></li>
        <li><a href="http://www.baidu.com">baidu</a></li>
     </ul>
    </div>