【前端 - CSS】第 13 课 - CSS 应用案例 - 体育新闻

欢迎来到博主 Apeiron 的博客，祝您旅程愉快！时止则止，时行则行。动静不失其时，其道光明。

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>

3、总结

本期的分享总结就到这里了，如果有疑问的小伙伴儿，我们在评论区交流嗷~~~，笔者必回，我们下期再见啦！！

<前端 - CSS> 专栏系列将持续更新，，，，，，

【前端 - CSS】第 13 课 - CSS 应用案例 - 体育新闻

1、缘起

2、示例代码

3、总结

猜你喜欢