4.4 綜合案例1——設(shè)置網(wǎng)頁(yè)標(biāo)題

本節(jié)創(chuàng)建一個(gè)網(wǎng)站的網(wǎng)頁(yè)標(biāo)題，主要利用了文字和段落方面的CSS屬性。具體的操作步驟如下。

step 01 分析需求。本綜合案例的要求如下：在網(wǎng)頁(yè)的最上方顯示出標(biāo)題，標(biāo)題下方是正文，正文部分是文字段落部分。在設(shè)計(jì)這個(gè)網(wǎng)頁(yè)標(biāo)題時(shí)，需要將網(wǎng)頁(yè)標(biāo)題加粗，并將標(biāo)題居中顯示。用大號(hào)字體顯示標(biāo)題，以便和下面的正文區(qū)分。上述要求使用CSS樣式屬性實(shí)現(xiàn)。其案例效果如圖4-22所示。

圖4-22 網(wǎng)頁(yè)標(biāo)題顯示

step 02 分析布局并構(gòu)建HTML。需要?jiǎng)?chuàng)建一個(gè)HTML頁(yè)面，并用DIV將頁(yè)面劃分為兩個(gè)層，一個(gè)是網(wǎng)頁(yè)標(biāo)題層，一個(gè)是正文部分。

step 03 導(dǎo)入CSS文件。在HTML頁(yè)面，將CSS文件使用link方式，導(dǎo)入到HTML頁(yè)面中。這個(gè)CSS文件定義了頁(yè)面的所有樣式，其導(dǎo)入代碼如下所示。

<link href="index.css" rel="stylesheet" type="text/css" />

step 04 完成標(biāo)題樣式設(shè)置。設(shè)置標(biāo)題的HTML代碼，此處使用DIV構(gòu)建，其代碼如下所示。

<div>
    <h1>蜂王漿的作用與功效</h1>
<div  class="ar">搜狐網(wǎng)  2017年03月01日<span></div>
</div>

step 05 使用CSS代碼對(duì)其進(jìn)行修飾，其代碼如下所示。

h1{text-align:center;color:red}
.ar{text-align:right;font-size:15px;}

step 06 開(kāi)發(fā)正文部分代碼和樣式。使用HTML代碼完成網(wǎng)頁(yè)正文部分，此處使用DIV構(gòu)建，其代碼如下所示。

    <div>
      <P>
1、 輔助降低血糖。此作用主要因其含有的胰島素樣肽類推理得來(lái)，胰島素樣肽類是治療糖尿病的特效
藥物。
</P>
<P>
2、 抗氧化功效。此作用是蜂王漿被大眾普遍肯定的作用，它對(duì)細(xì)胞的修復(fù)以及再生具有很強(qiáng)的作用。
在蜂王漿中檢測(cè)出的超氧化物歧化酶(SOD)是抗氧化的主要成分。
</P>
<P>
3、 降低血脂。蜂王漿含有人體必需的維生素達(dá)10種以上，能平衡脂肪代謝和糖代謝，可降低肥胖者
的高血脂和高血糖，非常適合肥胖型糖尿病患者。
</P>
<P>
4、 控制血管擴(kuò)張、降低血壓。這個(gè)結(jié)論來(lái)自于其所含的10-羥基-癸烯酸(王漿酸)以及王漿主要蛋白
-1。</P>
</div>

step 07 使用CSS代碼進(jìn)行修飾，其代碼如下所示。

p{text-indent:8mm;line-height:7mm;}