新手学习DIV+CSS难点之经验总结

7、设置<ul>表列缩进值：

默认情况下，<ul>列表是缩进两个字符显示列表项目的，我们可以通过设置负边界值达到控制其缩进值的目的。

CSS：

ul{
margin-left: -24px;
}

默认值是0，负值表示向左移，正值表示向右移。

8、水平导航条的制作示例：

HTML代码如下：

<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>

CSS中，首先清除ul的list-style、margin和padding：

ul {
margin: 0;
padding: 0;
list-style: none;
width: 720px;
float: left; /*使ul不会因没有内容而没有了高度，使背景不能显示，也可以在最后加上空的div，然后用clear实现*/
background: #FAA819 url(images/mainNavBg.gif) repeat-x;
}

然后，可以将li的display属性设置了inline或者设置float为left，display li可能会出现bug，所以我一般用float left的方法：

ul li {
float: left;
}

ul a {
display: block;
float: left;　/*跨浏览设置*/
padding: 0 2em;
line-height: 2.1em;
background: url(images/divider.gif) repeat-y left top;/*设置分隔线*/
text-decoration: none;
color: #fff;
}

ul .first a {
background: none; /*去掉第一个链接的背景*/
}

ul a:hover {
color: #333;
}

文章共2页: [1] [2]

更多的新手学习DIV+CSS难点之经验总结请到论坛查看: http://BBS.TC711.COM

【双击滚屏】【评论】【收藏】【打印】【关闭】来源：飞腾设计网日期：2008-3-13