list CSS

  1. unordered list/ 无序序列
  • 改变序列的标记

    1
    2
    3
    4
    5
    6
    <!-- default: bullet point/small black circles; use style to change it into square/disc/circle/none -->
    <ul style="list-style-type:square">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ul>
  • menu形式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <style>
    ul#menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    ul#menu li {
    float:left;
    }
    </style>

    <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
    </ul>
  1. ordered list/ 有序序列

    1
    2
    3
    4
    5
    6
    <!-- default:number, type: A/1/a/I/i -->
    <ol type="A">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ol>
    1
    2
    3
    4
    5
    1 - 数字为序
    A - 大写字母为序
    a - 小写字母为序
    I - 大写罗马数字
    i - 小写罗马数字
  2. Description lists/ 描述序列

    1
    2
    3
    4
    5
    6
    7
    <!-- dl-description list; dt-description term; dd-describe the term in a description list -->
    <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
    </dl>

参考文档:
HTML Lists- W3schools.com