CSS控制ul的基础代码

最新推荐文章于 2024-04-19 12:54:59 发布

Terry001

最新推荐文章于 2024-04-19 12:54:59 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML/XML/CSS 文章标签： css float url 浏览器

本文链接：https://blog.youkuaiyun.com/Terry001/article/details/1692960

HTML/XML/CSS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用CSS来控制`<ul>`列表的基本样式，包括去除默认样式、添加自定义列表符号，以及创建垂直和水平导航条。通过设置`margin`、`padding`、`list-style-type`、`background`、`display`和`float`属性，可以实现各种定制效果。

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

1.基本列表样式
<ul>
<li>product</li>
<li>download</li>
<li>about</li>
</ul>
应用自己的样式之前先去掉浏览器默认的样式:
ul {
margin:0;
padding:0;
list-style-type: none;
}
先添加定制的符号:
li {
background: url(circle.gif) no-repeat 0 50%;/* meaning top center */
padding-left: 30px;
}
这样一个简单的定制列表符号就完成了。

2.创建垂直导航条
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="product.html">product</a></li>
<li><a href="about.html">about</a></li>
</ul>
同上，先去掉默认的样式：
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
对列表项(li)并不应用样式，而是对a标记应用样式。
ul a {
display: block;
width: 200px;
height: 200px;
line-height: 40px; /* 以便让行文本垂直居中 */
color: #000;
text-decoration: none;
background: #99bbee url(images/rollover.gif) no-repeat left center;
text-indent: 50px;
}

3.创建水平导航条
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="product.html">product</a></li>
<li><a href="about.html">about</a></li>
</ul>
设置导航条的宽度，背景等
ul {
margin: 0;
padding: 0;
list-style-type: none;
width: 720px;
float: left; /*当li使用float技术水平排列时，添加这一行就可以不用在后面清理了(clean)*/
background: #ffaa22 url(images/bg-mainav.gif) repeat-x;
}
使列表水平显示(默认时列表是块级元素，是上下排列的)
ul li {
float: left;
}
or
ul li {
display: inline;
}