CSS综合案例——新闻详情

news2024/11/28 12:43:53

一、知识点

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.coloradmin.cn/o/2222433.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

CVE-2024-36401 Geoserver远程代码执行漏洞复现

目录 CVE-2024-36401 Geoserver远程代码执行漏洞 影响版本 环境搭建 漏洞复现 poc GeoServer是一个用Java编写的开源软件服务器&#xff0c;允许用户共享和编辑地理空间数据。它为提供交互操作性而设计&#xff0c;使用开放标准发布来自任何主要空间数据源的数据。 CVE-20…

大模型日常:支持中英混合及多语言文生语音的MeloTTS本地部署

简要介绍 MeloTTS 是一个强大的多语言文本转语音库&#xff0c;特别设计以支持CPU环境下的实时语音合成&#xff0c;无需依赖GPU。该库能够输出自然流畅的语音&#xff0c;提供了一种高效便捷的方式&#xff0c;将文本信息转换为听觉内容。MeloTTS不仅支持多种语言&#xff0c…

Ubuntu20.04安装opencv3.1.0(包含详细解决报错方法)

我的环境是cuda10.1 cmake是3.16.5 第一步骤&#xff1a;下载安装包 第二步骤&#xff1a;编译环境安装 第三步骤&#xff1a;解压opencv安装包&#xff0c;并且在opencv文件夹内新建build文件夹 第四步骤&#xff1a;打开cmake-gui&#xff0c; 第五步骤&#xff1a;进行…

驱动-----内核启动

目录 一、最小系统 二.操作系统 三.操作系统的启动 四.linux启动准备工作 五.安装nfs和tftp环境 六.总结 设备驱动:驱使设备行动的程序。 裸机程序:没有和操作系统结合的驱动程序pwm.c,uart.c,adc.c 有操作系统的时候,应用层不能直接操作硬件,由底层写驱动的人写…

凹凸性和拐点的概念

二阶导不存在也可能是拐点 判断拐点的充分条件

第三十一篇:TCP协议如何解决丢包的问题,TCP系列六

前面我们说TCP协议是可靠的、基于字节流、面向连接的传输层通信协议&#xff1b; 这里我想换种说法&#xff1a;与其说是TCP协议是可靠的&#xff0c;不如说传输层程序软件实现了TCP协议的规范&#xff08;网络层次模型&#xff0c;每一层都有对应的程序软件&#xff09;&…

【从零开始的LeetCode-算法】3185. 构成整天的下标对数目 II

给你一个整数数组 hours&#xff0c;表示以 小时 为单位的时间&#xff0c;返回一个整数&#xff0c;表示满足 i < j 且 hours[i] hours[j] 构成 整天 的下标对 i, j 的数目。 整天 定义为时间持续时间是 24 小时的 整数倍 。 例如&#xff0c;1 天是 24 小时&#xff0c…

ApacheShiro反序列化 550 721漏洞

Apache Shiro是一个强大且易用的Java安全框架,执行身份验证、授权、密码和会话管理个漏洞被称为 Shiro550 是因为在Apache Shiro的GitHub问题跟踪器中&#xff0c;该漏洞最初被标记为第550个问题,721漏洞名称也是由此而来 Shiro-550 CVE-2016-4437 Shiro反序列化Docker复现 …

重学SpringBoot3-Spring WebFlux之HttpHandler和HttpServer

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ 重学SpringBoot3-Spring WebFlux之HttpHandler和HttpServer 1. 什么是响应式编程&#xff1f;2. Project Reactor 概述3. HttpHandler概述3.1 HttpHandler是什么3.2 Http…

Flink 1.18安装 及配置 postgres12 同步到mysql5.7(Flink sql 方式)

文章目录 1、参考2、flink 常见部署模式组合3、Standalone 安装3.1 单节点安装3.2 问题13.3 修改ui 端口3.4 使用ip访问 4 flink sql postgres --->mysql4.1 配置postgres 124.2 新建用户并赋权4.3. 发布表4.4 Flink sql4.5 Could not find any factory for identifier post…

落实“双碳”行动,深兰科技推动分子能源技术在AI硬件产品领域的应用及产业化进程

10月21日&#xff0c;上海气候周分子能研究中心(筹)成立仪式在上海环境能源交易所举行。仪式上&#xff0c;深兰科技践行“双碳”目标&#xff0c;与上海东八能源技术有限公司签署分子能源AI应用产业化合作协议。 根据协议&#xff0c;国际分子能量发电开拓者、上海气候周分子能…

Notepad++将搜索内容所在行选中,并进行复制等操作

背景 Notepad在非常多的数据行内容中&#xff0c;按照指定内容检索&#xff0c;并定位到具体行&#xff0c;而后对内容行的数据进行复制、剪切、删除等处理动作。 操作说明 检索并标记所在行 弹出搜索框&#xff1a;按下 Ctrl F。 输入查找字符串&#xff1a;在搜索框中输入要…

YOLOv11入门到入土使用教程(含结构图)

一、简介 YOLOv11是Ultralytics公司在之前的YOLO版本上推出的最新一代实时目标检测器&#xff0c;支持目标检测、追踪、实力分割、图像分类和姿态估计等任务。官方代码&#xff1a;ultralytics/ultralytics&#xff1a;ultralytics YOLO11 &#x1f680; (github.com)https://g…

【小洛的VLOG】Web 服务器高并发压力测试(Reactor模型测试)

目录 引言 工具介绍 环境介绍 测试结果 个人主页&#xff1a;东洛的克莱斯韦克-CSDN博客 引言 大部分的网络通信都是支持TCP/IP协议栈&#xff0c;为了保证通信的可靠性&#xff0c;客户端和服务端之间需要建立链接。服务端能并发处理多少个链接&#xff0c;平均每秒钟能处理…

QML----Webengineview点击网页上的下载没反应,下载文件

问题 使用webe加载网页时&#xff0c;点击下载页面会没有反应。原因就是它默认是关闭下载功能 解决 需要在profile里监听下载事件打开onDownloadRequested,当有下载时会触发这个信号,会获取到一个WebEngineDownloadItem这是下载的东西,查询它的一些相关参数,可以修改路径和开…

项目一:3-8译码器的设计与实现(FPGA)

本文以Altera公司生产的Cyclone IV系列的EP4CE15F17C8为主芯片的CRD500开发板作为项目的硬件实现平台&#xff0c;并以Quarter 18.1和ModelSim为开发工具和仿真工具。 目录 一、3-8译码器工作原理 二、设计步骤 1、创建工程文件夹和编辑设计文件 &#xff08;1&#xff09;…

(三)将PaddleOCR编译成dll通过Java调用实现ocr识别

说明&#xff1a; 本文编译的PaddleOCR版本&#xff1a;v2.8.1&#xff0c;关于windows下如何生成c项目及如何编译PaddleOCR请参照我的上一篇文章《&#xff08;二&#xff09;Windows通过vs c编译PaddleOCR-2.8.1-CSDN博客》&#xff0c;本文是上一个篇文章的延伸。 背景&…

douyin uid转sec_uid 各种进行转换

第一步输入uid&#xff1a; 进行转换&#xff1a; 同时支持接口转换&#xff0c;批量转换&#xff0c;是一个很实用的工具 uid转sec_uid

微信小程序上传图片添加水印

微信小程序使用wx.chooseMedia拍摄或从手机相册中选择图片并添加水印&#xff0c; 代码如下&#xff1a; // WXML代码&#xff1a;<canvas canvas-id"watermarkCanvas" style"width: {{canvasWidth}}px; height: {{canvasHeight}}px;"></canvas&…

如何使用 Spring Cloud 实现客户端负载平衡

微服务系统通常运行每个服务的多个实例。这是实施弹性所必需的。因此&#xff0c;在这些实例之间分配负载非常重要。执行此操作的组件是负载均衡器。Spring 提供了一个 Spring Cloud Load Balancer 库。在本文中&#xff0c;您将学习如何使用它在 Spring Boot 项目中实现客户端…