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

CSS综合案例——新闻详情

news 2025/9/14 14:52:08

一、知识点

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

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2025/9/13 15:40:26

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

编程新知 2025/9/14 10:14:39

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

编程新知 2025/9/2 16:59:49

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2025/9/10 23:16:27

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

编程新知 2025/9/7 19:10:42

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

编程新知 2025/8/29 0:20:47

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

编程新知 2025/9/4 1:57:51

排序算法总结（C++）

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

编程新知 2025/9/14 0:25:25

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

编程新知 2025/8/8 2:00:22

解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

编程新知 2025/7/12 13:46:11