CSS样式学习笔记之四：创建导航条-优快云博客

本文介绍如何使用CSS来定制列表的外观，并创建垂直和水平导航条。通过调整CSS属性，可以去除列表项默认样式，添加背景图像，以及设置链接的显示方式。这些技巧对于网页布局和导航设计非常实用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>