列表样式

列表的样式有：列表项符号、列表项图片。

list-style-type(列表项符号)

有序列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        ol{list-style-type:lower-roman;}
    </style>
</head>
<body>
<h3>有序列表</h3>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>
</body>
</html>

无序列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        ul{list-style-type:circle;}
    </style>
</head>
<body>
    <h3>无序列表</h3>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

无符号列表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        ol,ul{list-style-type:none;}
    </style>
</head>
<body>
    <h3>有序列表</h3>
    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
    <h3>无序列表</h3>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

list-style-image(列表项图片)

列表项图片Demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        ul{list-style-image: url(/static/front-end/css3/earth.png);}
    </style>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

列表样式

# 列表样式

# list-style-type(列表项符号)

# list-style-image(列表项图片)

列表样式

list-style-type(列表项符号)

list-style-image(列表项图片)