List elements, tables, and animation effects in HTML

list element

What are list elements?

When to use list elements?

Lists can be used wherever there are multiple listings

List element usage scenarios

Ordered list format:

    注意：<ol>是父级元素 ， <li>是子级元素；

    <ol>的子级只能是<li>标签

    在有序列表里面进行布局只能放在<li>标签里

    <ol>
        <li>

        </li>
    </ol>

Unordered list:

    <ul>
        <li>

        </li>
    </ul>

Set the list style:

    list-style：none    无样式，即让次盒子隐藏

    list-style属性的取值：

Use a custom list:

    <dl>
        <专业术语名词解释>
        <dt>
        xxxxxxxxxx
        </dt>

        <术语内容，解释内容>
        <dd>
        xxxxxxx
        </dd>

    </dl>

Nesting of lists:

Layout in an ordered list can only be placed in

• in the label

   

  sheet

  Form Labels:

      <table>
  
      </table>
  

  Row labels:

      <tr>
  
      </tr>
  

  Column labels:

      <td>
  
      </td>
  

  Merge columns:

      属性：colspan
  
      属性值：数字
  
      <td  colspan = "    ">      </td>
  

  Merge Columns Code Example: Merge Two Columns

      <td  colspan = 2">      </td>
  

  animation effect

  transition

      transition（过渡）：在规定的时间内，从一个值过渡到另外一个值
  
      transition-duration：规定的时间（单位：s，ms）
  
      transition-propery：过渡筛选，指定哪个属性进行过渡
  
      transition-delay：过渡延迟，设置过渡延迟时间（（单位：s，ms）
  

  transition conditions

      尺寸：区块、图片宽高、字体大小、盒模型
  
      位置：四个方向的取值变化
  
      透明度（opacity）：0-1（从无到有）
  
      颜色