CSS 列表样式-一一网

在 HTML 中，有序列表和无序列表的符号是用 type 属性来定义的，为了遵循结构和样式分离的原则，应该在 CSS 中定义列表样式。

一、列表项符号 list-style-type

1、定义列表项符号

列表项的符号针对 ol 或者 ul 元素，而不是 li 元素，在 ol 中，列表项符号的取值如下：

属性值	说明
decimal	阿拉伯数字 1、2、3……（默认）
lower-roman	小写罗马数字 i、ii、iii……
upper-roman	大写罗马数字 I、II、III……
lower-alpha	小写英文字母 a、b、c……
upper-alpha	大写英文字母 A、B、C……

在 ul 中，列表项符号的取值如下：

属性值	说明
disc	实心圆（默认值）
circle	空心圆
square	正方形

有如下示例：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            ol{
                list-style-type: upper-roman;
            }
            ul{
                list-style-type: circle;
            }
        </style>
    </head>
    <body>
        <h4>有序列表</h4>
        <ol>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
        </ol>
        <h4>无序列表</h4>
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
        </ul>
    </body>
</html>
复制代码

在浏览器中显示为：

2、去除列表项的符号

有时候并不想使用列表项的符号，可以使用 list-style-type:none 来去除列表项的符号，示例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            ol,ul{
                list-style-type: none;
            }
        </style>
    </head>
    <body>
        <h4>有序列表</h4>
        <ol>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
        </ol>
        <h4>无序列表</h4>
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
        </ul>
    </body>
</html>
复制代码

在浏览器中的效果：

二、列表项图片 list-style-image

可以将列表项使用图片来代替，使网站更加美观，有如下示例：

<!DOCTYPE html>
<html>
    <head>
        <meta name="keywords" content="个人主页，HTML学习笔记"/>
        <meta name="author" content="Like_Frost"/>
        <meta name="description" content="学习示例"/>
        <meta name="copyright" content="版权所有，转载前请联系"/>
        <style type="text/css">
            ol,ul{
                list-style-image: url("cat.svg")
            }
        </style>
    </head>
    <body>
        <h4>有序列表</h4>
        <ol>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
        </ol>
        <h4>无序列表</h4>
        <ul>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
        </ul>
    </body>
</html>
复制代码