上QQ阅读APP看书，第一时间看更新
4.4 综合案例1——设置网页标题
本节创建一个网站的网页标题，主要利用了文字和段落方面的CSS属性。具体的操作步骤如下。
step 01 分析需求。本综合案例的要求如下：在网页的最上方显示出标题，标题下方是正文，正文部分是文字段落部分。在设计这个网页标题时，需要将网页标题加粗，并将标题居中显示。用大号字体显示标题，以便和下面的正文区分。上述要求使用CSS样式属性实现。其案例效果如图4-22所示。
图4-22 网页标题显示
step 02 分析布局并构建HTML。需要创建一个HTML页面，并用DIV将页面划分为两个层，一个是网页标题层，一个是正文部分。
step 03 导入CSS文件。在HTML页面，将CSS文件使用link方式，导入到HTML页面中。这个CSS文件定义了页面的所有样式，其导入代码如下所示。
<link href="index.css" rel="stylesheet" type="text/css" />
step 04 完成标题样式设置。设置标题的HTML代码，此处使用DIV构建，其代码如下所示。
<div>
<h1>蜂王浆的作用与功效</h1>
<div class="ar">搜狐网 2017年03月01日<span></div>
</div>
step 05 使用CSS代码对其进行修饰，其代码如下所示。
h1{text-align:center;color:red}
.ar{text-align:right;font-size:15px;}
step 06 开发正文部分代码和样式。使用HTML代码完成网页正文部分，此处使用DIV构建，其代码如下所示。
<div>
<P>
1、 辅助降低血糖。此作用主要因其含有的胰岛素样肽类推理得来，胰岛素样肽类是治疗糖尿病的特效
药物。
</P>
<P>
2、 抗氧化功效。此作用是蜂王浆被大众普遍肯定的作用，它对细胞的修复以及再生具有很强的作用。
在蜂王浆中检测出的超氧化物歧化酶(SOD)是抗氧化的主要成分。
</P>
<P>
3、 降低血脂。蜂王浆含有人体必需的维生素达10种以上，能平衡脂肪代谢和糖代谢，可降低肥胖者
的高血脂和高血糖，非常适合肥胖型糖尿病患者。
</P>
<P>
4、 控制血管扩张、降低血压。这个结论来自于其所含的10-羟基-癸烯酸(王浆酸)以及王浆主要蛋白
-1。</P>
</div>
step 07 使用CSS代码进行修饰，其代码如下所示。
p{text-indent:8mm;line-height:7mm;}