当前位置： 移动技术网 > IT编程>网页制作>CSS > HTML之列表

HTML之列表

2018年11月06日  | 移动技术网IT编程  | 我要评论

列表有三种类型：

有序列表：列表项使用数字来标记

无序列表：列表项使用粗体圆点（典型的小黑圆圈）进行标记。

自定义列表：自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

一、有序列表格式：

<ol>
      <li>第一个列表项</li>
      <li>第二个列表项</li>
      <li>第三个列表项</li>
</ol>

运行结果：

  1. 第一个列表项
  2. 第二个列表项
  3. 第三个列表项

不同类型的有序列表：

1.编号列表：

<ol>
   <li>第一列表项</li>
   <li>第二列表项</li>
   <li>第三列表项</li>
   <li>第四列表项</li>
</ol>
<ol start="50">
   <li>第五十列表项</li>
   <li>第五十一列表项</li>
   <li>第五十二列表项</li>
   <li>第五十三列表项</li>
</ol>

运行结果：

  1. 第一列表项
  2. 第二列表项
  3. 第三列表项
  4. 第四列表项
  1. 第五十列表项
  2. 第五十一列表项
  3. 第五十二列表项
  4. 第五十三列表项

2.字母列表：

<ol type="a">
   <li>第a列表项</li>
   <li>第b列表项</li>
   <li>第c列表项</li>
   <li>第d列表项</li>
</ol>
 <ol type="a">
    <li>第a列表项</li>
    <li>第b列表项</li>
    <li>第c列表项</li>
    <li>第d列表项</li>
 </ol>

运行结果：

  1. 第a列表项
  2. 第b列表项
  3. 第c列表项
  4. 第d列表项
  1. 第a列表项
  2. 第b列表项
  3. 第c列表项
  4. 第d列表项

3.罗马数字列表：

<ol type="i">
 <li>apples</li>
 <li>bananas</li>
 <li>lemons</li>
 <li>oranges</li>
</ol>  
 <ol type="i">
  <li>apples</li>
  <li>bananas</li>
  <li>lemons</li>
  <li>oranges</li>
 </ol>

运行结果：

  1. apples
  2. bananas
  3. lemons
  4. oranges
  1. apples
  2. bananas
  3. lemons
  4. oranges

二、无序列表格式：

<ul>
  <li>无序列表项1</li>
  <li>无序列表项2</li>
  <li>无序列表项3</li>
  <li>无序列表项4</li>
</ul>

运行结果：

  • 无序列表项1
  • 无序列表项2
  • 无序列表项3
  • 无序列表项4

不同类型的无序列表：

1.圆点列表：

<ul style="list-style-type:disc">
  <li>无序列表项1</li>
  <li>无序列表项2</li>
  <li>无序列表项3</li>
  <li>无序列表项4</li>
</ul>

运行结果：

  • 无序列表项1
  • 无序列表项2
  • 无序列表项3
  • 无序列表项4

2.圆圈列表：

<ul style="list-style-type:circle">
  <li>无序列表项1</li>
  <li>无序列表项2</li>
  <li>无序列表项3</li>
  <li>无序列表项4</li>
</ul>

运行结果：圆点变成圆圈

  ◦无序列表项1

  ◦无序列表项2

  ◦无序列表项3

  ◦无序列表项4

 

3.正方形列表：

<ul style="list-style-type:square">
  <li>无序列表项1</li>
  <li>无序列表项2</li>
  <li>无序列表项3</li>
  <li>无序列表项4</li>
</ul>

运行结果：圆点变成方形

  ◾无序列表项1

  ◾无序列表项2

  ◾无序列表项3

  ◾无序列表项4

 

三、自定义列表：

<dl>
  <dt>coffee</dt>
  <dd>- black hot drink</dd>
  <dt>milk</dt>
  <dd>- white cold drink</dd>
</dl>

运行结果：

coffee
- black hot drink
milk
- white cold drink

四、嵌套列表：

<ul>
  <li>coffee</li>
  <li>tea
    <ul>
      <li>black tea</li>
      <li>green tea
        <ul>
          <li>china</li>
          <li>africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>milk</li>
</ul>

运行结果：

•coffee

•tea
    
      ◦black tea

      ◦green tea
        
          ◾china

          ◾africa

•milk

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网