非零基础自学前端最后一遍一 HTML+CSS 12 HTML高级元素 12.3 列表的练习-新闻列表-代码优化

男娘i 2024-03-24 08:23 18阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  12 HTML高级元素
         *   *  12.3 列表的练习-新闻列表-代码优化
             *   *  12.3.1 列表的练习

![在这里插入图片描述][5210a720ec1d42a5b5006ecd70887b46.png_pic_center]

#### 一 HTML+CSS ####

#### 12 HTML高级元素 ####

##### 12.3 列表的练习-新闻列表-代码优化 #####

###### 12.3.1 列表的练习 ######

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="./css/reset.css">
      
      <style>
        ul>li {
          
          margin-top: 18px;
        }
    
        ul>li>a {
          
          display: inline-block;
        }
    
        ul>li>a:hover {
          
          color: #f04142;
        }
    
        /* 局部 */
        ul>li .ranking {
          
          display: inline-block;
          width: 24px;
          height: 24px;
          margin-right: 3px;
          text-align: center;
          line-height: 24px;
    
          font-weight: 700;
          color: #999;
        }
    
        /* 伪类: 结构伪类(后续会详细讲解) */
        ul>li:nth-child(1) .ranking {
          
          color: #f00;
        }
    
        ul>li:nth-child(2) .ranking {
          
          color: #0f0;
        }
    
        ul>li:nth-child(3) .ranking {
          
          color: #00f;
        }
    
    
        /* 内容相关 */
        ul>li .content {
          
          display: inline;
        }
    
        /* 图标相关的 */
        ul>li .icon {
          
          position: relative;
          top: 2px;
          left: 4px;
    
          display: inline-block;
          width: 16px;
          height: 16px;
          background-image: url(../images/new_icon.svg);
        }
    
        ul>li .new {
          
          background-image: url(../images/new_icon.svg);
        }
    
        ul>li .hot {
          
          background-image: url(../images/hot_icon.svg);
        }
      </style>
    </head>
    
    <body>
    
      <ul>
        <li class="item">
          <a href="#">
            <span class="ranking">1</span>
            <div class="content">
              一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
            </div>
            <i class="icon"></i>
          </a>
        </li>
        <li class="item">
          <a href="#">
            <span class="ranking">2</span>
            <div class="content">
              一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
            </div>
            <i class="icon new"></i>
          </a>
        </li>
        <li class="item">
          <a href="#">
            <span class="ranking">3</span>
            <div class="content">
              一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
            </div>
          </a>
        </li>
        <li class="item">
          <a href="#">
            <span class="ranking">4</span>
            <div class="content">
              一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
            </div>
            <i class="icon"></i>
          </a>
        </li>
        <li class="item">
          <a href="#">
            <span class="ranking">5</span>
            <div class="content">
              一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
            </div>
            <i class="icon hot"></i>
          </a>
        </li>
        <li class="item">
          <a href="#">
            <span class="ranking">6</span>
            <div class="content">
              一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
            </div>
          </a>
        </li>
        <li class="item">
          <a href="#">
            <span class="ranking">7</span>
            <div class="content">
              一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
            </div>
            <i class="icon"></i>
          </a>
        </li>
        <li class="item">
          <a href="#">
            <span class="ranking">8</span>
            <div class="content">
              一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
            </div>
            <i class="icon"></i>
          </a>
        </li>
        <li class="item">
          <a href="#">
            <span class="ranking">9</span>
            <div class="content">
              一花一世界明媚春天杜鹃花开满枝头色彩艳丽繁花似锦
            </div>
            <i class="icon hot"></i>
          </a>
        </li>
      </ul>
    
    </body>
    
    </html>

reset.css

body,
    ul,
    li,
    a {
        
      padding: 0;
      margin: 0;
    }
    
    ul,
    li,
    ol {
        
      list-style: none;
    }
    
    a {
        
      text-decoration: none;
      color: #333;
    }

渲染效果

![在这里插入图片描述][d223499541dd47f385e1082fceac451c.png_pic_center]

[5210a720ec1d42a5b5006ecd70887b46.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/0d62070812ba45dcbb1ccddccdff2f7b.png
[d223499541dd47f385e1082fceac451c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/1416324904f34676b60db90c7f766146.png