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

Riemann Hypothesis

于 2023-10-28 23:04:44 发布

阅读量323

点赞数

分类专栏： HTML2CSS 文章标签： html css 前端

本文链接：https://blog.csdn.net/JingnanJia/article/details/134097789

版权

HTML2CSS 专栏收录该内容

64 篇文章 5 订阅

订阅专栏

html+css.jpeg

一、列表案例-今日头条

上一节内容中我们已经基本完成了今日头条新闻列表的开发，但关于新闻标题右边的图标都是一样的，通过查看原样式，还有很多其他的图标，因此我们可以尝试使用其他的图标。

其他图标设置

先在 CSS 选择器中设置几个不同的图标，具体 CSS 代码如下所示：

ul > li .new {
  /*调整位置*/
  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 .hot {
  /*调整位置*/
  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/hot.png);
}

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

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

在 HTML 页面的列表的 item 中使用不同的图标，li 部分的代码如下，其他部分代码不变：

<li class="item">
  <a href="">
    <i class="no top"></i>
    <div class="content">
      神十七乘组进行航天技术试验亮点
    </div>
  </a>
  <i class="icon hot"></i>
</li>
<li class="item">
  <a href="">
    <span class="no first">1</span>
    <div class="content">
      幼儿园防暴演练厨师抄锅铲追进教室
    </div>
  </a>
  <i class="icon new"></i>
</li>
<li class="item">
  <a href="">
    <span class="no second">2</span>
    <div class="content">
      专家称低价不应成为直播代名词
    </div>
  </a>
  <i class="icon topic"></i>
</li>

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

可以看到不同的图标成功展示出来，但是这里有一个问题，就是 CSS 图标相关的重复代码太多了，我们可以像抽取函数一样，把重复的代码抽取到一个选择器中，把每个图标的背景图或者宽高单独定义，然后元素中同时使用两个 class 属性，这样可以提高 CSS 代码的可复用性。

将图标部分的 CSS 代码修改为如下形式：

/*所有图标的公共样式*/
ul > li .icon {
  /*调整位置*/
  position: relative;
  top: 2px;
  left: 4px;

  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  background-size: contain;

}

ul > li .new {
  background-image: url(https://lf3-static.bytednsdoc.com/obj/eden-cn/pipieh7nupabozups/toutiao_web_pc/hotboard/new.png);
}

ul > li .hot {
  background-image: url(https://lf3-static.bytednsdoc.com/obj/eden-cn/pipieh7nupabozups/toutiao_web_pc/hotboard/hot.png);
}

ul > li .topic {
  width: 27px;
  background-image: url(https://lf3-static.bytednsdoc.com/obj/eden-cn/pipieh7nupabozups/toutiao_web_pc/hotboard/amos.png)
}

在浏览器中刷新页面，具体效果如下：

设置 hover 时的状态

在新闻列表中当鼠标悬浮在新闻标题上时有一个动态效果，也就是 hover 时的状态，具体可通过浏览器检查工具查看，如下所示：

添加一个 CSS 选择器，设置 hover 时的字体的颜色，具体 CSS 代码如下所示：

ul > li > a:hover {
  color: #f04142;
}

刷新页面，将鼠标悬浮到新闻标题上，效果如下：

HTML 样式编写的总结

通过以上的练习，我们可以总结出来在编写 HTML 页面的时候的编写步骤：

先完成 HTML 结构
重置样式 body a ul li
书写样式时先整体，后局部；从外往里，从上往下
去除重复的 CSS 代码；将重复的逻辑放到一个单独的 css 中，如 icon；不同的代码抽取到不同的 class 中如 hot new topic

二、继承属性的特性

CSS 的某些属性具有继承性（inherited）：

如果一个属性具备继承性，那么再该元素上设置后，他的后代元素都可以继承这个属性；
如果后代元素自己设置了同样的属性，那么优先使用后代元素自己的属性（不管继承的权限有多高）

创建一个 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>
  <style>
    .box {
      color: red;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="container">我是container</div>
  </div>
</body>
</html>

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

可以看到 container 子元素继承了 box 父元素中设置的 color 属性，那么如果给 container 自己也设置一个颜色又会显示哪个颜色？

新增 CSS 选择器并设置 container 的颜色：

.container {
  color: greenyellow;
}

刷新页面，效果如下：

可以看到 container 的颜色变为设置的绿色，那么如果我们给 box 元素的颜色设置加上优先级最高的关键字 container 的颜色会变为红色吗？

给 .box 选择器增加优先级最高的关键字：

.box {
  color: red !important;
}

刷新页面，效果如下：

container 依然是绿色的，永远优先使用自己设置的颜色，不管有没有有继承。

CSS 中常见的 font-size/font-family/font-weight/line-height/color/text-align 都具有继承性。

Riemann Hypothesis

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML + CSS 连载 | 29 - HTML 列表今日头条

先完成 HTML 结构重置样式bodyaulli书写样式时先整体，后局部；从外往里，从上往下去除重复的 CSS 代码；将重复的逻辑放到一个单独的css中，如icon；不同的代码抽取到不同的class中如hotnewtopic。
复制链接

扫一扫

专栏目录