首页 > 编程札记 > 编程

练习：网易新闻列表

阅读：评论：0

练习：网易新闻列表

练习：网易新闻列表，用到了两个关键知识点，一个是行内块元素（inline-block），另一个是伪元素（::before），练习源文件下面有链接。

前言

该练习的结构看个人习惯，不仅限于下面的，主要注意下面的两种颜色边框重叠，还有通过伪元素设置列表标记的样式。

一、练习

1、效果图：

2、文件目录：

二、效果实现

1、源码：

1_index.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>body {font-family: "Microsoft YaHei", 微软雅黑, 寰蒋闆呴粦, 瀹嬩綋, sans-serif;}a {text-decoration: none;}.news-wrapper {width: 300px;margin: 50px auto;background-color: #ffffff;}.box-title {height: 42px;border-top: 1px #dddddd solid;line-height: 40px;}/* 通过该样式使h2上移，盖住上边款 */.news-title {           display: inline;padding-top: 9px;border-top: 1px #f34540 solid;}.news-title a {color: #404040;font-weight: bold;}.news-img {height: 150px;margin-top: 4px;}.news-img .img-title {/* 设置图片的文字效果 */margin-top: -30px;color: #ffffff;font-weight: bold;padding-left: 30px;}.news-list {margin-top: 10px;}.news-list li {float: left;font-size: 14px;height: 30px;line-height: 30px;}/* 通过伪元素设置li标签前面的列表标记 */.news-list li::before {          content: '■';color: #dddddd;font-size: 1px;margin-right: 6px;display: block;float: left;}.news-list li a {font-size: 14px;color: #666666;}.news-list li a:hover {color: #c81623;}</style>
</head><body><!-- 设置一个新闻列表的外部容器 --><div class="news-wrapper"><!-- 标题容器 --><div class="box-title"><h2 class="news-title"><a href="javascript:;">体育</a></h2></div><div class="news-img"><a href="javascript:;"><img src="./images/图片.webp" alt="3-2逆转！拜仁赢下德国国家德比"><h3 class="img-title">3-2逆转！拜仁赢下德国国家德比</h3></a></div><ul class="news-list"><li><a href="javascript:;">重生的“东阳魔女”</a></li><li><a href="javascript:;">为了踢球拒绝哈佛的英超“学霸”</a></li><li><a href="javascript:;">吴刚有多强，拿他怎么办？</a></li><li><a href="javascript:;">这个综艺咖，在CBA竟能混下去？</a></li></ul></div>
</body></html>

2、运行效果：

总结

上面就是网易新闻列表的实现，还要注意几点：
1、在这我们无法像往常一样通过设置margin值来使h2的上边框与div的上边框重合，所以引用了行内块元素（inline-block），使h2能通过margin上移，达到两个边框重合。
2、列表中li标签前面的标记，我们可以通过::before伪元素来代替list-style对li标签前面的标记更仔细的设置样式，再使伪元素成为块元素，接着使用float使其与li标签对齐。

下载链接

本文发布于:2024-02-02 12:58:28，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170684990843955.html

上一篇：IOS 类似于网易新闻首页新闻轮播的组件

下一篇：iOS 仿网易新闻结构

标签：网易新闻列表

留言与评论（共有 0 条评论）