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

CSS综合案例——新闻详情

news 文章来源：https://blog.csdn.net/k_k_kkh/article/details/143203080 2025/4/11 9:05:31

一、知识点

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

QT SSDP 局域网检测支持扫描通信

一. 什么是SSDP？ 简单服务发现协议（SSDP，Simple Service Discovery Protocol）是一种应用层协议，简单服务发现协议是在HTTPU和HTTPMU的基础上实现的协议。简单服务发现协议(SSDP)提供了在局域网里面发现设备的机制。客户端可以通过使用SSDP，根据自己的需要，在局域网查找特…...

编程日记 2024/10/25 21:33:03

python_学习2（仅为本人学习记录）

二、变量与字符串 1、变量的声明和赋值 a.变量在使用前必须要先赋值 b.删除变量&#xff0c;可以通过del语句删除。 a123 del a c.链式赋值 xy123 相当于 x123;y123 d.解包赋值 a,b,c1,2,3 相当于 a1 b2 c3 使用解包赋值给变量交换值&#xff1a;a,b3,4 a,bb,a 2、基本…...

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

手动将python的flask程序打包成exe在windows上执行

1、安装pyinstaller工具 (venv) PS D:\django\locallibrary> pip install pyinstaller Collecting pyinstallerDownloading pyinstaller-6.11.0-py3-none-win_amd64.whl.metadata (8.4 kB) Requirement already satisfied: setuptools>42.0.0 in d:\django\locallibrary…...

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

老生常谈，MySQL事务隔离级别

在 MySQL 关系型数据库中&#xff0c;事务隔离级别主要有以下四种&#xff1a; 1&#xff09;读未提交&#xff08;READ UNCOMMITTED&#xff09;&#xff1a; 这是最低的隔离级别&#xff0c;在该级别下&#xff0c;一个事务可以看到另一个事务尚未提交的数据修改。这可能会…...

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

百度翻译以及另外三款翻译工具推荐！！！

在这个全球化的时代&#xff0c;翻译工具已经成为我们生活中不可或缺的一部分。我们需要使用翻译工具来克服语言障碍&#xff0c;无论是出国旅行、商务谈判还是学术研究。那么&#xff0c;市场上有各种各样的翻译工具。有哪些好用的在线翻译软件呢&#xff1f;别担心&#xff0…...

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

Redis JSON介绍和命令大全

Redis JSON介绍和命令大全 Redis JSON先说说JSON是什么再说说JSON Path先推荐两个网站JSONPath JAVA clents Redis JSON 安装内存json命令语法命令url命令解释JSON.ARRAPPENDJSON.ARRINDEXJSON.ARRINSERTJSON.ARRLENJSON.ARRPOPJSON.ARRTRIMJSON.CLEARJSON.DEBUG MEMORYJSON.DE…...

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

yolo自动化项目实例解析（八）自建UI-键鼠录制回放

项目中关于键鼠的操作&#xff0c;不像我们之前自动化那样一步一步去定义的&#xff0c;而是用C写了一个记录键鼠的操作&#xff0c;通过回放的方法来实现的 一、通讯系统 1、创建websocket服务器 首先通过事件循环asyncio 和websockets&#xff0c;创建一个持久化的服务端进程…...

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

C++ 面向对象知识汇总(超详细)

学习交流&#xff1a;0voice GitHub 1.什么是类&#xff1f; 在C中&#xff0c;类&#xff08;Class&#xff09; 是一种用户定义的数据类型&#xff0c;用来描述具有相同特征和行为的一组对象。类是面向对象编程&#xff08;OOP&#xff09;的核心概念&#xff0c;它通过将…...

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

stm32使用SIM900A模块实现MQTT对接远程服务器

SIM900A模块是一种GSM/GPRS无线通信模块，它可以通过SIM卡连接移动通信网络，并通过串口或USB接口与微控制器或计算机进行通信。 SIM900A驱动代码如下： #include "stm32f10x.h" #include "stdio.h" #include "stdlib.h" #include "sim900a…...

编程日记 2024/10/25 21:18:49

MATLAB Simulink （一）直接序列扩频通信系统

MATLAB & Simulink &#xff08;一&#xff09;直接序列扩频通信系统 写在前面1 系统原理1.1 扩频通信系统理论基础1.1.1 基本原理1.1.2 扩频通信系统处理增益和干扰容限1.1.3 各种干扰模式下抗干扰性能 1.2 直接序列扩频通信系统理论基础1.2.1 基本原理1.2.2 物理模型 2 方…...

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