1、缘起

最近学习完了 CSS 的 引入方式、选择器 和 字体修饰属性 的相关知识点，然后运用所学过的知识点写了一个应用案例 - 体育新闻，以求巩固学习过的知识点和熟练使用这些知识点。是啊，知识只有在运用的时候才有用，其他时候没有任何用处。

2、示例代码

① main.css

/* 文本图片居中 */
.SetCenter{text-align: center;
}/* 文本缩进 */
.SetIndex{text-indent: 2em;
}/* 文本透明 */
div {font-size: 14px;color: rgba(0, 0, 0, 0.5);
}

② main.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>体育新闻详情</title><link rel="stylesheet" href="./main.css"></head><body><h1 class="SetCenter">大胜热火，掘金双星同砍三双，真他么无敌 ！！！</h1><div>来源：微信公众号 6 号篮球 | 2023-06-08 11:32</div><br><p class="SetIndex">总决赛 G3 ，今天热火主场迎战掘金，最终掘金 109 - 94 击败热火，大比分 2-1 领先。</p><!-- 第一张图片加载 --><div class="SetCenter"><img src="./photo1.jpg" alt="图片"></div><p class="SetIndex">全场比赛，约基奇上阵 43 分 44 秒，21 投 11 中，三分 2 中 1，罚球 8 中 7，高效砍下 32 分 21 篮板 10 助攻 2 盖帽，正负值+15 。谈到本场，约基奇说道：“老实说，意义不大。我高兴我们赢下了比赛，很重要。因为他们也刚在我们主场赢球。” </p><!-- 第二张图片加载 --><div class="SetCenter"><img src="./photo2.jpg" alt="图片"></div><p class="SetIndex">值得一提的是穆雷也砍下了三双，本场砍下 34 + 10 +10 ，穆雷也成为 NBA 历史第三位在总决赛中砍下 30+ 三双的后卫，另外两人是库里和杰里-韦斯特。掘金双星简直无敌 ！！</p><!-- 第三张图片加载 --><div class="SetCenter"><img src="./photo3.jpg" alt="图片"></div><p class="SetIndex">确实打配合的掘金太强了，一味单打不是掘金风格，团队配合才是，这么打就是无解的，历史级别巨星，观赏性太出众了。</p><!-- 第四张图片加载 --><div class="SetCenter"><img src="./photo4.jpg" alt="图片"></div><p class="SetIndex">下一场该怎么打？希罗该回来了吧 ！！！</p><!-- 第五张图片加载 --><div class="SetCenter"><img src="./photo5.jpg" alt="图片"></div></body>
</html>