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.mzph.cn/diannao/57483.shtml

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

相关文章

C#WPF的App.xaml启动第一个窗体的3种方式

WPF的App.xaml启动第一个窗体的3种方式 1.使用App.xaml的StartupUri属性启动&#xff08;推荐使用&#xff09; 在App.xaml文件中&#xff0c;你可以设置StartupUri属性来指定启动时显示的第一个窗口&#xff1a; <Application x:Class"浅看一眼WPF.App"xmlns&…

sed工具的基本使用

文章目录 sed工具介绍什么是sed工具&#xff0c;有什么用sed命令执行流程sed是按行读取文件的每当读取一行内容&#xff0c;都会进行一次判断&#xff0c;判断是否是想要的行默认不实质改变文件内容&#xff0c;仅临时输出给用户看&#xff08;除非加-i选项&#xff09;例1 例2…

1024 程序员节:代码铸就的科技传奇,节日快乐

一、1024 程序员节的起源与发展 国际程序员节起源于俄罗斯&#xff0c;其设立的日期是每年的第 256 天&#xff0c;平年为 9 月 13 日&#xff0c;闰年为 9 月 12 日。256 这个数字对程序员来说意义非凡&#xff0c;1 个字节等于 8 位元&#xff0c;最多能表示 256 个数值&…

[LeetCode] 230. 二叉搜索树中第K小的元素

题目描述&#xff1a; 给定一个二叉搜索树的根节点 root &#xff0c;和一个整数 k &#xff0c;请你设计一个算法查找其中第 k 小的元素&#xff08;从 1 开始计数&#xff09;。 示例 1&#xff1a; 输入&#xff1a;root [3,1,4,null,2], k 1 输出&#xff1a;1示例 2&am…

河源市社保卡照片要求及手机自拍拿数码相片回执的方法

河源市的居民在申请或更新社保卡时&#xff0c;需要提交一张符合特定要求的照片。如果您需要更新或申请社保卡&#xff0c;本文将为您详细介绍河源市社保卡照片的规格要求&#xff0c;并指导您如何通过手机自拍获取符合标准的社保卡照片及回执。 根据河源市社保局的指南&#x…

jconsole或者jvisual连接服务器Java进程

java -Djava.rmi.server.hostname你的ip-Dcom.sun.management.jmxremote -Dcom.sun.management.jmxremote.port一个新的端口&#xff0c;不能和项目端口一样-Dcom.sun.management.jmxremote.sslfalse -Dcom.sun.management.jmxremote.authenticatefalse -Dcom.sun.management.j…

深度解读:Spring.3版本自动装配机制的演变与实践

前言 今天&#xff0c;我们将开启对Spring-AI系列源码的讲解。请大家不急不躁&#xff0c;我会逐步深入&#xff0c;每次专注于一个知识点&#xff0c;以防让人感到困惑。 首先&#xff0c;源码的讨论自然离不开自动装配。有人可能会问&#xff0c;之前已经讲解过这个内容了&…

【CVPR 2025】1 论文模板中文版详细指南:从格式到提交要求

【CVPR 2025】1 论文模板中文版详细指南&#xff1a;从格式到提交要求 写在最前面1. 论文类型和使用的模板2. 摘要部分格式3. 论文正文格式要求4. 页边距和页码设置5. 标题与字体规范6. 数学公式和引用7. 脚注与参考文献8. 图表与颜色的使用9. 最终版本提交要求10. 补充材料的处…

Python网络爬虫入门指南

Python网络爬虫入门指南 网络爬虫&#xff08;Web Crawler&#xff09;&#xff0c;又称为网络蜘蛛&#xff08;Web Spider&#xff09;&#xff0c;是一种自动化程序&#xff0c;能够遍历互联网上的网页&#xff0c;收集并提取所需的数据。Python作为一种功能强大且易于学习…

一、Python基础语法(有C语言基础速成版)

在python中&#xff0c;变量是没有类型的&#xff0c;变量存储的数据是有类型的 可以把变量当做一个存放物品的盒子 一、字面量 字面量&#xff1a;在代码中&#xff0c;被写下来的 固定的值 python中常见的值的类型 二、注释 # 我是单行注释&#xff0c;一般要加个空格&a…

1024程序员日,让世界没有BUG!

近年来&#xff0c;电子商务、远程教育、智慧城市、智慧医疗等计算机互联网的新应用不断涌现且蓬勃发展。信息技术日益广泛地深入到社会生产、生活中各个领域。IT产业在数字化革命浪潮中&#xff0c;则以更高、更快、更强的速度向前发展着。这些都离不开程序员在背后默默付出。…

通过热成像技术在地球之外成长,在教室之外学习

“有了正确的心态&#xff0c;任何年龄的人都可以成为科学家” 。这是一位老师通过一项名为“Growing Beyond Earth”的研究项目教他六年级学生的内容&#xff0c;这让他们有机会测试不同植物在空间站上生长的可行性。借助科学方法和热成像相机等专业测量工具&#xff0c;这些学…

STM32实现毫秒级时间同步

提起“时间同步”这个概念&#xff0c;大家可能很陌生。一时间搞不清楚是什么意思。 我理解“时间同步”可以解决多个传感器采集数据不同时的问题&#xff0c;让多个传感器同时采集数据。 打个比方。两个人走路&#xff0c;都是100毫秒走一步&#xff08;频率相同是前提&…

面试总结一

面试总结 1、自我介绍一下自己2.面试11、css常用布局有哪些2、css常用的属性3.js原型链4、开发中遇到的技术难点5、闭包6、ts了解什么呢7.git都用什么命令8、vue怎么打包9.vue启动一个项目需要什么10、vue怎么创建一个项目 2.面试21.vue2和vue3有什么区别2.复杂组件的封装&…

七、数据库服务器(MySQL、PostgreSQL)的搭建

Linux 数据库服务器&#xff08;MySQL、PostgreSQL&#xff09;搭建全攻略 在当今的信息技术领域&#xff0c;数据库服务器的搭建是许多开发者和系统管理员必须掌握的技能。本文将详细介绍在 Linux 系统上搭建 MySQL 和 PostgreSQL 数据库服务器的步骤&#xff0c;并包括数据导…

【STM32开发笔记】移植AI框架TensorFlow到STM32单片机【DSP指令加速篇】

【STM32开发笔记】移植AI框架TensorFlow到STM32单片机【DSP指令加速篇】 一、前文回顾二、CMSIS-NN简介2.1 为什么介绍CMSIS-NN&#xff1f;2.2 CMSIS-NN是什么&#xff1f;2.3 CMSIS-NN核心特性2.4 CMSIS-NN算子支持 三、TFLMCMSIS-NN集成3.1 包含TFLM的STM32项目3.2 理解TFLM…

windows连接linux服务器上的jupyter lab

文章目录 服务器上开启jupyter lab本地cmd将端口8888映射到服务器的8889上本地浏览器打开8888端口 服务器上开启jupyter lab jupyter-lab --ip 0.0.0.0 --port 8889 --no-browser --allow-root本地cmd将端口8888映射到服务器的8889上 ssh -N -f -L localhost:8888:localhost:…

FunASR实时语音识别内网部署 | 无网络环境中的实时语音识别 | 实时语音识别

1. 在有网的电脑上面先下载下面内容 下载模型文件&#xff0c;可以到modelscope中下载 下载项目源码&#xff0c;可以到github中搜索funasr下载 配置环境&#xff0c;这里使用conda虚拟环境&#xff0c;创建并进入虚拟环境 conda create -n funasr python3.8 conda activate …

vscode使用法则及神器介绍

目录 1.Vscode设置中文 2.文插件选择configure display Language 3.插件 4.代码格式化 5.创建代码模板 一个好的插件&#xff0c;可以快速提高优秀程序猿的工作效率&#xff0c;减少开发时间&#xff1b; 1.Vscode设置中文 首先打开VSCode软件 快捷键【CtrlShiftP】 2.…

基于neo4j的医疗图谱问答与展示

找不到好的毕业设计题材&#xff1f;或者对人工智能领域感兴趣却不知道如何下手&#xff1f;这里给大家推荐一款基于Neo4j的医疗图谱问答系统项目&#xff0c;绝对是毕业设计的不二选择。 这个项目依托于医疗领域的知识图谱&#xff0c;为用户提供交流问答系统。它不仅具有知识…