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

CSS综合案例——新闻详情

news 2026/2/2 14:43:25

一、知识点

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

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

编程新知 2025/7/23 3:55:49

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2026/1/31 23:44:39

css3笔记 （1） 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/10/11 5:18:43

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

编程新知 2026/1/31 20:11:37

Angular微前端架构：Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

编程新知 2025/12/3 10:52:37

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2026/1/25 9:03:19

基于Java+VUE+MariaDB实现（Web）仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...

编程新知 2026/1/31 4:37:40

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

编程新知 2025/9/18 20:16:52

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

编程新知 2026/1/20 11:55:46

【Linux手册】探秘系统世界：从用户交互到硬件底层的全链路工作之旅

目录 前言 操作系统与驱动程序 是什么&#xff0c;为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中&#xff0c;我们在使用电子设备时&#xff0c;我们所输入执行的每一条指令最终大多都会作用到硬件上&#xff0c;比如下载一款软件最终会下载到硬盘上&am…...

编程新知 2026/1/31 15:47:51