CSS列表

小白求学1

于 2024-09-28 15:23:14 发布

阅读量480

点赞数 16

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/2401_82561004/article/details/142616367

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在网页中很多地方都会用到列表，例如导航菜单、新闻列表、商品分类等等。您除了可以使用 HTML 中的一些属性来对列表进行简单的设置外，在 CSS
中也提供了几种专门用来设置和格式化列表的属性，如下所示：

list-style-type：设置列表项前面标记的形状（外观）；
list-style-position：设置标记和列表中文本之间的距离；
list-style-image：使用图像代替默认的标记；
list-style：统一设置上面的三个属性。

1. list-style-type

使用 list-style-type 属性可以设置列表中每个列表项前标记的样式，属性的可选值如下：

值	描述
none	无标记
disc	默认值，标记为实心圆
circle	将标记设置为空心圆
square	将标记设置为实心方块
decimal	将标记设置为数字
decimal-leading-zero	将标记设置为以 0 开头的数字标记，例如 01、02、03
lower-roman	将标记设置为小写罗马数字，例如 i、ii、iii、iv、v
upper-roman	将标记设置为大写罗马数字，例如 I、II、III、IV、V
lower-alpha	将标记设置为小写英文字母，例如 a、b、c、d、e
upper-alpha	将标记设置为大写英文字母，例如 A、B、C、D、E
lower-greek	将标记设置为小写希腊字母，例如 α、β、γ、δ、ε
lower-latin	将标记设置为小写拉丁字母，例如 a、b、c、d、e
upper-latin	将标记设置为大写拉丁字母，例如 A、B、C、D、E
hebrew	将标记设置为传统的希伯来编号
armenian	将标记设置为传统的亚美尼亚编号
georgian	将标记设置为传统的乔治亚编号
cjk-ideographic	将标记设置为中文数字，例如一、二、三、四、五
hiragana	将标记设置为日文平假名字符，例如あ、い、う、え、お
katakana	将标记设置为日文片假名字符，例如ア、イ、ウ、エ、オ
hiragana-iroha	将标记设置为日文平假名序号
katakana-iroha	将标记设置为日文片假名序号

【示例】使用 list-style-type 属性改变无序列表、有序列表中列表项前标记的样式：

<!DOCTYPE html>

<html>

<head>

    <style>

        ul {

            list-style-type: circle;

        }

        ol {

            float: left;

        }

        .ol_one {

            list-style-type: lower-roman;

        }

        .ol_two {

            list-style-type: lower-greek;

        }

        .ol_three {

            list-style-type: georgian;

        }

    </style>

</head>

<body>

    <ul>

        <li>CSS链接</li>

        <li>CSS边框</li>

        <li>CSS表格</li>

    </ul>

    <ol class="ol_one">

        <li>CSS链接</li>

        <li>CSS边框</li>

        <li>CSS表格</li>

    </ol>

    <ol class="ol_two">

        <li>CSS链接</li>

        <li>CSS边框</li>

        <li>CSS表格</li>

    </ol>

    <ol class="ol_three">

        <li>CSS链接</li>

        <li>CSS边框</li>

        <li>CSS表格</li>

    </ol>

</body>

</html>

运行结果如下图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
图：list-style-type 属性演示

2. list-style-position

使用 list-style-position 属性可以设置在何处放置列表项前的标记，属性的可选值如下：

值	描述
inside	列表项前的标记放置在之后的文本以内，列表项中的文本会根据标记对齐
outside	默认值，保持标记位于文本的左侧，列表项前的标记放置在文本以外，并且列表项中的文本不会根据标记对齐
inherit	从父元素继承 list-style-position 属性的值

【示例】使用 list-style-position 属性设置列表项前标记的位置：

<!DOCTYPE html>

<html>

<head>

    <style>

        ol {

            list-style-type: lower-roman;

        }

        li {

            background: #ccc;

            margin-bottom: 2px;

        }

        .ol_one {

            list-style-position: inside;

        }

        .ol_two {

            list-style-position: outside;

        }

    </style>

</head>

<body>

    <ol class="ol_one">

        <li>CSS链接</li>

        <li>CSS边框</li>

        <li>CSS表格</li>

    </ol>

    <ol class="ol_two">

        <li>CSS链接</li>

        <li>CSS边框</li>

        <li>CSS表格</li>

    </ol>

</body>

</html>

运行结果如下图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
图：list-style-position 属性演示

3. list-style-image

通过 list-style-image 属性可以将列表项前的标记替换为一个图像，属性的可选值如下：

值	描述
URL	图像的路径
none	默认值，不显示任何图像
inherit	从父元素继承 list-style-image 属性的值

【示例】使用 list-style-image 属性将列表项前的标记替换为一个图像：

<!DOCTYPE html>

<html>

<head>

    <style>

        ul {

            list-style-image: url('./css_icon.png');

        }

    </style>

</head>

<body>

    <ul>

        <li>CSS链接</li>

        <li>CSS边框</li>

        <li>CSS表格</li>

    </ul>

</body>

</html>

运行结果如下图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
图：list-style-image 属性演示

4. list-style

list-style 属性是上述三个属性（list-style-type、list-style-position、list-style-
image）的简写，使用 list-style 可以同时设置上面的三个属性，其语法格式如下：

list-style: list-style-type || list-style-position || list-style-image;

提示：在使用 list-style 属性时，需要按照上面的顺序来为参数赋值，只要遵守参数的顺序，即使忽略其中的一项或多项也是可以的，例如 list- style: none;、list-style:circle inside;，被忽略的参数会设置为参数对应的默认值。

【示例】使用 list-style 属性来统一设置列表项的标记样式、位置和图像：

<!DOCTYPE html>

<html>

<head>

    <style>

        ul {

            list-style: url('./css_icon.png');;

        }

        ol {

            list-style: lower-greek inside;

        }

    </style>

</head>

<body>

    <ul>

        <li>CSS链接</li>

        <li>CSS边框</li>

        <li>CSS表格</li>

    </ul>

    <ol>

        <li>CSS链接</li>

        <li>CSS边框</li>

        <li>CSS表格</li>

    </ol>

</body>

</html>

运行结果如下图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
图：list-style 属性演示