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>

结果:

相关推荐
yaosheng_VALVE11 小时前
探究全金属硬密封蝶阀的奥秘-耀圣控制
运维·eclipse·自动化·pyqt·1024程序员节
dami_king11 小时前
SSH特性|组成|SSH是什么?
运维·ssh·1024程序员节
一个通信老学姐5 天前
专业125+总分400+南京理工大学818考研经验南理工电子信息与通信工程,真题,大纲,参考书。
考研·信息与通信·信号处理·1024程序员节
sheng12345678rui5 天前
mfc140.dll文件缺失的修复方法分享,全面分析mfc140.dll的几种解决方法
游戏·电脑·dll文件·dll修复工具·1024程序员节
huipeng9266 天前
第十章 类和对象(二)
java·开发语言·学习·1024程序员节
earthzhang20216 天前
《深入浅出HTTPS》读书笔记(19):密钥
开发语言·网络协议·算法·https·1024程序员节
爱吃生蚝的于勒7 天前
计算机基础 原码反码补码问题
经验分享·笔记·计算机网络·其他·1024程序员节
earthzhang20217 天前
《深入浅出HTTPS》读书笔记(20):口令和PEB算法
开发语言·网络协议·算法·https·1024程序员节
一个通信老学姐8 天前
专业140+总分410+浙江大学842信号系统与数字电路考研经验浙大电子信息与通信工程,真题,大纲,参考书。
考研·信息与通信·信号处理·1024程序员节
earthzhang20218 天前
《深入浅出HTTPS》读书笔记(18):公开密钥算法RSA(续)
网络·网络协议·算法·https·1024程序员节