構建靜態頁面 之 [ 列表 ]

蔡志遠發表於2018-08-28

列表

描述

  • 列表可以分為：有序列表、無序列表

有序列表

  • <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>

相關文章