5.列表

1.无序列表

· type属性：none--无标记、disc--实心圆、circle--空心圆、square--实心方块
· list-style-position：设置列表项标志的位置  outside默认，inside标志在列表内
· list-style-image：   将图像设置为列表项标志  list-style-image:(url:../image/1.jpg)

<ul type="circle">
    <li>空心圆</li>
    <li>空心圆</li>
     <li>空心圆</li>
</ul>
<ul class="inside">
    <li>标志在列表内</li>
    <li>标志在列表内</li>
    <li>标志在列表内</li>
</ul>
<ul class="image-ul">
    <li>图像标志</li>
    <li>图像标志</li>
    <li>图像标志</li>
</ul>


//css样式
.inside {
  list-style-position: inside;
}
.image-ul {
  list-style-image: url("../../assets/imgs/ul.gif");
}

 

2.有序列表

· type属性： 默认整数、A大写字母、a小写字母、I罗马字符
· start属性： 从某个数字开始
· value属性：用于li，从某个数字开始

<ol start="3">
    <li>有序列表</li>
    <li>有序列表</li>
    <li value="9">有序列表</li>
</ol>

 

3.自定义列表

<dl>
    <dt>东北三省</dt>
    <dd>辽宁</dd>
    <dd>吉林</dd>
    <dd>黑龙江</dd>
    <dt>西南三省</dt>
    <dd>云南</dd>
    <dd>贵州</dd>
    <dd>四川</dd>
</dl>