ul是html中的无序列表,li是列表中的列表项。如果没有CSS定义它的外观,它默认是显示成一列列表,并且它会存在项目符号(比如方块或实心的黑点)的列表内容。

在CSS网页布局中,我们通常用ul、li来实现横向导航菜单。这就是要我们自己定义CSS来改变它的外观,使它能横向显示在在一行中,并且将项目符号去掉。
CSS:

* {
    font-size:14px;
    text-align:center;
}
#HeaderMenu {
    width:960px;
    margin:20px auto 0 auto;
}
/*定义li的CSS样式*/
#HeaderMenu li {
    float:left;
    display: inline;
    list-style-type: none;
    margin-right:5px;
    padding:5px 10px;
    background:#EFF7FF;
    border-left:5px solid #96C2F1;
}
#HeaderMenu li:hover{
    border-left: 5px solid #ADCD3C;
}
/*定义li中链接a的CSS样式*/
#HeaderMenu a:link,
#HeaderMenu a:visited,
#HeaderMenu a:active {
    text-decoration: none;
    color:#000000;
}
#HeaderMenu a:hover {
    text-decoration: none;
    color:#ff0000;
}

注意,对FF浏览器,只要设置margin:0 auto,即可实现容器的居中了,但在IE中,还需要在父容器中声明text-align:center。
对id为HeaderMenu的无序列表ul中的列表项li,通过我们进行的CSS定义,就可实现一个横向菜单,为了美观,我们还可以对它做进一步的修饰。
HTML:

<ul id="HeaderMenu">
 <li><a href="http://www.ibloglife.com">主页</a></li>
 <li><a href="http://www.ibloglife.com/archives/category/wordpress" >WordPress</a></li>
 <li><a href="http://www.ibloglife.com/archives/category/luanqibazao">乱七八糟</a></li>
 <li><a href="http://www.ibloglife.com/archives/category/live-health-life">健康生活</a></li>
 <li><a href="http://www.ibloglife.com/archives/category/working-hard">快乐工作</a></li>
 <li><a href="http://www.ibloglife.com/archives/category/listening-to-the-song">爱听歌</a></li>
 <li><a href="http://www.ibloglife.com/archives/category/read-book">爱读书</a></li>
 <li><a href="http://www.ibloglife.com/archives/category/computer-internet">电脑网络</a></li>
 <li><a href="http://www.ibloglife.com/archives/category/kejizixun">科技咨讯</a></li>
 <li><a href="http://www.ibloglife.com/archives/category/take-a-photograph">色友色影</a></li>
 <li><a href="http://www.ibloglife.com/about">关于</a></li>
</ul>


© 活着的博客 - 李权辉的个人博客:人,终究是生活在现实之中,是为了活着而生活.