构建静态页面 之 [ 列表 ]

*爱你&永不变心* 提交于 2019-12-04 08:44:36

列表

描述

  • 列表可以分为:有序列表、无序列表

有序列表

  • <ol>元素 - 表示定义有序列表
  • 属性有

    • type属性 - 表示设置有序列表项目符号的样类型

      • 属性值:1(数学) A(大写字母) a(小写字母) I(大写罗马数学) i(小写罗马数字)
    • start属性 - 表示有序列表的项目符号从什么位置开始

      • 属性值必须为数字值
  • <li>元素 - 表示列表中的列表项
  • 属性有

    • type属性 - 表示设置当前列表项的项目符号类型

      • 属性值:1(数学) A(大写字母) a(小写字母) I(大写罗马数学) i(小写罗马数字)
    • value属性 - 表示当前列表项的项目符号从什么位置开始

      • 属性值必须为数字值
<body>
<!--
      <ol>元素 - 表示有序列表
       * type属性 - 表示设置有序列表项目符号的样类型
        * 属性值:1(数学) A(大写字母) a(小写字母) I(大写罗马数学) i(小写罗马数字)
       * start属性 - 表示有序列表的项目符号从什么位置开始
        * 属性值必须为数字值

      <li>元素 - 表示列表中的列表项
      * type属性 - 表示设置当前列表项的项目符号类型
        * 属性值:1(数学) A(大写字母) a(小写字母) I(大写罗马数学) i(小写罗马数字)
       * value属性 - 表示当前列表项的项目符号从什么位置开始
        * 属性值必须为数字值
  -->
<ol type="A" start="3">
    <li>手机</li>
    <li type="a" value="5">电脑</li>
    <li>平板</li>
</ol>
</body>

无序列表

  • <ul>元素 - 表示有序列表

    • type属性 - 表示设置无序列表项目符号的样类型
    • 属性值

      • disc - 表示实心圆 “默认值”
      • circle - 表示空心圆
      • square - 表示实心方形
  • <li>元素 - 表示列表中的列表项

    • type属性 - 表示设置当前列表项的项目符号类型
    • 属性值

      • disc - 表示实心圆 “默认值”
      • circle - 表示空心圆
      • square - 表示实心方形
<body>
<!--
      <ul>元素 - 表示有序列表
       * type属性 - 表示设置无序列表项目符号的样类型
        * 属性值:disc - 表示实心圆 “默认值”
                circle - 表示空心圆
                square - 表示实心方形

      <li>元素 - 表示列表中的列表项
      * type属性 - 表示设置当前列表项的项目符号类型
        * 属性值:disc - 表示实心圆 “默认值”
                circle - 表示空心圆
                square - 表示实心方形
  -->
<ul type="square">
    <li>手机</li>
    <li type="circle">电脑</li>
    <li>平板</li>
</ul>
</body>

列表样式

list-style-type属性

  • 表示设置列表项目符号的类型

    • 注意:有序的可以设置无序的类型,无序的也可以设置有序的类型
    • 建议:有序设置有序的,无序设置无序的,保证元素语义化
<head>
    <meta charset="UTF-8">
    <title>项目符号的样式</title>
    <style>
        ul {
            /*
                list-style-type属性 - 表示设置列表项目符号的类型
                 * 注意:有序的可以设置无序的类型,无序的也可以设置有序的类型
                 * 建议:有序设置有序的,无序设置无序的,保证元素语义化
             */
            list-style-type: square;
        }
    </style>
</head>
<body>
<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto distinctio dolores earum eos eveniet expedita fugit, nemo nihil perferendis quam quasi rerum sunt tempore vel? Ducimus eum nobis non.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta eum facilis ipsam quae ratione temporibus ut, vel. Assumenda atque blanditiis enim, ipsa nesciunt numquam obcaecati rerum, sed tenetur ut voluptates.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A blanditiis consequatur cupiditate debitis dignissimos doloremque, et exercitationem fuga illo non nulla odit officia optio perferendis perspiciatis placeat ratione veritatis! Facere?</li>
</ul>
</body>

list-style-image属性

  • 表示引入外部项目符号样式(图片)

    • 注意:设置list-style-image属性后,list-style-type属性会无效
<head>
    <meta charset="UTF-8">
    <title>项目符号的样式</title>
    <style>
        ul {
            /*
                list-style-image属性 - 表示引入外部项目符号样式(图片)
                 * 设置list-style-image属性后,list-style-type属性会无效
             */
            list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif");
        }
    </style>
</head>
<body>
<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto distinctio dolores earum eos eveniet expedita fugit, nemo nihil perferendis quam quasi rerum sunt tempore vel? Ducimus eum nobis non.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta eum facilis ipsam quae ratione temporibus ut, vel. Assumenda atque blanditiis enim, ipsa nesciunt numquam obcaecati rerum, sed tenetur ut voluptates.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A blanditiis consequatur cupiditate debitis dignissimos doloremque, et exercitationem fuga illo non nulla odit officia optio perferendis perspiciatis placeat ratione veritatis! Facere?</li>
</ul>
</body>

list-style-position属性

  • 表示设置项目符号的位置
<head>
    <meta charset="UTF-8">
    <title>项目符号的样式</title>
    <style>
        ul {
            /*
                list-style-type属性 - 表示设置列表项目符号的类型
                 * 注意:有序的可以设置无序的类型,无序的也可以设置有序的类型
                 * 建议:有序设置有序的,无序设置无序的,保证元素语义化
             */
            list-style-type: square;
            /*
                list-style-image属性 - 表示引入外部项目符号样式(图片)
                 * 设置list-style-image属性后,list-style-type属性会无效
             */
            list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif");
            /* list-style-position属性 - 表示设置项目符号的位置 */
            list-style-position: outside;
            /* list-style属性也允许简写 */
            /*list-style: url("https://mdn.mozillademos.org/files/11981/starsolid.gif") outside;*/
        }
    </style>
</head>
<body>
<ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet architecto distinctio dolores earum eos eveniet expedita fugit, nemo nihil perferendis quam quasi rerum sunt tempore vel? Ducimus eum nobis non.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta eum facilis ipsam quae ratione temporibus ut, vel. Assumenda atque blanditiis enim, ipsa nesciunt numquam obcaecati rerum, sed tenetur ut voluptates.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A blanditiis consequatur cupiditate debitis dignissimos doloremque, et exercitationem fuga illo non nulla odit officia optio perferendis perspiciatis placeat ratione veritatis! Facere?</li>
</ul>
</body>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!