CSS综合案例——新闻详情

一、知识点

1、文字颜色

属性名:color

属性值:

颜色表示方式属性值说明使用场景
颜色关键字颜色英文单词red,green,blue学习测试
rgb表示法rg(r,g,b)r,g,b表示红绿蓝三原色,取值0-255了解
rgba表示法rgba(r,g,b,a)a表示透明度,取值0-1开始使用,实现透明色
十六进制表示法#RRGGBB#0000,#ffcc00,简写#000,#fc0开始使用(从设计稿复制)

2、调试工具——谷歌浏览器

作用:检查、调试代码;帮助程序员发现代码问题、解决问题。

(1)打开调试工具

        ①浏览器窗口内任意位置/选中标签→鼠标右键→检查

        ②F12

(2)使用调试工具

注:调试工具的调节

①如果是错误的属性,有黄色感叹号;

②CSS属性的前面有多选框,如果勾选:这个属性生效;如果没有勾选:这个属性不生效。

二、综合案例

代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>新闻详情</title>

    <style>

        h1 {

            text-align: center;

            font-weight: 400;

            font-size: 30px;

            color: #333;

        }

       

        div {

            font-size: 14px;

            color: #999;

        }

       

        p {

            text-indent: 2em;

        }

       

        .pic {

            text-align: center;

        }

       

        .show {

            text-align: center;

            font-size: 1em;

            line-height: 32px;

        }

    </style>

</head>

<body>

    <h1>造出“泰坦尼克号”的百年船厂,悲情谢幕</h1>

    <div>曲蕃夫  2024-10-21 16:51:18</div>

    <p>9月,位于英国贝尔法斯特市的著名船舶制造商哈兰德-沃尔夫公司(Harland & Wolff)进入破产清算程序。 这家成立于1861年的传奇船厂,曾经代表着英国造船工业的顶尖水准。最为人熟知的代表作,莫过于1912年完工,又在处女航中触冰山沉没的豪华邮轮“泰坦尼克号”。如今,一个多世纪过去,“泰坦尼克号”的制造商哈兰德-沃尔夫终究也敌不过时代的锈蚀,不断挣扎后宣告破产。 在令世人唏嘘的背后,这家传奇船厂更为英国痛苦的去工业化转型过程留下一个新的注脚。 平民小伙的逆袭 哈兰德-沃尔夫公司,正如它的名字所示,是由英国商人爱德华·哈兰德和他的助手、德裔英国人古斯塔夫·沃尔夫创立。

        哈兰德的创业经历非常具有那个时代特有的传奇色彩。他出生于英格兰约克郡的一个平民家庭,做医生的父亲在看病之余,还对工程发明有浓厚的兴趣,并拥有一项蒸汽动力车的专利。在那个蒸汽工业风口的时代,老哈兰德与被后世称为“铁道之父”的史蒂芬孙成为好友。15岁初中毕业后,哈兰德就被父亲送进史蒂芬孙家族位于纽卡斯尔的火车工厂做学徒,从此和蒸汽动力工程结下了不解之缘。

    </p>

    <div class="pic"><img src="./图片1.png"></div>

    <div class="show"><span>左图:哈兰德。右图:沃尔夫。</span></div>

    <p>五年学徒工生涯结束后,哈兰德通过他叔叔的关系,结识了他此后的事业贵人、来自汉堡的德裔犹太商人施瓦贝。当时,施瓦贝投资了英国利物浦的毕比航运公司,哈兰德就在施瓦贝的安排下进入了造船行业工作。哈兰德先后在格拉斯哥和纽卡斯尔的两间船厂工作了三年,但是一直没有获得太多重视。据哈兰德回忆,作为船厂的首席制图师,当时自己的周薪只有1英镑。即便按照19世纪50年代的物价标准,这个薪水也只能紧紧巴巴地生活。</p>

    <p>1854年,施瓦贝再次鼓励哈兰德跳槽,前往北爱尔兰的贝尔法斯特市。这里的造船业刚刚起步,正需要大量的工程管理人员,年仅23岁的哈兰德很顺利地在当地一间小型船厂受聘为总经理。在他科学而严格的管理下,工人的工作效率和质量都得到了提升。据他当时的同事回忆,哈兰德严格禁止工人在岗位上抽烟斗,还经常拿着粉笔和象牙尺子在船坞里不知疲倦地来回巡视,以便发现错误及时标注。</p>

</body>

</html>

结果:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode_1281. 整数的各位积和之差_java

1、题目 1281. 整数的各位积和之差https://leetcode.cn/problems/subtract-the-product-and-sum-of-digits-of-an-integer/ 给你一个整数 n&#xff0c;请你帮忙计算并返回该整数「各位数字之积」与「各位数字之和」的差。 示例 1&#xff1a; 输入&#xff1a;n 234 输出…

laravel 增删改

文章目录 增改删事务控制 检测环境 laravel 的环境配置 安装两个插件 增 编写SQL插入语句 <?php namespace App\Http\Controllers;use Illuminate\Support\Facades\DB;// 命名空间 class Demo extends Controller{public function add(){// 插入一行数据DB::table(us…

国企干部民主测评系统如何选择?

国企干部民主测评系统&#xff0c;亦被广泛称为民主测评系统、民主评议系统或二维码测评/评价系统&#xff0c;是专为各类单位、部门及人员设计的测评工具&#xff0c;旨在替代繁琐的手工操作。该系统能够灵活设置测评指标、指标分值权重、测评对象及测评人员&#xff0c;极大地…

【Qt6聊天室项目】 主界面功能实现

1. 获取当前用户的个人信息 1.1 前后端逻辑分析&#xff08;主界面功能&#xff09; 主界面上所有的前后端交互逻辑相同&#xff0c;分析到加载会话列表后其余功能仅实现。 核心逻辑总结 异步请求-响应模型 客户端发起请求&#xff0c;向服务器发送包含会话ID的请求服务端处…

经纬恒润AUTOSAR成功适配芯钛科技Alioth TTA8车规级芯片

在汽车电子领域&#xff0c;功能安全扮演着守护者的角色&#xff0c;它确保了车辆在复杂多变的情况下保持稳定可靠的运行。随着汽车电子的复杂性增加&#xff0c;市场对产品功能安全的要求也日益提高。基于此背景&#xff0c;经纬恒润AUTOSAR基础软件产品INTEWORK-EAS-CP成功适…

10.22 软考初级网络管理员之局域网

局域网的基本概念&#xff0c;IE802标准 局域网是指将分散在一个局部地理范围的多台计算机通过传输媒体连接起来的通信网络。IEEE802&#xff0c;对应物理层和数据链路层 IE802标准 以太网技术&#xff08;局域网通信协议、数据传输方式&#xff09; 分值占比高 ‌‌以太网是…

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-23

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-23 目录 文章目录 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-23目录1. Advancements in Visual Language Models for Remote Sensing: Datasets, Capabilities, and Enhancement Techniques摘…

高效集成小满OKKICRM与金蝶K3-WISE的成功案例

小满客户>k3wise销售站点&#xff1a;高效数据集成案例分享 在企业信息化建设中&#xff0c;数据的高效流动和准确对接是实现业务流程优化的关键。本文将聚焦于一个具体的系统对接集成案例&#xff1a;如何将小满OKKICRM的数据无缝集成到金蝶K3-WISE系统中&#xff0c;实现…

【十六进制数转十进制数 】

【十六进制数转十进制数 】 C语言版本C 版本Java版本Python版本 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 从键盘接收一个十六进制数&#xff0c;编程实现将其转换成十进制数。 输入 输入一个十六进制数 输出 输出一个十进制数 样…

Xcode 格式化代码快捷键

例如这段代码没有左对齐,看起来很乱 格式化快捷键: 全选需要格式化的代码,Xcode 工具栏--> Editor --> Structure --> Re-indent

Vxe UI vue vxe-table 虚拟树表格的使用,流畅的渲染万级数据树结构表格

Vxe UI vue vxe-table 虚拟树表格的使用&#xff0c;流畅的渲染万级数据树结构表格 代码 普通树表格&#xff0c;一般存数据库里都是平级数据&#xff0c;vxe-table 的树渲染这就非常友好了&#xff0c;只有带有父子id关联的数组&#xff0c;就可以自动渲染树表格。 <te…

面试阿里、字节全都一面挂,被面试官说我的水平还不如应届生

测试员可以先在大厂镀金&#xff0c;以后去中小厂毫无压力&#xff0c;基本不会被卡&#xff0c;事实果真如此吗&#xff1f;但是在我身上却是给了我很大一巴掌... 所谓大厂镀金只是不卡简历而已&#xff0c;如果面试答得稀烂&#xff0c;人家根本不会要你。况且要不是大厂出来…

微调大模型-4-合并基座模型

合并模型 新建文件夹,默认参数,开始导出,但是发现报错: 报错显示磁盘空间不足,这是由于AutoDL云,当前默认空间用的是系统盘,空间只有30G。 参考:https://blog.csdn.net/lwd19981223/article/details/130740905/ 将合并路径存储到50个G的数据盘,数据库路径是autodl-t…

《Linux系统编程篇》fork函数——基础篇

文章目录 引言fork() 函数概述父子进程 fork函数fork() 的常见问题fork() 的优势与限制 结论 命为志存。 —— 朱熹 引言 《Linux系统编程篇》——基础篇首页传送门 本节我们正式进入Linux的进程代码编写。 fork() 是 Unix 系统中一个重要的系统调用&#xff0c;用于创建一个…

基于KU115+ZU19EG+C6678 的高性能6U VPX 载板

基于KU115ZU19EGC6678 的高性能6U VPX 载板&#xff0c;板载 2 个 HPC 形式的FMC 连接器&#xff08;用于外部信号扩展&#xff09;。板卡选用了 1 片Xilinx 公司的Kintex UltraScale 系列 FPGA 家族中的XCKU115-2FLVA1517I 和 1 片 Zynq UltraScale MPSoC 家族的XCZU19EG-2FFV…

USB Type-C 受电端取电快充协议芯片,支持PD+QC+FCP+SCP+AFC快充协议

前言 随着科技的飞速发展&#xff0c;电子设备对于快速充电的需求日益增加。为了满足这一需求&#xff0c;市场上涌现出了众多快充技术和产品。其中&#xff0c;XSP08Q诱骗取电芯片以其卓越的性能和广泛的应用场景&#xff0c;成为了快充领域的一颗璀璨明星。本文将对XSP08Q P…

Flutter Row组件实战案例

In this section, we’ll continue our exploration by combining the Row and Container widgets to create more complex layouts. Let’s dive in! 在本节中&#xff0c;我们将继续探索&#xff0c;结合“Row”和“Container”小部件来创建更复杂的布局。让我们开始吧! Sc…

CMake 生成器表达式介绍

【写在前面】 生成器表达式在构建系统生成期间进行评估&#xff0c;以生成特定于每个构建配置的信息。它们的形式为 $<...>。例如&#xff1a; target_include_directories(tgt PRIVATE /opt/include/$<CXX_COMPILER_ID>) 这将扩展为 “/opt/include/GNU”、“/opt…

李宇皓现身第十届“文荣奖”,allblack造型帅气绅士引关注

近日&#xff0c;第十届“文荣奖”在众人的期待中拉开帷幕&#xff0c;与众多影视奖项不同&#xff0c;“文荣奖”始终关注年轻群体需求&#xff0c;致力于发掘和扶植影视新人新作&#xff0c;为热爱影视行业的新人提供宝贵机会与激励。今年的文荣奖评委阵容十分强大&#xff0…

深度学习:SGD的缺点

首先看下述函数&#xff1a; 最小值为x0&#xff0c;y0处 先了解下它的梯度特征。了理解其梯度特征&#xff0c;我们需要计算其梯度向量。 梯度向量 ∇f 是函数 f 在每个变量方向上的偏导数组成的向量。具体来说&#xff1a; ∇f(∂f/∂x,∂f∂/y) 首先&#xff0c;我们计算 f …