HTML + CSS 连载 | 28 - HTML 列表今日头条

RiemannHypo
VIP.5 如鱼得水
249 阅读5分钟

html+css.jpeg

一、列表案例-今日头条

上一节中我们已经完成了基本结构的搭建，接下来我们就可以一个个的设置样式了。

设置新闻标题序号的样式

首先来设置新闻标题的序号的样式，可以通过浏览器的检查工具查看原样式有哪些，具体如下：

image.png

原样式中对序号元素进行了宽和高的设置，因此一定要设置 display 为 inline-block，这样设置的宽高才能生效，另外就是文字居中的设置以及文字加粗、颜色等，具体 CSS 代码如下：

ul > li .no {
  /*修改为 inline-block，设置宽和高*/
  display: inline-block;
  width: 24px;
  height: 24px;
  text-align: center;
  /*设置文字居中*/
  line-height: 24px;

  font-weight: 700;
  color: #999;
}

在浏览器中打开 HTML 页面，效果如下：

image.png

设置新闻标题右边的图标

接着我们再来设置新闻标题右边的图标，原图标所包含的样式可以通过浏览器的检查工具查看得到，具体如下：

image.png

原样式中通过 background-img 来设置背景图片，并更改了 i 元素的属性为 inline-block 这样就可以已设置宽高了，还有就是需要设置一个 margin-lef，也就是设置图标与新闻标题之间的间距，具体添加的 CSS 代码如下：

ul > li .icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  background-size: contain;
  background-image: url(https://lf3-static.bytednsdoc.com/obj/eden-cn/pipieh7nupabozups/toutiao_web_pc/hotboard/new.png);
    }

刷新页面，效果如下：

image.png

可以看到图标已经出现，但是位置有一点点偏差，这里我们可以使用相对定位来进行微调，具体代码如下：


    ul > li .icon {
      /*调整位置*/
      position: relative;
      top: 2px;
      left: 4px;

      display: inline-block;
      width: 16px;
      height: 16px;
      margin-left: 6px;
      background-size: contain;
      background-image: url(https://lf3-static.bytednsdoc.com/obj/eden-cn/pipieh7nupabozups/toutiao_web_pc/hotboard/new.png);
    }

刷新页面，效果如下：

image.png

设置多条新闻的样式

前面我们已经添加了一条新闻，可以拷贝多条新闻，查看下效果，具体 HTML 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <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: 15px;
    }

    ul > li > a {
      display: inline-block;
    }

    ul > li .no {
      /*修改为 inline-block，设置宽和高*/
      display: inline-block;
      margin-right: 3px;
      width: 24px;
      height: 24px;
      text-align: center;
      /*设置文字居中*/
      line-height: 24px;

      font-weight: 700;
      color: #999;
    }

    ul > li .icon {
      /*调整位置*/
      position: relative;
      top: 2px;
      left: 4px;

      display: inline-block;
      width: 16px;
      height: 16px;
      margin-left: 6px;
      background-size: contain;
      background-image: url(https://lf3-static.bytednsdoc.com/obj/eden-cn/pipieh7nupabozups/toutiao_web_pc/hotboard/new.png);
    }

    ul > li .content {
      display: inline;
    }
  </style>
</head>
<body>
  <ul>
    <li class="item">
      <a href="">
        <span class="no">1</span>
        <div class="content">
          神十七乘组进行航天技术试验亮点
        </div>
      </a>
      <i class="icon"></i>
    </li>
    <li class="item">
      <a href="">
        <span class="no">2</span>
        <div class="content">
          幼儿园防暴演练厨师抄锅铲追进教室
        </div>
      </a>
      <i class="icon"></i>
    </li>
    <li class="item">
      <a href="">
        <span class="no">3</span>
        <div class="content">
          专家称低价不应成为直播代名词
        </div>
      </a>
      <i class="icon"></i>
    </li>
    <li class="item">
      <a href="">
        <span class="no">4</span>
        <div class="content">
          美针对哈马斯和伊朗实施新一轮制裁
        </div>
      </a>
      <i class="icon"></i>
    </li>
    <li class="item">
      <a href="">
        <span class="no">5</span>
        <div class="content">
          亚残运会有哪些硬核科技
        </div>
      </a>
      <i class="icon"></i>
    </li>
    <li class="item">
      <a href="">
        <span class="no">6</span>
        <div class="content">
          幼儿园防暴演练厨师抄锅铲追进教室
        </div>
      </a>
      <i class="icon"></i>
    </li>
    <li class="item">
      <a href="">
        <span class="no">7</span>
        <div class="content">
          哈马斯代表团与伊朗副外长在俄会见
        </div>
      </a>
      <i class="icon"></i>
    </li>
    <li class="item">
      <a href="">
        <span class="no">8</span>
        <div class="content">
          广州地铁禁止万圣节恐怖妆容
        </div>
      </a>
      <i class="icon"></i>
    </li>
    <li class="item">
      <a href="">
        <span class="no">9</span>
        <div class="content">
          台媒：解放军无人机“绕台一圈”
        </div>
      </a>
      <i class="icon"></i>
    </li>

  </ul>
</body>
</html>

在浏览器中打开 HTML 页面，效果如下：

image.png

头条官网上的第一条新闻左边会有一个置顶的图标，并且下面的第一二三条新闻序号的颜色是不一样的；我们先来查看一下指定图标的样式，具体如下：

image.png

指定图标也是通过背景图片实现，并且有一定的宽高。

在设置指定图标以及第一二三条新闻序号的颜色前，先给他们添加 class 属性，具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <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: 15px;
    }

    ul > li > a {
      display: inline-block;
    }

    ul > li .no {
      /*修改为 inline-block，设置宽和高*/
      display: inline-block;
      margin-right: 3px;
      width: 24px;
      height: 24px;
      text-align: center;
      /*设置文字居中*/
      line-height: 24px;

      font-weight: 700;
      color: #999;
    }

    ul > li .icon {
      /*调整位置*/
      position: relative;
      top: 2px;
      left: 4px;

      display: inline-block;
      width: 16px;
      height: 16px;
      margin-left: 6px;
      background-size: contain;
      background-image: url(https://lf3-static.bytednsdoc.com/obj/eden-cn/pipieh7nupabozups/toutiao_web_pc/hotboard/new.png);
    }

    ul > li .content {
      display: inline;
    }
  </style>
</head>
<body>
  <ul>
    <li class="item">
      <a href="">
        <i class="no top"></i>
        <div class="content">
          神十七乘组进行航天技术试验亮点
        </div>
      </a>
      <i class="icon"></i>
    </li>
    <li class="item">
      <a href="">
        <span class="no first">1</span>
        <div class="content">
          幼儿园防暴演练厨师抄锅铲追进教室
        </div>
      </a>
      <i class="icon"></i>
    </li>
    <li class="item">
      <a href="">
        <span class="no second">2</span>
        <div class="content">
          专家称低价不应成为直播代名词
        </div>
      </a>
      <i class="icon"></i>
    </li>
    <li class="item">
      <a href="">
        <span class="no third">3</span>
        <div class="content">
          美针对哈马斯和伊朗实施新一轮制裁
        </div>
      </a>
      <i class="icon"></i>
    </li>
    <li class="item">
      <a href="">
        <span class="no">4</span>
        <div class="content">
          亚残运会有哪些硬核科技
        </div>
      </a>
      <i class="icon"></i>
    </li>
    <li class="item">
      <a href="">
        <span class="no">5</span>
        <div class="content">
          幼儿园防暴演练厨师抄锅铲追进教室
        </div>
      </a>
      <i class="icon"></i>
    </li>
    <li class="item">
      <a href="">
        <span class="no">6</span>
        <div class="content">
          哈马斯代表团与伊朗副外长在俄会见
        </div>
      </a>
      <i class="icon"></i>
    </li>
    <li class="item">
      <a href="">
        <span class="no">7</span>
        <div class="content">
          广州地铁禁止万圣节恐怖妆容
        </div>
      </a>
      <i class="icon"></i>
    </li>
    <li class="item">
      <a href="">
        <span class="no">8</span>
        <div class="content">
          台媒：解放军无人机“绕台一圈”
        </div>
      </a>
      <i class="icon"></i>
    </li>

  </ul>
</body>
</html>

首先来给置顶图标添加 CSS 样式，具体 CSS 代码如下：

ul > li .top {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 3px;
  /*background 缩写属性*/
  background: url(https://lf9-static.bytednsdoc.com/obj/eden-cn/pipieh7nupabozups/toutiao_web_pc/icon_hot_board_stick.svg) no-repeat 50%;
  background-size: contain;
}

刷新 HTML 页面，效果如下：

image.png

置顶图标有一点点偏上，可以通过绝对定位来微调位置，具体的 CSS 代码如下所示：

ul > li .top {
  position: relative;
  top: 6px;
  left: 2px;

  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 3px;
  background: url(https://lf9-static.bytednsdoc.com/obj/eden-cn/pipieh7nupabozups/toutiao_web_pc/icon_hot_board_stick.svg) no-repeat 50%;
  background-size: contain;
}

刷新 HTML 页面，效果如下：

image.png

接着给第123序号设置不同的颜色，通过浏览器检查工具查看第一二三条新闻标题左边序号的颜色，如下图所示：

image.png

分别对它们设置颜色，具体 CSS 代码如下：

ul > li .first {
  color: #a82e2e;
}

ul > li .second {
  color: #f04142;
}

ul > li .third {
  color: #ff9a03;
}

刷新页面，效果如下：

image.png

当然也可以在不添加 first second third 等 class 属性的情况下，直接使用结构伪类也可以实现，具体 CSS 代码如下所示：

ul > li:nth-child(2) .no {
  color: #a82e2e;
}

ul > li:nth-child(3) .no {
  color: #f04142;
}

ul > li:nth-child(4) .no {
  color: #ff9a03;
}

刷新页面，效果如下：

image.png

可以看到基本的样式我们已经实现了。

avatar
文章
阅读
粉丝