列表

Author Avatar
Ninefire 6月 06, 2018
  • 在其它设备中阅读本文章

列表就相当于去超市购物时的购物清单
在HTML中也可以创建列表,在网页中共有三种列表:

无序列表

  • 使用 <ul></ul> 标签来创建一个无序列表
  • 使用 <li></li> 标签在 ul 中创建一个个列表项,一个 <li></li> 就是一个列表项
  • 通过 type 属性可以修改无序列表的项目符号
    可选值:
    disc ,实心圆点(默认值)
    square ,实心方块
    circle ,空心圆圈

PS:默认的项目符号我们一般不使用!因为在不同浏览器的效果千差万别,我们在开发过程中希望用户看到的效果不因为外在环境而存在差异。如果需要设置项目符号,则可以采用为 li 设置背景图片的方式来设置,这样可以确保不同浏览器中样式的统一。
ul li 都是块元素。


有序列表

  • 使用 <ol></ol> 标签来创建一个有序列表
  • 使用 <li></li> 标签在 ol 中创建一个个列表项,一个 <li></li> 就是一个列表项
  • 通过 type 属性可以修改有序列表的项目符号
    可选值:
    1 ,使用阿拉伯数字作为序号(默认值)
    aA ,采用小写字母或大写字母作为序号
    iI ,采用小写或大写的罗马数字作为序号

ol也是块元素。
去除项目符号的CSS写法:list-style: none;


定义列表

定义列表用来对一些词汇或者内容进行定义

使用 <dl></dl> 来创建一个定义列表。
dl 中有两个子标签:

  • dt:被定义的内容
  • dd:对被定义内容的描述
    例:
    <dl>
      <dt>武松</dt>
      <dd>景阳冈打虎英雄,战斗力99</dd>
      <dd>后打死西门庆,投奔梁山</dd>
      <dt>武大</dt>
      <dd>知名餐饮企业家,战斗力1</dd>
    </dl>
    

    同样的,dlulol 之间可以互相嵌套


列表嵌套

列表之间都是可以互相嵌套的,可以在无序列表中放置有序列表,也可以在有序列表中放置无序列表。
例:

<p>菜谱</p>
<ul>
    <li>
        糖醋排骨
        <ol>
            <li></li>
            <li></li>
            <li>排骨</li>
        </ol>
    </li>
    <li>
        椒盐玉米
        <ol>
            <li></li>
            <li></li>
            <li>玉米</li>
        </ol>
    </li>
    <li>
        青椒肉丝
        <ol>
            <li>青椒</li>
            <li>肉丝</li>
        </ol>
    </li>
</ul>

如发现错误请联系我,谢谢你。
本文链接:http://ninefire.tk/HTML&CSS.basics/23.html