免费AI编程助手
CSS 列表
2018-11-01 17:39 更新
HTML中有三种类型的列表。
- 有序列表
- 无序列表
- 定义列表
使用CSS，我们可以用不同的方式来设计它们。
列表标记
您可以使用 list-style-type 属性来设置列表的标记样式。
此属性的允许值如下所示。
- none - 不显示任何标记。
- box
check
circle
diamond
disc
dash square - 使用指定的形状作为标记。请注意，并非所有浏览器都支持所有形状。 - decimal - 使用十进制数字作为标记。
- binary - 为标记使用二进制数。
- lower-alpha - 对标记使用小写字母字符。
- upper-alpha - 对标记使用大写字母字符。
下面显示了正在使用的list-style-type属性。
<html>
<head>
<style rel="stylesheet" type="text/css">
li.a {
list-style-type: none;
}
li.b {
list-style-type: disc;
}
li.c {
list-style-type: circle;
}
li.d {
list-style-type: square;
}
li.e {
list-style-type: decimal;
}
li.f {
list-style-type: lower-alpha;
}
li.g {
list-style-type: upper-alpha;
}
li.h {
list-style-type: lower-roman;
}
li.i {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<ul>
<li class="a">Point one</li>
<li class="b">Point two</li>
<li class="c">Point three</li>
<li class="d">Point four</li>
<li class="e">Point five</li>
<li class="f">Point six</li>
<li class="g">Point seven</li>
<li class="h">Point eight</li>
<li class="i">Point nine</li>
</ul>
</body>
</html>您可以将此属性应用于整个列表或单个列表项。
列表样式图像
您可以通过list-style-image属性使用图像作为标记。
以下代码使用图像作为列表标记。
<!DOCTYPE HTML>
<html>
<head>
<style>
ul {
list-style-image: url("https://www.w3cschool.cn/style/download.png");
}
</style>
</head>
<body>
<ul>
<li>XML</li>
<li>CSS</li>
<li>Javascript</li>
<li>Java</li>
<li>SQL</li>
<li>HTML</li>
</ul>
</body>
</html>列表样式位置
您可以使用list-style-position属性指定标记相对于li元素的内容框的位置。
允许的值在内部（标记在内容框内）和外部（标记在内容框外部）。
以下代码显示了list-style-position属性及其使用的值。
<!DOCTYPE HTML>
<html>
<head>
<style>
li.inside {
list-style-position: inside;
}
li.outside {
list-style-position: outside;
}
li {
background-color: lightgray;
}
</style>
</head>
<body>
<ul>
These are the inside items:
<li class="inside">A</li>
<li class="inside">B</li>
<li class="inside">C</li>
These are the outside items:
<li class="outside">D</li>
<li class="outside">E</li>
<li class="outside">F</li>
</ul>
</body>
</html>简写属性
list-style是设置所有列表特性的简写属性。
列表样式简写属性的格式如下：
list-style: <list-style-type> <list-style-position> <list-style-image>
以下代码显示如何使用简写列表样式属性。
<html>
<head>
<style type="text/css">
li {
background: mistyrose;
}
li#arrow {
list-style: square url("arrow.png") outside;
}
li#arrow-inside {
list-style: url("arrow.png") inside;
}
li#marker-inside {
list-style: square inside;
}
li#marker-image {
list-style: square url("arrow.png");
}
li#arrow-only {
list-style: url("arrow.png");
}
li#marker {
list-style: circle;
}
li#position {
list-style: inside;
}
</style>
</head>
<body>
<ul>
<li id="arrow">All three styles can be provided.</li>
<li id="arrow-inside">The image and the position.</li>
<li id="marker-inside">The marker and the position.</li>
<li id="marker-image">The marker and the image.</li>
<li id="arrow-only">Just the image.</li>
<li id="marker">Just the marker.</li>
<li id="position">Just the position.</li>
</ul>
</body>
</html>相关属性
| 属性 | 描述 | CSS |
|---|---|---|
| line-height | 设置行高 | 1 |
| list-style-image | 将图像设置为列表项目标记 | 1 |
| list-style-position | 将列表项目标记设置为内部或外部 | 1 |
| list-style-type | 设置列表项目标记的类型 | 1 |
| list-style | 在一个声明中设置列表属性 | 1 |
以上内容是否对您有帮助：
← CSS 链接
更多建议：