预览效果
<!--
* @Author: OriginalCoder
* @Date: 2020-10-08 21:59:28
* @version:
* @LastEditTime: 2020-10-08 22:19:36
* @LastEditors: OriginalCoder
* @Description:
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>腾讯新闻</title>
<style>
a {
color: #000;
text-decoration: none;
}
.box {
margin: 0 auto;
width: 440px;
height: 300px;
}
.text {
line-height: 20px;
}
.other {
/* line-height: 35px; */
padding-top: 15px;
}
.line {
padding: 0 5px;
color: #e9e9e9;
}
</style>
</head>
<body>
<div class="box">
<a href="#">
<p class="text">今日话题</p>
</a>
<div class="news-list">
<a href="#">
<strong>"中国妈妈"如何引导城市阅读</strong>
</a>
<div class="other">
<a href="#">
<strong>央视新闻</strong>
<span class="line">|</span>
<span>秋天的第一杯奶茶,救我一命</span>
</a>
</div>
<div class="other">
<a href="#">
<strong>侠客岛</strong>
<span class="line">|</span>
<span>《姜子牙》的败笔在哪里?</span>
</a>
</div>
<div class="other">
<a href="#">
<strong>澎湃新闻</strong>
<span class="line">|</span>
<span>数字货币或是终极战场,各国正如何“备战”</span>
</a>
</div>
<div class="other">
<a href="#">
<strong>棱镜</strong>
<span class="line">|</span>
<span>去戈壁“拷问自己”的中年企业家</span>
</a>
</div>
<div class="other">
<a href="#">
<strong>较真</strong>
<span class="line">|</span>
<span>爱吃豆制品老了会痴呆?别被网文带节奏</span>
</a>
</div>
</div>
</div>
</body>
</html>