案例: 新闻页面
制作页面，整体可以分为两步:
1.搭建HTML构造页面
2.修正CSS样式
我们来看下详细的样式:
这便是一个普通的网页展示，对应的代码为:
<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;
}
/ 想要图片居中对齐，须要对图片的父标签<p>添加水平居中的代码 /
.footer {
color: blue;
font-size: 12px;
font-weight: 700;
}
/ 底部展示样式，也是利用class属性 /
</style>
</head>
<body>
<!-- 先写一个标题，建议利用h1 -->
<h1>男子嫌银行做事态度差取走500万，被银行证明</h1>
<!-- 独自一行展示，可以利用div,单独利用class属性来修正 -->
<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>来展示水平线。-->
<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样式都用了一遍。
来日诰日就要上班了，韶光过的飞快。
