免費AI編程助手
手工編寫網(wǎng)頁樣式實例（建立頁面基本框架）
在前面章節(jié)，讀者已經(jīng)初步接觸了使用Dreamweaver軟件創(chuàng)建網(wǎng)頁文件，也學(xué)習(xí)了如何使用CSS來控制網(wǎng)頁內(nèi)容的顯示方式，這些只是網(wǎng)頁制作的初步知識，更深入的內(nèi)容將從本章開始慢慢地介紹。現(xiàn)在從零開始，手工編寫HTML文件，逐漸加深熟悉編輯網(wǎng)頁文件的基本流程。
建立基本框架的步驟：
（1）新建文件。在所在目錄下單擊鼠標(biāo)右鍵，在菜單中選擇【新建】＞【文本文檔】菜單命令，如下圖所示：
（2）重命名文檔為03-01.html，如下圖所示
（3）在03-01.html文件上單擊鼠標(biāo)右鍵，選擇【打開方式】＞【記事本】選項，使用記事本打開新建的頁面文件，如下圖所示：
（4）在打開的記事本中，輸入html的基本框架代碼，如下所示：
<html>
<head>
<title>手工使用CSS技術(shù)制作網(wǎng)頁實例過程</title>
</head>
<body>
</body>
</html>
（5）在<body>標(biāo)簽中加入內(nèi)容信息標(biāo)題，代碼如下：
<h1>智慧與美貌并重 青年人最愛的手機推薦</h1>
（6）使用<img>標(biāo)記插入一幅圖片，代碼如下：
<img src="phone.gif" width="207" height="128"/>
（7）使用<p>標(biāo)記輸入正文內(nèi)容，代碼如下：
<手機產(chǎn)業(yè)的發(fā)展越來越快，手機的智能化已經(jīng)成為當(dāng)今市場上的主流趨勢。對一部智能手機來說，高配置固然重要，但是漂亮的外觀和時尚的工業(yè)設(shè)計也是吸引消費者購買欲望的重要因素，尤其是對于愛美的女性消費者來說，手機出眾的外觀更是有著不小的吸引力。</p>
<p>一款漂亮的手機對于女性朋友而言，不僅僅是一個常用的工具，更是一個像飾品一樣的點綴，為氣質(zhì)增添光彩。今天，小編就給各位青年人推薦幾款智慧與美貌并重的手機吧。</p>
用瀏覽器查看此時的頁面文件，由于頁面文件沒有經(jīng)過CSS控制，排版布局比較混亂，如下圖所示：
設(shè)置標(biāo)題
接下來開始使用CSS樣式對網(wǎng)頁中的標(biāo)簽元素逐個進(jìn)行控制，首先處理標(biāo)題。為了讓標(biāo)題更加醒目，給它加一個綠色背景，使用紅色字體居中，并與正文保持一定的間距。
在<head>標(biāo)簽中加入<style>標(biāo)簽，并書寫h1的CSS應(yīng)用原則，主要代碼如下：
用瀏覽器打開查看，標(biāo)題已經(jīng)非常清晰和突出了，效果如下圖所示：
控制圖片
接著開始處理圖片，使圖片與文字的排列更加協(xié)調(diào)。
在<style>中加入如下代碼
用瀏覽器打開查看，效果如下圖所示：
設(shè)置正文：
在上一小節(jié)中正文文字排列過于緊密，需要調(diào)整，同時改變字體大小。代碼如下：
用瀏覽器打開查看，效果如下圖所示：
設(shè)置整體頁面
設(shè)置完標(biāo)題、圖片和正文之后，是不是就意味著工作已經(jīng)做完了呢？當(dāng)然不是的，接下來還有兩項工作要做，就是設(shè)置整體頁面和對段落的控制。下面先介紹怎么設(shè)置整體頁面。
我們在網(wǎng)絡(luò)上經(jīng)?？吹揭恍┚W(wǎng)站有一個紅色、藍(lán)色等背景色，就是通過設(shè)置頁面的<body>標(biāo)簽樣式體現(xiàn)的。
在<style>標(biāo)簽中加入如下代碼：
對段落進(jìn)行分別設(shè)置
對段落的設(shè)置就是調(diào)整段落文字效果和段落的表現(xiàn)，比如給第一段文字加上上下劃線，為第二段文字加上分割線。代碼如下：
完整代碼
至此，通過手工完成一個內(nèi)容頁的CSS樣式實現(xiàn)。完整代碼如下：
更多建議：