CSS综合案例——新闻详情

一、知识点

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>

结果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/456121.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 自定义 Dialog 实现列表 单选,多选,搜索

前言 在Android开发中&#xff0c;通过对话框让用户选择&#xff0c;筛选信息是很方便也很常见的操作。本文详细介绍了如何使用自定义 Dialog、RecyclerView 以及自定义搜索框 来实现选中状态和用户交互&#xff0c;文中大本分代码都有明确注释&#xff0c;主打一个简单明了&a…

JS | 如何使用 JavaScript 实现图片懒加载的淡入效果?

在现代的网页设计中&#xff0c;为了提高用户体验和网站性能&#xff0c;图片懒加载已经成为一个常见的技术。图片懒加载可以减少初始加载时间&#xff0c;延迟加载图片直到用户滚动到它们所在的位置。另外&#xff0c;为了进一步提升用户体验&#xff0c;添加淡入效果可以使页…

【忍无可忍,无需再忍】永久解决xshell or xftp 更新问题

1 背景介绍 提示“要继续使用此程序,您必须应用最新的更新或使用新版本”&#xff0c;笔者版本是xshell 6 距离一段时间不使用&#xff0c;或者遇到更新场景&#xff0c;总是会弹出这个框&#xff0c;实在是忍无可忍&#xff0c;无需再忍。 2 思路介绍 笔者上一篇关于如何解…

学习的内核,如何更好的学习呢?

文章目录 三步学习法起因&#xff1a;三步学习法是什么&#xff1f;三步学习法为什么&#xff1f;我自己的实例 三步学习法应该怎么办&#xff1f;总结&#xff1a; 三步学习法 起因&#xff1a; 今天在学习黑马的java设计模式&#xff0c;我会觉得我的学习进度很慢&#xff0…

MAVlink协议 部分通用消息集解析

文章目录 MAVLink是一种非常轻量级的消息传输协议, 用于地面控制终端&#xff08;地面站&#xff09;与无人机之间 (以及机载无人机组件之间) 进行通信&#xff0c; 为一种设计用于资源受限系统及带宽受限链路的二进制遥测协议。 HEARTBEAT 检测信号消息显示系统或组件存在并正…

【32】C++流

C流 IO: 向设备输入数据和输出数据 C的IO流 设备: 文件控制台特定的数据类型(stringstream) c中,必须通过特定的已经定义好的类, 来处理IO(输入输出) 读写文件&#xff1a;文件流 文件流: 对文件进行读写操作 头文件: <fstream> 类库: ifstream 对文件输入&am…

C#基础知识-枚举

目录 枚举 1.分类 1.1普通枚举 1&#xff09;默认情况 2&#xff09;指定起始值 1.2标志枚举&#xff08;Flag Enum&#xff09; 位运算符与标志枚举 1&#xff09;组合标志 2&#xff09;检查标志 2.枚举与不同类型之间的转换 1&#xff09;枚举->整型 2&#…

深度学习调参大法

目录 trick 1&#xff1a;深度学习调参核心点trick 2&#xff1a;关于 深度学习Model选型问题trick 3&#xff1a;关于数据trick 4&#xff1a;关于调参 4.1 关于 Loss function 调参策略4.2 关于 Learning rate 和 batch size 调参策略4.3 关于 Epoch number 和 early stoppi…

数据结构模板代码合集(不完整)

P3368 【模板】树状数组 2 #include <bits/stdc.h> using namespace std; const int maxn 5e5 7;int n, m, s, t; int ans; int a[maxn]; struct node{int l, r;int num; }tr[maxn * 4];void build(int p, int l, int r){tr[p] {l, r, 0};if(l r){tr[p].num a[l];r…

TCP全连接队列与 tcpdump 抓包

&#x1f351;个人主页&#xff1a;Jupiter. &#x1f680; 所属专栏&#xff1a;计算机网络高效通关之路 欢迎大家点赞收藏评论&#x1f60a; 目录 listen第二个参数详解 全连接队列与半连接队列半开放连接队列&#xff08;SYN队列&#xff09;全连接队列&#xff08;接受队列…

【MySQL】C语言连接MySQL数据库3——事务操作和错误处理API

目录 1.MySQL事务处理机制 1.1.autocommit 1.2.autocommit的设置与查看 1.3.使用示例 2.事务操作API 2.1.设置事务提交模式——mysql_autocommit() 2.2.提交事务——mysql_commit() 2.3.事务回滚——mysql_rollback() 3.错误处理的API 3.1.返回错误的描述——mysql_er…

15.6 JDBC数据库编程6——可滚动和可更新的ResultSet

目录 15.6 引言 15.6.1 可滚动的ResultSet 15.6.1 可更新的ResultSet 15.6 引言 可滚动的ResultSet是指在结果集对象上不但可以向前访问结果集中的记录&#xff0c;还可以向后访问结果集中记录。可更新的ResultSet是指不但可以访问结果集中的记录&#xff0c;还可以更新…

关于移动硬盘复制文件0x80071AC3错误解决方法

一、问题详情 新入手的西部数据移动硬盘在复制文件到手机是没有问题的&#xff0c;但是在电脑复制文件的时候&#xff0c;电脑弹出0x80071AC3错误&#xff0c;没办法复制文件&#xff0c;也没办法新建文件夹。 二、原因 因为卷有问题&#xff0c;请运行chkdsk并重试。 三、解…

使用Vue.js构建响应式Web应用

&#x1f496; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4bb; Gitee主页&#xff1a;瑕疵的gitee主页 &#x1f680; 文章专栏&#xff1a;《热点资讯》 使用Vue.js构建响应式Web应用 1 引言 2 Vue.js简介 3 安装Vue CLI 4 创建Vue项目 5 设计应用结构 6 创建组件 7 使用…

SLAM|1. 相机投影及相机畸变

一个能思考的人&#xff0c;才真是一个力量无边的人。——巴尔扎克 本章主要内容&#xff1a; 1.针孔相机模型 2.相机成像的几个坐标系图像 3.畸变及相机标定 本节主要介绍在照相机拍摄过程中&#xff0c;现实物体如何跟照片上的像素关联起来&#xff0c;具体涉及相机成像的物…

LabVIEW换流变换器智能巡检系统

基于LabVIEW的换流变换器智能巡检系统通过自动化检测和数据分析&#xff0c;提高换流变换器的运行效率和可靠性&#xff0c;降低人工维护成本。 项目背景&#xff1a; 换流变压器作为电力系统的重要组成部分&#xff0c;其性能的可靠性直接影响到整个电网的稳定运行。然而&…

Spring Boot:植物健康的智能守护者

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…

Python基于amazon/chronos-t5-base的预训练模型离线对时间系列数据的未来进行预测

Python基于预训练模型对时间系列数据的未来进行预测 导入库 %matplotlib inline import matplotlib.pyplot as plt import numpy as np import pandas as pd import torch from chronos import ChronosPipeline from tqdm.auto import tqdm from autogluon.timeseries import…

【Java】使用iText依赖生成PDF文件

文章目录 使用iText实现PDF文件生成1. 需求2 . 添加依赖3. 核心4. 实战案例&#xff1a;生成录用通知书4.1 整体架构4.2 初始化PDF文档4.3 配置中文字体4.4 添加背景图片4.5 添加文本内容4.6 处理文档生成 5. 关键技巧与注意事项5.1 字体处理5.2 图片处理5.3 布局控制5.4 异常处…

探索人工智能在自然语言处理中的应用

探索人工智能在自然语言处理中的应用 前言1. 机器翻译2. 情感分析3. 智能客服4. 文本生成未来展望 结语 前言 在信息爆炸的时代&#xff0c;自然语言处理&#xff08;NLP&#xff09;作为人工智能&#xff08;AI&#xff09;的一个重要分支&#xff0c;正以前所未有的速度改变着…