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

news2024/11/8 18:47:59

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


目录

1、缘起

2、示例代码

3、总结


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> 专栏系列将持续更新 ,,,,,,

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/635922.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

redis(一),redis简介,Linux下安装及基本配置

一.redis简介&#xff1a; 1.什么是redis Redis 是完全开源的&#xff0c;遵守BSD协议&#xff0c;是一个高性能的 key-value 数据库。它属于NoSQL数据库。 2.NoSQL简介&#xff1a; NoSQL有两种说法&#xff0c;一般指的是非关系型数据库&#xff0c;另一种说法是说它是“…

xml parser - etree

import xml.etree.ElementTree as ET# https://docs.python.org/3/library/xml.etree.elementtree.html # https://zhuanlan.zhihu.com/p/502584681def main():tree ET.parse(./country_data.xml)# 获取根元素root tree.getroot()print("{} {}".format(type(root),…

chatgpt赋能python:Python3.7安装指南

Python 3.7 安装指南 Python是一种高级编程语言&#xff0c;被广泛应用于Web开发、数据科学、人工智能等领域。而最新版本的Python 3.7则提供了更加稳定、更加高效的开发环境。这篇文章将介绍如何在不同的操作系统中安装Python 3.7。 Windows系统安装 Python 3.7 在Windows系…

chatgpt赋能python:安装Platform模块——让Python更好用

安装Platform模块——让Python更好用 Python是一种跨平台的编程语言&#xff0c;可以在不同操作系统上使用。作为Python的一个标准模块&#xff0c;Platform模块可以帮助开发者轻松获取有关操作系统及其特征的信息。这篇文章将介绍如何安装Platform模块&#xff0c;并提供一些…

cxGrid自动保存当前单元格输入的数据

遇到的问题&#xff0c;利用cxGrid做数据录入界面&#xff0c;当用户在一个单元格中录入数据&#xff0c;没有回车&#xff0c;然后直接点工具条上的保存按钮&#xff0c;执行数据提交&#xff0c;结果当前输入的内容丢掉了&#xff0c;又回到输入前的值。 在群中求助&#xf…

axios实战进阶练习——基于 Vue3 + Node.js + ElementPlus 实现的联系人列表管理后台

文章目录 &#x1f4cb;前言&#x1f3af;demo 介绍&#x1f3af;后端与接口的调试&#x1f9e9;关于运行后端项目&#x1f9e9;关于接口的调试 &#x1f3af;功能分析&#x1f9e9;数据的展示与分页功能&#x1f9e9;添加功能&#x1f9e9;编辑功能&#x1f9e9;删除功能 &…

大话Stable-Diffusion-Webui-动手开发一个简单的stable-diffusion-webui(一)

文章目录 写在前面整体效果开发所需环境开发工具需要具备的知识Node安装更改npm包安装的目录设置npm镜像vscode安装创建vue项目代码编写项目先体验注意写在前面 stable-diffusion-webui(以下简称sd)项目通过FastAPI对外提供了一系列的api用于开发者二次开发或者集成到自己的…

真正理解微软Windows程序运行机制——窗口机制(第三部分)

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;今天说说Windows程序的运行机制。经常被问到MFC到底是一个什么技术&#xff0c;为了解释这个我之前还写过帖子&#xff0c;但是很多人还是不理解。其实这没什么&#xff0c;我在学生时代也被这个问题困绕过。…

帆软报表二次开发 树组件节点上添加自己的按钮

我这里的需求是在树组件的子节点上加一个复制按钮。 先看效果 这是一颗多选树,用的是bi.tree_value_chooser_pane 这个组件,这个组件默认支持多选,它默认的效果为: 这个组件没有提供机制来自定义节点的渲染。 通过查找源码发现这个组件内部构建树是通过BI.$.fn.zTree来构…

C语言进阶---数据的存储

1、整形存储和大小端 本章重点&#xff1a; 1、数据类型详细介绍 2、整型在内存中的存储&#xff1a;原码、反码、补码 3、大小端字节序介绍及判断 4、浮点型在内存中的存储解析 1.1、数据类型介绍 char 1byte //字符数据类型 short 2byte //…

【MyBatis】3、一文介绍如何用 MyBatis 进行多表级联查询

目录 一、设置新插入记录的主键&#xff08;id&#xff09;到参数对象中二、PageHelper 分页插件三、多表关系四、一对一五、一对多六、多对多 一、设置新插入记录的主键&#xff08;id&#xff09;到参数对象中 <insert id"insert01" parameterType"Studen…

【二叉树---堆】

二叉树---堆 一、树的概念及结构1. 树的概念2.树的相关概念3.树的表示 二、二叉树1.二叉树的概念2.特殊的二叉树3.二叉树的性质 三、堆1.堆的概念及结构2.堆的实现&#xff08;1&#xff09;函数的声明&#xff08;2&#xff09;函数的实现&#xff08;3&#xff09;测试堆的基…

chatgpt赋能python:Python多次运行的优势及方法

Python多次运行的优势及方法 随着Python在计算机领域的广泛应用&#xff0c;越来越多的企业和个人开始使用Python进行编程。在Python编程中&#xff0c;多次运行同一份代码不仅是常见的需求&#xff0c;而且有着众多的优势。 Python多次运行的优势 调试 在编程过程中&#…

chatgpt赋能python:Python安装EGG——一个简单的指南

Python安装EGG——一个简单的指南 如果你使用Python有一段时间了&#xff0c;你可能会遇到需要安装扩展包&#xff08;Package&#xff09;的情况。在Python中&#xff0c;这些扩展包的文件格式通常是.egg&#xff08;Easy Installable GZip&#xff09;。在本文中&#xff0c…

chatgpt赋能python:Python如何安装CSV模块

Python如何安装CSV模块 CSV是一种广泛使用的文件格式&#xff0c;用于存储表格数据。Python已经内置了CSV模块&#xff0c;可以轻松地读取和写入CSV文件。在这篇文章中&#xff0c;我们将关注如何安装CSV模块并开始与CSV文件进行交互。 什么是CSV&#xff1f; CSV是Comma Se…

chatgpt赋能python:如何安装pyecharts

如何安装pyecharts Pyecharts是一个基于echarts的数据可视化工具&#xff0c;它是Python语言的一个库&#xff0c;可以通过Python编程语言进行数据可视化&#xff0c;并且能通过交互式的方式展示出来。 在本文中&#xff0c;我们将介绍如何安装pyecharts&#xff0c;如果您是…

chatgpt赋能python:Python宏定义:编写高效、灵活和可维护的代码

Python宏定义&#xff1a;编写高效、灵活和可维护的代码 Python是一种非常流行的编程语言&#xff0c;它的简洁性、易读性以及灵活性使得它成为了众多开发者的首选。Python是一个强大的语言&#xff0c;它可以大大提高您的编程效率。Python的宏定义是一种非常有用的技巧&#…

【VB6|第18期】基于libxl导出Excel之导出失败的解决方案

日期&#xff1a;2023年6月12日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对的地方&#xf…

康耐视Visionpro-插入脚本的标准流程 _ 简单方式

机器视觉海康Visionmaster-字符缺失缺陷检测 支持脚本添加的工具如下&#xff1a;添加的脚本只针对当前工具容器有效 Step - 1 &#xff1a; 制作ToolBlock&#xff0c;添加输入/输出等 Step - 2 &#xff1a; 新建Script Step - 3 &#xff1a; 检查界面终端 Step - 4 &am…