案例要求：根据如下效果图完成复现任务一：
任务二：
案例代码实现：任务一代码如下：
<!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:hover {
color: red;
text-decoration: underline;
}
a {
font-weight: 700px;
font-size: 30px;
color: black;
text-decoration: none;
}
.text1 {
color: red;
font-weight: bolder;
font-size: 30px;
}
.text2 {
color: yellow;
font-weight: bolder;
font-size: 30px;
}
.text3 {
color: orange;
font-weight: bolder;
font-size: 30px;
}
.text4 {
color: black;
font-weight: bolder;
font-size: 30px;
}
.text5 {
color: black;
font-weight: bolder;
font-size: 30px;
}
.text6 {
color: black;
font-weight: bolder;
font-size: 30px;
}
.text7 {
color: black;
font-weight: bolder;
font-size: 30px;
}
.text8 {
color: black;
font-weight: bolder;
font-size: 30px;
}
</style>
</head>
<div><span class="text1">1 </span><a href="#">马斯克被曝要求女高管为其生孩子</a></div>
<div><span class="text2">2 </span><a href="#">王健林王思聪父子重回创富榜前十</a></div>
<div><span class="text3">3 </span><a href="#"> 中专女生爆冷拿下数学竞赛全球12名</a></div>
<div><span class="text4">4 </span><a href="#">刘亦菲发疯戏是即兴发挥</a></div>
<div><span class="text5">5 </span><a href="#">在博物馆里感受文化绵延生命力</a></div>
<div><span class="text6">6 </span><a href="#">已老实 光头求放过</a></div>
<div><span class="text7">7 </span><a href="#">黄焖鸡米饭为什么不香了</a></div>
<div><span class="text8">8 </span><a href="#">南宁赛龙舟翻船致人员伤亡系谣言</a></div>
<body>
</body>
</html>
任务二代码实现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>各种字体</title>
<style>
.text1 {
font-weight: bolder;
font-size: 30px;
color: yellow;
}
.text3 {
color: purple;
background-color: antiquewhite;
height: 100px;
width: 300px;
}
p3 {
color: green;
}
p4 {
font-weight: bolder;
font-size: 30px;
color: red;
}
p5 {
font-family: 楷体;
}
</style>
</head>
<body>
<ul>
<li>1. 每天告诉自己一次，『我真的很不错』 </li>
<li>2.生气是拿别人做错的事来惩罚自己 </li>
<li>3. 生活中若没有<span class="text1">朋友</span>，就像生活中没有阳光一样</li>
</ul>
<div class="text3">4. 明天的希望，让我们忘了今天的痛苦 </div>
<p>5. 生活若剥去了<span class="text1">理想</span>、梦想、幻想，那生命便只是一堆空架子 </p>
<p3>6.获致幸福的不二法门是珍视你所拥有的、遗忘你所没有的</p3>
<div>
<p4>7. 发光并非太阳的专利，你也可以发光</p4>
</div>
<div>
<p5>8. 获致幸福的不二法门是珍视你所拥有的、遗忘你所没有的 </p5>
</div>
<div>
<p5>9. 贪婪是最真实的贫穷，满足是最真实的财富</p5>
</div>
<div>
<p5>10. 你可以用爱得到全世界，你也可以用恨失去全世界</p5>
</div>
</body>
</html>
案例复刻思路：首先任务一思路并不是使用列表来实现，如果通过列表来写入会发现在后续过程中无法调整数字前缀，因此，我们应该选择使用span标签来包裹数字前缀，同时使用a标记来包裹调整热点内容，这是内部基本框架，整体大的结构框架是通过使用div盒子模型来包裹span、a两类标记，从而后续便于调整热点的下划线以及鼠标悬停显示。
5176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
