html列表的用法

一、无序标签

基本语法

<ul>
    <li>芊嵛</li>
    <li>流年</li>
    <li>依诺</li>
</ul>

前面的符号设置

方法一

ul {
    /* 
    去除none
    实心小圆点disc默认
    空心圆circle
    空心正方形square
    */
    list-style: none;
}

方法二

<!-- 
    修改前面符号type 
    默认type="disc"实心小圆点
    type="circle"空心圆
    type="square"空心正方形
    type="none"去除
-->
<ul type="none">
    <li>芊嵛</li>
    <li>流年</li>
    <li>依诺</li>
</ul>

去除由于前面符号而导致的占位

ul {
    /* 去除之前符号占位 */
    /* 写这个设置的符号就无效了,相当于也把符号去了 */
    padding-left: 0px;
}

二、有序标签

基本语法

<ol>
    <li>芊嵛</li>
    <li>流年</li>
    <li>依诺</li>
</ol>

设置序号

<!-- 
    type=""
    1阿拉伯数字1、2、3
    a小写字母a、b、c
    A大写字母A、B、C
    i小写罗马数字i、ii、iii
    I大写罗马数字I、II、III

    start=""
    从上面地方开始
-->
<ol type="a" start="c">
    <li>芊嵛</li>
    <li>流年</li>
    <li>依诺</li>
</ol>

去除序号

ol {
    list-style: none;
}

去除占位

ol {
    /* 这两个都得写 */
    list-style: none;
    padding-left: 0px;
}