列表

列表

• 有序列表 ol order list

  ol父元素

  li子元素

  li元素内容前面自动添加有序的数字或字母

<ol>
    <li>Lorem ipsum dolor sit amet.</li>
</ol>

• 无序列表 ul unorder list

  ul父元素

  li子元素

<ul>
    <li>Lorem.</li>
</ul>    

• 定义列表 dl defined list

  <dl>
      <dt>HTML</dt>
      <dd>HyperText Markup Language</dd>
  </dl>

   

• 适用场景

  列表：某一类相关内容，整合到一起展示

  导航:代码如下

  <header>
      <nav>
          <ul>
              <li>
                  <a href="#"><i>雪碧图</i></a>
              </li>
              <li>
                  <a href=""><i></i></a>
              </li>
          </ul>
      </nav>
  </header>

• 有序和无序列表的样式清空

  li{list-style-type: none;}

• 设置次盒子内容为图片

  ul>li{list-style-image: url(../05.png);}

• 设置当前列表的位置

  outside 默认值 列表样式显示次盒子区域（ul或ol的padding区域）

  inside 列表样式显示主盒子区域（ul或ol的content区域）

  注：当ul或ol清除padding后依然显示列表样式

  ul>li{ list-style-position: inside;
      /* 原点变为矩形方块 */
      list-style-type: square;
      /* 变为空心圆 */
      /* disc实心圆（为默认样式） */
      list-style-type: circle;}

  ol>li{
      /* 设置有序 */
      /* 标识改为英文  upper大写  lower小写 */
      list-style-type: upper-alpha;
      list-style-type: lower-alpha;
      /* 罗马数字  同样区分大小写*/
      list-style-type: upper-roman;
      list-style-type: lower-roman;
      /* 设置标识开头为两位数字 */
      list-style-type: decimal-leading-zero;
  }

   

•