昨天说完了css的全部引入方式，今天根据一个综合案例来编写代码。
案例: 新闻页面
制作页面，整体可以分为两步:
1.搭建HTML结构页面
2.修改CSS样式
我们来看下具体的样式:
这就是一个普通的网页展示，对应的代码为:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS样式-综合案例title>
<style>
body {
/* 字号大小和字体，必须要写 */
font: 16px/28px 'Microsoft YaHei';
}
h1 {
/* 标题文字不加粗，正常展示 */
font-weight: 400;
/* 标题中的文字水平居中 */
text-align: center;
}
.gray {
/* 颜色为淡灰色，整体居中，字体大小小一些，为12px */
color: #888888;
font-size: 12px;
text-align: center;
}
/* 取消下划线 */
a {
text-decoration: none;
}
/* 搜索按钮中搜索两个字的颜色和宽度 */
.search {
color: #666;
width: 170px;
}
/* 按钮样式 */
.btn {
font-weight: 700;
}
/* 对图片的设置 */
.pic {
text-align: center;
}
/* 想要图片居中对齐，需要对图片的父标签 添加水平居中的代码 */
.footer {
color: blue;
font-size: 12px;
font-weight: 700;
}
/* 底部展示样式，也是使用class属性 */
style>
head>
<body>
<h1>男子嫌银行服务态度差取走500万，被银行证实h1>
<div class="gray">来源: <a href="htttps://www.baidu.com">北京日报a> 2021.10.15
<input type="text" value="请输入查询条件..." class="search"> <button class="btn">搜索button>
div>
<hr>
<p>微博大V@sunwear发文炮轰上海银行，声称由于该行服务态度不好，他准备分批将存在该行的几千万元全部取现转移，目前已取500万元带走，所取现金搬上了一辆劳斯莱斯。
上海银行工作人员回复称，的确有这样的事情发生，但也是个别现象。具体情况不是很清楚，已反馈专员跟进处理。p>
<p>对于事件的经过，一位网友发文称，“该大V疫情期间去网点不愿意戴口罩，所以被保安阻拦。
网点负责人解释了很久，没有用，并且要网点负责人下跪道歉。”sunwear发布回应，否认自己不愿意戴口罩、逼负责人下跪道歉，并建议银行拿出监控看看保安是如何表现的。p>
<p class="pic">
<img src="011.jpeg" alt="">
p>
<h4>观察者网表示很赞h4>
<p>sunwear表示，自己全程一共三句话：忘带了，你们这有么？哪有卖的？“我乖乖的去旁边买了一个口罩回来了。保安全程一句话没有，第一个手势指着我嘴，第二个手势扭着脑袋摆手让我出去，第三个手势挥手一指外面。
我以为他是个哑巴，我没有任何不愿意戴口罩的表现。p>
<p class="footer">明天会有一个好天气p>
body>
html>
对每一个段落都进行了标注，通过这个案例，将之前学到的HTML和CSS样式都用了一遍。
明天就要上班了，时间过的飞快。