前端之样式列表

列表大体上和其他文本一样

List列表

列表的默认样式

ul ， ol ，dl 元素设置margin的顶部和底部: 16px（1rem）;



当我将根元素的字体大小改为10px时，

所以，list列表的margin-top和margin-bottom都是1rem。

无论根元素的字体大小变没变，ul 和 ol的 padding-left都是 40px，但是
li 默认是没有设置间距的。；
dl的是零，但是dd 的 padding-left是40px；

处理列表间距

<style>
html {
    /* 设置字体 */
    font-size: 10px;
}

ul,
ol,
dl {
    /* 字体大小 */
}

li,
dd {
    /* 行高 */
}

dt {
    /* 粗体 */
}
</style>

列表特定样式

ul 和 ol列表：

1. list-style-type ：设置用于列表的项目符号的类型，例如无序列表的方形圆形项目符号，或有序列表的数字，字母或罗马数字。
2. list-style-position ：设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。
3. list-style-image ：允许您为项目符号使用自定义图片，而不是简单的方形或圆形。

开始前：

<style>
html {
    /* 设置字体 */
    font-family: '宋体', '隶书';
    font-size: 10px;
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2rem;
}

ul,
ol,
dl {
    /* 字体大小 */
    font-size: 1.5rem;
}

li,
dd {
    /* 行高 */
    line-height: 1.5;
}


/* dt {
    粗体
    font-weight: bold;
} */
</style>

符号样式 list-style-type

<style>
/* 有序列表 */

ol {
    list-style-type: upper-alpha;
}
</style>

项目符号位置 list-style-position

默认是 list-style-position: outside;

修改成

<style>
/* 有序列表 */

ol {
    list-style-type: upper-alpha;
    list-style-position: inside;
}
</style>

使用自定义的项目符号图片 list-style-image

支持 png，svg

<style>
/* 有序列表 */

ol {
    list-style-type: upper-alpha;
    list-style-position: inside;
    list-style-image: url('../images/little.png');
}
</style>

<style>
/* 有序列表 */

ol {
    list-style-type: upper-alpha;
    list-style-position: inside;
    list-style-image: url('../images/little2.svg');
}
</style>

list-style 速记

<style>
ul {
  list-style-type: square;
  list-style-image: url(example.png);
  list-style-position: inside;
}
/* 等价于
ul {
  list-style: square url(example.png) inside;
}
 */
</style>

有序列表计数 start

<style>

/* 有序列表 */

ol {
    list-style-type: upper-alpha;
    list-style-position: outside;
}
</style>

    <ol start="0">
        <li>斗罗大陆</li>
        <li>武动乾坤</li>
        <li>绝世武神</li>
    </ol>

倒序

    <ol start="0" reversed>
        <li>斗罗大陆</li>
        <li>武动乾坤</li>
        <li>绝世武神</li>
    </ol>

value 指定数值

value 属性允许设置列表项指定数值，

<style>

/* 有序列表 */

ol {
    list-style-position: outside;
}
</style>

    <ol>
        <li>斗罗大陆</li>
        <li>武动乾坤</li>
        <li>……</li>
        <li value="100">绝世武神</lival>
    </ol>

牛刀小试——列表
下一节: 前端之样式化链接、web字体