阅读(3084)

CSS 列表

最后一次修改 2017年08月04日

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("http://www.html.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>