欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS核心属性-列表属性

程序员文章站 2024-01-15 19:14:04
...
列表属性：

语法：
{list-style-type: circle（空心圆）/disc（实心圆）/square（实心方块）/none（去掉列表符号）；}
说明：
定义列表符号样式

语法：
{list-type-image:url（所使用图片的路径以及全称）；}
说明：
使用图片作为列表符号

语法：
{list=type=position:outside(外边)/inside(里边)；}
说明：
定义列表符号位置

语法：
{list-type:none;}
说明：
去掉列表样式

例：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        .u1 li {list-style-type: circle;}
        .u2 li {list-style-image: url(7.jpg)};
        .u3  {border: 1px #000 solid;}
        .u3 li {border: 1px #f00 solid; list-style-position: inside; }
        .u4 li {list-style: none;}
        </style>
    </head>
    <body>
        <ul class="u1">
            <li>西安邮电大学</li>
            <li>西安邮电大学</li>
            <li>西安邮电大学</li>
        </ul>
        <ul class="u2">
            <li>西安邮电大学</li>
            <li>西安邮电大学</li>
            <li>西安邮电大学</li>
        </ul>
        <ul class="u3">
            <li>西安邮电大学</li>
            <li>西安邮电大学</li>
            <li>西安邮电大学</li>
        </ul>
        <ul class="u4">
            <li>西安邮电大学</li>
            <li>西安邮电大学</li>
            <li>西安邮电大学</li>
        </ul>
    </body>
</html>
相关标签： 前端

上一篇： 给UIImageView UILabel等没有自带点击事件的view添加点击事件

下一篇： 一加Nord 2对比小米POCO F3 GT哪个好?一加Nord 2对比小米POCO F3 GT对比评测

推荐阅读