HTML中的列表元素、表格、以及动画效果实现

列表元素

什么是列表元素？

什么时候使用列表元素？

凡是多项罗列的地方都可以使用列表

列表元素的使用场景

有序列表格式：

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

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

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

    <ol>
        <li>

        </li>
    </ol>

无序列表：

    <ul>
        <li>

        </li>
    </ul>

设置列表样式：

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

    list-style属性的取值：

使用自定义列表：

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

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

    </dl>

列表的嵌套：

在有序列表里面进行布局只能放在

• 标签里

   

  表格

  表格标签：

      <table>
  
      </table>
  

  行标签：

      <tr>
  
      </tr>
  

  列标签：

      <td>
  
      </td>
  

  合并列：

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

  合并列代码示例：合并两列

      <td  colspan = 2">      </td>
  

  动画效果

  过渡

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

  过渡条件

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

 

转载于:https://www.cnblogs.com/date150219-/p/8978214.html