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

CSS综合案例——新闻详情

news 2026/2/10 2:57:09

一、知识点

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

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

编程新知 2026/2/8 6:37:38

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2026/2/1 5:24:17

CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

编程新知 2025/12/30 22:56:56

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

编程新知 2025/10/3 13:53:38

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

编程新知 2025/11/8 16:42:13

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

编程新知 2026/2/8 21:57:46

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2026/1/25 13:33:35

掌握 HTTP 请求：理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

编程新知 2025/7/9 20:52:19

Qwen系列之Qwen3解读：最强开源模型的细节拆解

文章目录 1.1分钟快览2.模型架构2.1.Dense模型2.2.MoE模型 3.预训练阶段3.1.数据3.2.训练3.3.评估 4.后训练阶段S1: 长链思维冷启动S2: 推理强化学习S3: 思考模式融合S4: 通用强化学习 5.全家桶中的小模型训练评估评估数据集评估细节评估效果弱智评估和民间Arena 分析展望 如果…...

编程新知 2026/2/5 4:23:21