列表 - 三类列表的使用及其区别

238 阅读1分钟

HTML 支持3种不同的列表:有序列表无序列表自定义列表

1. 有序列表

  • <ol> 定义有序列表,order list 的缩写,默认以数字显示排序 。
  • <li> 定义列表选项,list item 的缩写。
  • type 属性 有五个属性值:1、a、A、i、I,只能从五个中选择一种,其余的都不会识别,会按照默认的数字排列
  • start 属性 表示从type类型的第几个数字开始,可以取负数
<style>
    ol{
        border: 1px dashed black;
        display: block;
        float: left;
    }
</style>
<body>
    <ol type="1" start="-1">
        <li>ABOUT</li><li>SERVICES</li> <li>WORK</li> <li>CONTACT</li>
    </ol>
    <ol type="a" start="6">
        <li>ABOUT</li><li>SERVICES</li> <li>WORK</li> <li>CONTACT</li>
    </ol>
    <ol type="i" start="4"> <!-- 这里的 i 是小写字母,页面识别为罗马数字 -->
        <li>ABOUT</li><li>SERVICES</li> <li>WORK</li> <li>CONTACT</li>
    </ol>
    <ol type="I" start="-1"> <!-- 这里的 I 是大写字母,页面识别为罗马数字 -->
        <li>ABOUT</li><li>SERVICES</li> <li>WORK</li> <li>CONTACT</li>
    </ol>    
</body>

2. 无序列表

  • <ul> unordered list 的缩写,表示无序列表。默认情况下,无序列表的每一项都使用实心圆符号表示
  • <li> 表示列表中的每一项
  • type 属性 四个值,disc(默认)、circle、square、none
<style>
    ul{
        border: 1px dashed lightgreen;
        display: block;
        float: left;
    }
</style>
<body>
    <ul type="disc">
        <li>ABOUT</li><li>SERVICES</li> <li>WORK</li> <li>CONTACT</li>
    </ul>
    <ul type="circle">
        <li>ABOUT</li><li>SERVICES</li> <li>WORK</li> <li>CONTACT</li>
    </ul>
    <ul type="square">
        <li>ABOUT</li><li>SERVICES</li> <li>WORK</li> <li>CONTACT</li>
    </ul>
    <ul type="none">
        <li>ABOUT</li><li>SERVICES</li> <li>WORK</li> <li>CONTACT</li>
    </ul>
</body>

3.自定义列表

  • <dl> definition list 缩写,表示定义列表
  • <dt> definition term 缩写,表示定义术语,也就是我们常说的定义标题,一般情况下,每个定义标题都会对应若干条定义描述
  • <dd> definition description 缩写,表示定义描述。定义描述一般是对定义标题的解释说明,<dt><dd>个数没有限制,在使用中常是一个<dt>对应多个<dd>
  • 自定义列表没有前缀符号,但有缩进
<style>
    dt,dd{
        width: 200px;
        border: 1px solid green;
    }
    .d1,.d2{
        float: left;
    }
</style>
<body>
    <dl>
        <div class="d1">
            <dt>SERVICES</dt>
            <dd>home services</dd>
            <dd>school services</dd>
            <dd>company services</dd>    
        </div>
        <div  class="d2">
            <dt>CONTACT</dt>
            <dd>home contact</dd>
            <dd>school contact</dd>
            <dd>company contact</dd>    
        </div>
    </dl>
</body>

自定义列表 通过两个div盒子进行的浮动

列表属性

  • list-style-type 定义列表符号:disc 实心圆、circle 空心圆、square 实心正方形、none
  • list-style-image 将图片设置为列表符号:url
  • list-style-position 列表符号的放置位置:outside、inside
  • list-style 简写,常用 list-style:none;