当前位置： 首页 > news >正文

CSS综合案例——新闻详情

news 2025/7/8 0:07:51

一、知识点

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>

结果：

相关文章：

CSS综合案例——新闻详情

一、知识点 1、文字颜色 属性名&#xff1a;color 属性值&#xff1a; 颜色表示方式属性值说明使用场景颜色关键字颜色英文单词red,green,blue学习测试rgb表示法rg(r,g,b)r,g,b表示红绿蓝三原色&#xff0c;取值0-255了解rgba表示法rgba(r,g,b,a)a表示透明度&#xff0c;取…...

编程日记 2024/10/25 22:03:39

【【自动驾驶】车辆运动学模型】

【自动驾驶】车辆运动学模型 1. 引言2. 以车辆重心为中心的单车模型2.1 模型介绍2.2 滑移角 β \beta β 的推导2.2 航向角 ψ \psi ψ推导过程&#xff1a;2.3 滑移角 β \beta β2.3 Python代码实现2.4 C代码实现 3. 前轮驱动的单车模型3.1 模型介绍3.3 Python代码实现3.4 …...

编程日记 2024/10/25 22:02:38

叉尖避障新科技：因泰立科技ILS-T52三维深度成像激光雷达

ILS-T52三维深度成像激光雷达是一款高性能的纯固态式激光雷达&#xff0c;采用激光时间飞行法&#xff0c;提供出色的三维图像成像和深度感知功能。特别适用于无人叉车领域&#xff0c;为叉尖避障提供卓越的三维成像和深度感知功能。它的高精度、自适应自动曝光、小尺寸、低功耗…...

编程日记 2024/10/25 22:01:37

精华帖分享 | 低估值还能涨多久？

本文来源于量化小论坛策略分享会板块精华帖&#xff0c;作者为亮子&#xff0c;发布于2024年3月19日。 这两年&#xff0c;A股给我们的感觉就是成长股坍塌&#xff0c;高股息低估值的股票扛起大旗。表现出来就是中国神华、中海油这样的垄断型央国企大涨&#xff0c;包括移动联通…...

编程日记 2024/10/25 21:59:32

如何制作一个自己的网站？

在今天的互联网时代&#xff0c;网站展示已经是一个很基础的营销工具。不管是企业、还是个人&#xff0c;如何制作一个自己的网站&#xff1f;本文将会提供一个全面的基础制作网页教程&#xff0c;教你如何从零开始制作网页。 网页制作的基础知识&#xff1a;HTML、CSS和JavaS…...

编程日记 2024/10/25 21:57:30

torch报错

The Kernel crashed while executing code in the current cell or a previous cell. Please review the code in the cell(s) to identify a possible cause of the failure. Click here for more info. View Jupyter log for further details. 从日志中可以看出&#xff0c;内…...

编程日记 2024/10/25 21:56:29

深入探索卷积神经网络（CNN）：图像分类的利器

深入探索卷积神经网络&#xff08;CNN&#xff09;&#xff1a;图像分类的利器 前言CNN的崛起&#xff1a;为何我们需要它&#xff1f;图像卷积&#xff1a;CNN的基石轮廓过滤器&#xff1a;捕捉边缘特征 图像池化&#xff1a;降低维度的利器CNN的组成&#xff1a;卷积层、池化…...

编程日记 2024/10/25 21:55:28

网站建设中需要注意哪些安全问题？----雷池社区版

服务器与应用安全指南 1. 服务器安全 1.1 操作系统安全 及时更新补丁&#xff1a;确保操作系统始终安装最新补丁&#xff0c;以防范系统漏洞。例如&#xff0c;Windows Server 定期推送安全更新&#xff0c;修复如远程代码执行等潜在威胁。优化系统服务配置&#xff1a;关闭不…...

编程日记 2024/10/25 21:54:27

光控资本：养老金融建设提速 高速铜缆市场空间广阔

养老金融制作提速 金融监管总局办公厅近来印发的《关于大力展开商业保险年金有关事项的奉告》&#xff08;下称《奉告》&#xff09;提出&#xff0c;进一步扩大商业养老金业务试点&#xff1b;开发习惯个人养老金准则的新产品和专属产品&#xff1b;保险公司要坚持长期出资、…...

编程日记 2024/10/25 21:52:25

部署前后端分离若依项目--CentOS7宝塔版

准备&#xff1a; CentOS7服务器一台 通过网盘分享的文件&#xff1a;CentOS 7 h 链接: https://pan.baidu.com/s/17DF8eRSSDuj9VeqselGa_Q 提取码: s7x4 大家有需要可以下载这个&#xff0c;密码61 若依前端编译后文件 通过网盘分享的文件&#xff1a;ruoyi-admin.jar 链…...

编程日记 2024/10/25 21:51:23

ubuntu22.04 R Rstudio conda python 深大

一、配置IP network:version: 2renderer: networkdethernets:eth0:dhcp4: noaddresses:- 172.20.0.52/24gateway4: 172.20.0.2nameservers:addresses: [8.8.8.8, 8.8.4.4] 二、update apt update apt upgrade 三、安装python ubuntu 22.04安装python3 在Ubuntu 22.04上安装…...

编程日记 2024/10/25 21:50:21

二百七十一、Kettle——ClickHouse增量导入数据清洗记录表

一、目的 在完成错误数据表任务后&#xff0c;需要对每条错误数据的错误字段及其字段值进行分析 Hive中原有SQL语句和ClickHouse现有SQL语句很大不同 二、Hive中原有代码 2.1 表结构 --31、静态排队数据清洗记录表 create table if not exists hurys_db.dwd_data_clean_…...

编程日记 2024/10/25 21:48:20

为什么说Tcp是面向字节流的以及（Tcp粘包问题、TCP/UDP对比、listen函数的backlog参数的意义）

为什么说Tcp是面向字节流的&#xff1a; Tcp通信的本质是创建一个tcp的socket&#xff0c;同时就会对应的创建一个发送缓冲区和接收缓冲区。 调用write时, 数据会先写入发送缓冲区中;如果发送的字节数太长, 会被拆分成多个TCP的数据包发出如果发送的字节数太短, 就会先在缓冲…...

编程日记 2024/10/25 21:47:16

Flink PostgreSQL CDC源码解读：深入理解数据流同步

目录 一、PostgreSQL的数据捕获和复制机制 二、WAL日志格式 三、Debezium部署架构 3.1 Kafka Connect With Debezium 3.2 Debezium Server ​编辑3.3 作为嵌入式引擎 四、Flink Postgres CDC源码解读 4.1. 如何捕捉数据和更新快照 4.2. 捕获的数据怎么从Postgres SQL…...

编程日记 2024/10/25 21:45:14

系统架构设计师 软件架构的定义与生命周期

软件架构的定义 通过一系列的设计活动&#xff0c;以满足系统的功能性需求和符合一定的非功能性需求与质量属性有相似含义的软件系统框架模式。在软件体系结构设计过程中&#xff0c;主要考虑的是系统的非功能性需求 软件体系结构设计经验的总结与重用是软件工程的重要目标之一…...

编程日记 2024/10/25 21:44:13

从零开始使用Surya-OCR最新版本0.6.1——最强文本检测模型：新添表单表格检测识别

目录 一、更新概述 二、环境安装 1.基础环境配置 2.模型参数下载 3.参数地址配置——settings.py 三、指令使用 1.命令指令运行 一、更新概述 surya项目Github地址&#xff1a;https://github.com/VikParuchuri/surya 号称今年最强OCR的surya近期迎来新的更新&#xff0c;Vik…...

编程日记 2024/10/25 21:43:11

linux中级wed服务器（https搭建加密服务器）

一。非对称加密算法&#xff1a; 公钥&#xff1a;公共密钥&#xff0c;开放 私钥&#xff1a;私有密钥&#xff0c;保密 1.发送方用自己的公钥加密&#xff0c;接受方用发送方的私钥解密&#xff1a;不可行 2.发送方用接受方的公钥加密&#xff0c;接受方用自己的私钥解密…...

编程日记 2024/10/25 21:41:10

聊一聊为什么企业数字化转型总是三天热度

听到“数字化转型”&#xff0c;是不是脑子里立马蹦出各种炫酷词汇&#xff1a;AI、大数据、物联网、区块链……瞬间觉得公司马上就要起飞&#xff1f;可惜&#xff0c;现实往往是&#xff1a;转型刚刚起步时大家热血沸腾&#xff0c;结果没过多久一哄而散。最终&#xff0c;这…...

编程日记 2024/10/25 21:40:09

2025年NPDP产品经理认证考试时间和报考条件

在报考2025年NPDP认证考试前&#xff0c;了解NPDP相关考试信息是非常重要的,可以帮助我们更好地制定备考计划&#xff0c;提高学习效率。 NPDP考试时间 NPDP考试每年举办两次&#xff0c;分别在5月和11月进行&#xff0c;且考试一般安排在周末&#xff0c;以便在职的专业人士…...

编程日记 2024/10/25 21:37:07

微信小程序文字转语音播报案例

插件申请 在小程序官方申请同声传译插件&#xff0c;地址&#xff1a; mp.weixin.qq.com 引入插件 在app.json中加入 "plugins": {"WechatSI": {"version": "0.3.6","provider": "wx069ba97219f66d99"}},封装…...

编程日记 2024/10/25 21:34:04

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/6/21 14:52:47

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2025/7/6 4:31:41

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/6/15 6:20:40

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/7/5 1:06:55

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

编程新知 2025/7/7 0:36:32

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/7/7 20:02:31

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/7/3 9:50:42

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/7/7 19:55:16

Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

编程新知 2025/6/22 8:50:50

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2025/6/17 12:13:20