CSS 列表

泄露秘密 提交于 2019-12-16 17:53:46

列表项符号

list-style-type 属性可以设置符号的样式。

符号样式有有序的和无序的。


无序列表

在无序列表中,list-style-type 属性的值是形状,它有值有:

  • none 什么都没有
  • disc 实心圆点
  • circle 空心圆
  • square 实心方块

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目符号样式-无序列表</title>
    <style>
        ol{
            list-style-type:disc;
        }
    </style>
</head>
<body>
<h1>软件开发,成就梦想</h1>
<h2>学编程,上利永贞网 https://www.liyongzhen.com/</h2>
<ol>
    <li>HTML 教程</li>
    <li>CSS 教程</li>
    <li>JavaScript 教程</li>
    <li>AI 教程</li
<ol>
</body>
</html>

计算结果


有序列表

在有序列表中,list-style-type 属性的值是数值或字母或罗马数字,它有值有:

  • decimal 数字
  • decimal-leading-zero 数字前面有0
  • lower-alpha 小写字母
  • upper-alpha 大写字母
  • lower-roman 小写罗马
  • upper-roman 大写罗马

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目符号样式-有序列表</title>
    <style>
        ol{
            list-style-type:lower-alpha;
        }
    </style>
</head>
<body>
<h1>软件开发,成就梦想</h1>
<h2>学编程,上利永贞网 https://www.liyongzhen.com/</h2>
<ol>
    <li>HTML 教程</li>
    <li>CSS 教程</li>
    <li>JavaScript 教程</li>
    <li>AI 教程</li
<ol>
</body>
</html>

计算结果


项目图像

list-style-image属性可以给列表前加个小图标

list-style-image属性的值是图片地址,list-style-image:url(图片地址)

下面的列子在列表项目前添加一个小星星。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目符号样式-有序列表</title>
    <style>
        ol{
            list-style-image:url(star.png);
        }
    </style>
</head>
<body>
<h1>软件开发,成就梦想</h1>
<h2>学编程,上利永贞网 https://www.liyongzhen.com/</h2>
<ol>
    <li>HTML 教程</li>
    <li>CSS 教程</li>
    <li>JavaScript 教程</li>
    <li>AI 教程</li
<ol>
</body>
</html>

计算结果

附下载小星星的地址


列表项符号位置

默认情况下,列表项长时分行显示,列表项的文字会缩进到页面中,如下所示:

list-style-position 属性可以改变这种情况,让列表项符在文本的左则还是在文本的内部。

list-style-position 属性有两个值:

  • outside 让列表项符在文本的左则
  • inside 让列表项符在文本的内部

示例:

下面的代码,让列表项符在文本的内部。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目符号显示位置</title>
    <style>
        ul{
            width:200px;
            list-style-position:inside;
        }
    </style>
</head>
<body>
<h1>软件开发,成就梦想</h1>
<h2>学编程,上利永贞网 https://www.liyongzhen.com/</h2>
<ul>
    <li>欢迎您选择一种更高效的学习HTML和CSS的方式。</li>
    <li>通本系列教程,您可以设计出非常漂亮的网站。</li>
    <li>如您继续往下学习,手里掌托不仅是技术,更是远方!</li>  
<ul>
</body>
</html>

计算结果:


快捷方式

list-style可以让您同时指定两种属性值:

  • list-style-type   list-style-position
  • list-style-image   list-style-position

这两种属性值没有先后顺序,谁先谁后都可以。

下面的示例列表项符号是小星星,在文本的内部显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目符号显示位置</title>
    <style>
        ul{
            width:200px;
            list-style:url(star.png) inside;
        }
    </style>
</head>
<body>
<h1>软件开发,成就梦想</h1>
<h2>学编程,上利永贞网 https://www.liyongzhen.com/</h2>
<ul>
    <li>欢迎您选择一种更高效的学习HTML和CSS的方式。</li>
    <li>通本系列教程,您可以设计出非常漂亮的网站。</li>
    <li>如您继续往下学习,手里掌托不仅是技术,更是远方!</li>  
<ul>
</body>
</html>

计算结果:

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!