logo头像

学如逆水行舟

标签之美九——列表

标签之美——列表

列表是网页排序中时常会用到的一个元素。

一、无序列表

1、无序列表的标签

无序列表使用

    来定义标签的开始和结束。使用
  • 来设置标签项,示例如下:

    1
    2
    3
    4
    5
    <body>
    <ul>
    <li>title1</li><li>title2</li><li>title3</li>
    </ul>
    </body>

    效果如下:

    2、无序列表标签的样式

    标签的type属性可以设置其样式:

    实心圆样式:disc

    这个样式就是默认的样式,效果如上图

    空心圆样式:circle

    示例如下:

    1
    2
    3
    4
    5
    <body>
    <ul type="circle">
    <li>title1</li><li>title2</li><li>title3</li>
    </ul>
    </body>

    效果如下:

    方块样式:square

    效果如下:

    二、有序列表

    1、有序列表的标签

    有序列表的开始和结束使用

      来定义,同样使用
    1. 来定义列表项,示例如下:

      1
      2
      3
      4
      5
      <body>
      <ol type="square">
      <li>title1</li><li>title2</li><li>title3</li>
      </ol>
      </body>

      效果如下:

      2、有序列表的样式

      数字标号的样式:type=1

      这个样式为默认的样式,效果如上。

      大写字母的标签:type=A

      效果如下:

      小写字母样式:type=a

      大写罗马数字样式:type=I

      小写罗马数字样式:type=i

      三、列表的嵌套

      列表可以进行嵌套,形式如下:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      <body>
      <ol type="i">
      <li>title1</li>
      <ul type="disc">
      <li>subTitle1</li><li>subTitle2</li>
      </ul>
      <li>title2</li><li>title3</li>
      </ol>
      </body>

      效果如下:

      专注技术,热爱生活,交流技术,也做朋友。

      ——珲少 QQ群:203317592