• HTML之列表


    列表有三种类型:

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

    无序列表:列表项使用粗体圆点(典型的小黑圆圈)进行标记。

    自定义列表:自定义列表以 <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
  • 相关阅读:
    值得收藏的十二条Jquery随身笔记
    都来中大奖啦~双色球随机算法!
    巧妙使用div+css模拟表格对角线
    介绍两个非常好用的Javascript内存泄漏检测工具
    JQuery模仿淘宝天猫魔盒抢购页面倒计时效果
    JQuery巧妙利用CSS操作打印样式
    boost编译随笔
    Dev-C++安装第三方库boost
    比特币源码分析--C++11和boost库的应用
    QT +go 开发 GUI程序
  • 原文地址:https://www.cnblogs.com/lxx2014/p/9909363.html
Copyright © 2020-2023  润新知