首页 > 其他分享> > 707：html列表：ol，ul，dl

707：html列表：ol，ul，dl

2021-08-10 20:02:39 作者：互联网

列表

有序列表 – ol、li

无序列表：ul、li

定义列表：dl、dt、dd

列表相关的CSS属性

03_列表_列表的属性使用.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      ul {
        /* 1.list-style-type: none; */

        /* 2.list-style-image */
        /* margin-left: 200px;
            list-style-image: url(../img/test_01.webp); */

        /* 3.list-style-position */
        /* list-style-position: inside; */

        /* 4.list-style: 缩写属性 */
        /* list-style: type image position; */
        list-style: none;
        padding: 0;
        margin: 0;
      }

      ul li {
        margin-top: 8px;
      }

      ul li span {
        background-color: #f00;
        color: #fff;
        padding: 0 5px;
      }
    </style>
  </head>
  <body>
    <h2>热门电影</h2>
    <ul>
      <li>
        <span>1</span>
        海王
      </li>
      <li>
        <span>2</span>
        海贼王
      </li>
      <li>
        <span>3</span>
        药王
      </li>
      <li>
        <span>4</span>
        上海堡垒
      </li>
      <li>
        <span>5</span>
        诛仙
      </li>
    </ul>
  </body>
</html>

标签：dl,ol,image,707,list,style,列表,ul,li
来源： https://www.cnblogs.com/jianjie/p/15125563.html