CSS3之list属性

最新推荐文章于 2024-01-29 01:01:03 发布

Programmer.杨

最新推荐文章于 2024-01-29 01:01:03 发布

阅读量501

点赞数 2

分类专栏：前端技术-CSS 文章标签： list-style list-style-image CSS 属性

本文链接：https://blog.csdn.net/ywb88888888/article/details/102704029

版权

前端技术-CSS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

list-style:

作用：
在一个声明中设置所有的列表属性。
说明：
按顺序写入各属性：list-style-type, list-style-position, list-style-image 可以不设置其中的某个值，比如 “list-style:circle inside;” 也是允许的，未设置的属性会使用其默认值

list-style-image:

作用：
          使用图像来替换列表项的标记。
说明：
          始终规定一个 “list-style-type” 属性以防图像不可用
常用值：
          (url): 图像所在路径
          (none)：默认值，无图形被显示

list-style-position:

作用：
          相对于对象的内容绘制列表项标记
说明：
          inside, outside是相对于li来说的
常用值：
          (inside): 列表项目标记放置在文本以内，且环绕文本根据标记对齐
          (outside):默认值，保持标记位于文本的左侧，列表项目标记放置在文本以外，且环绕文本不根据标记对齐

list-style-type:

作用：
          设置列表项标记的类型
说明：
          在设置 list-style-image 时应该默认选择一个type，以备用
常用值：
          (none)： 无标记
          (disc)： 默认值，标记是实心圆
          (circle)： 标记是空心圆
          (square)： 标记是实心方块
          (decimal)： 标记是数字

代码示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CSS3之list属性</title>
    
    <style type="text/css">
        li {
            border: 1px solid green;
        }        
        #ul1 {
	        margin-left: 30px;
	        border: 1px solid red;
	        list-style: circle outside url(img/rightT.jpg);
	        /*
	        list-style-image: url(./img/rightT.jpg);
	        list-style-position: outside;
	        list-style-type: circle;
	        */
        }
        #ul2 {
	        margin-left: 30px;
	        border: 1px solid red;
	        list-style-type: upper-roman;
        }
    </style>
</head>
<body>
    <ul id="ul1">
        <li>Jerry</li>
        <li>Tom</li>
        <li>Lucy</li>
    </ul>
    <ul id="ul2">
        <li>成龙</li>
        <li>吴京</li>
        <li>李连杰</li>
    </ul>
</body>
</html>