【靜態頁面架構】CSS之列表

佐珥玎發表於2018-08-28
架構CSS

CSS架構

列表

元素:

有序列表;
ol元素表示有序列表項，li元素表示條目
start只能是數字，
以type屬性名和值(1,a,A,I,i)來表示有序列表

<body>
<!--以type屬性表示有序列表符號型別
    1 A a I i
    start屬性，只能用數字，表示有序符號的開始位置
  -->
<ol start="4" type="I">
    <!--<li>表示列表項
        以type屬性表示有序列表符號型別
    1 A a I i
    value屬性，只能用數字，表示列表項的值符號的開始位置-->
    <li>PC端</li>
    <li value="6" type="i">網遊</li>
    <li>頁遊</li>
    <li>手遊</li>
</ol>
</body>

無序列表；

ul元素表示無序列表項，li元素表示條目
以type屬性名和值(1,a,A,I,i)來表示無序列表

<body>
<!--type屬性表示無序列表的符號型別
      circle表示空心圓
      disc預設值，表示實心圓
      square表示實心方形
    -->
<ul type="square">
    <li>PC端</li>
    <!--<li>表示無序列表的列表項
      -->
    <li>網遊</li>
    <li>手遊</li>
    <li>頁遊</li>
</ul>
</body>

巢狀列表；

在li元素在放另一個有序或無序列表

<body>
<ul>
    <li>PC端</li>
    <li>網遊
        <ul>
            <li>3D網遊</li>
            <li>2D網遊</li>
        </ul>
    </li>
    <li>手遊</li>
    <li>頁遊</li>
</ul>
<ol>
    <li>PC端</li>
    <li>網遊
        <ol>
            <li>3D網遊</li>
            <li>2D網遊</li>
        </ol>
    </li>
    <li>手遊</li>
    <li>頁遊</li>
</ol>
</body>

定義列表；

 <style>
        dd::before{
            conent:`-`;
        }
    </style>
</head>
<body>
<dl>
    <!--<dl>元素定義列表-->
    <!-- <dt>元素 - 表示(列表的分類標題) -->
    <dt>遊戲</dt>
    <!-- <dd>元素 - 表示定義列表中的列表項 -->
    <dd>PC端</dd>
    <dd>網遊</dd>
    <dd>手遊</dd>
</dl>
</body>

相關文章