zoukankan      html  css  js  c++  java
  • 707 html列表:ol,ul,dl

    列表



    有序列表 – 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>
    

  • 相关阅读:
    JS 数组总结
    JS 数据类型及其判断
    CSS 优先级
    正则表达式及其使用例子
    常见的图片格式
    React 箭头函数的使用
    手动搭建 react+webpack 开发环境
    JS 函数参数及其传递
    JS 中的 this 指向问题
    JS 中函数的 length 属性
  • 原文地址:https://www.cnblogs.com/jianjie/p/15125563.html
Copyright © 2011-2022 走看看