3.6 應(yīng)用案例——使用Div+CSS布局頁面

在使用CSS排版的頁面中，利用Div進(jìn)行標(biāo)記，再用CSS對其樣式進(jìn)行控制，可以很方便地實(shí)現(xiàn)各種效果，而且還實(shí)現(xiàn)了網(wǎng)站結(jié)構(gòu)、表現(xiàn)、行為的分離，頁面的最終效果如圖3-25所示。

源文件位置：源文件\第3章\3-6.html

視頻位置：視頻\第3章\3-6.mp4

3.6.1 設(shè)計(jì)分析

本案例設(shè)計(jì)制作了一個(gè)企業(yè)網(wǎng)站的首頁頁面，簡潔的布局結(jié)構(gòu)及統(tǒng)一的排版方式使整個(gè)頁面給人一種清晰的感覺。整個(gè)頁面以藍(lán)色為主色調(diào)，再加上圖片和文字的巧妙搭配，使頁面更具商業(yè)氣息。

3.6.2 制作步驟

（1）打開文件3601.html，看到代碼視圖如圖3-26所示。將頁面切換到css.css文件，可以看到標(biāo)簽名為*和body的CSS規(guī)則，其代碼如圖3-27所示。

（2）在代碼頁面中，將光標(biāo)置于body標(biāo)簽中，然后單擊“插入”面板上的“Div”按鈕，彈出“插入Div”對話框，在ID下拉列表框中輸入box，如圖3-28所示，單擊“確定”按鈕，在頁面中插入名為box的Div，如圖3-29所示。

（3）將頁面切換到div.css文件，創(chuàng)建一個(gè)名為#box的CSS規(guī)則，其代碼如圖3-30所示，頁面效果如圖3-31所示。

（4）將光標(biāo)移至名為box的Div中，將多余的文本內(nèi)容刪除，在該Div中插入名為top的Div。將頁面切換到div.css文件，創(chuàng)建一個(gè)名稱為#top的CSS規(guī)則，其代碼如圖3-32所示，頁面效果如圖3-33所示。

提示

在實(shí)時(shí)視圖中，如果需要?jiǎng)h除Div中的文字，需要雙擊文字進(jìn)入文本框，用戶可以在文本框內(nèi)自由使用“Delete”鍵或“Backspace”鍵執(zhí)行刪除功能。

（5）將光標(biāo)移至名為top的Div中，將多余的文本內(nèi)容刪除，在該Div中插入名為top-1的Div。將頁面切換到div.css文件，創(chuàng)建一個(gè)名稱為#top-1的CSS規(guī)則，其代碼如圖3-34所示。

（6）返回實(shí)時(shí)視圖頁面，在名為top-1的Div中插入圖像“源文件\第3章\images\3403.png”，頁面效果如圖3-35所示。

（7）根據(jù)名為top-1的Div的制作方法可以制作出名為top-2的Div，其代碼如圖3-36所示，頁面效果如圖3-37所示。

（8）單擊“插入”面板上的“Div”按鈕，在名為top的Div后插入名為top2的Div。將頁面切換到div.css文件，創(chuàng)建一個(gè)名稱為#top2的CSS規(guī)則，其代碼如圖3-38所示。在名為top2的Div中輸入文字，如圖3-39所示。

（9）在代碼頁面中，選中剛剛輸入的文字，為其添加ul和li的列表標(biāo)簽，其代碼如圖3-40所示。

（10）將頁面切換到div.css文件，創(chuàng)建一個(gè)名稱為#top2 li的CSS規(guī)則，其代碼如圖3-41所示。返回設(shè)計(jì)頁面，頁面效果如圖3-42所示。

（11）用相同方法插入名為main的Div，在該Div中插入圖像“源文件\第3章\images\3405.png”，其代碼如圖3-43所示，頁面效果如圖3-44所示。

（12）將光標(biāo)移至剛插入的圖像后，單擊“插入”面板上的“Div”按鈕，插入名為main-1的Div。將頁面切換到div.css文件，創(chuàng)建一個(gè)名稱為#main-1的CSS規(guī)則，其代碼如圖3-45所示。返回實(shí)時(shí)視圖頁面，頁面效果如圖3-46所示。

（13）將光標(biāo)移至名為main-1的Div中，將多余的文本內(nèi)容刪除，單擊“鼠標(biāo)經(jīng)過圖像”按鈕，彈出“插入鼠標(biāo)經(jīng)過圖像”對話框，其設(shè)置如圖3-47所示，單擊“確定”按鈕，在頁面中插入鼠標(biāo)經(jīng)過圖像，頁面效果如圖3-48所示。

（14）繼續(xù)在該Div中插入其余4張圖片，頁面效果如圖3-49所示。

（15）單擊“插入”面板上的“Div”按鈕，在名為main的Div后插入名為main2的Div。將頁面切換到div.css文件，創(chuàng)建一個(gè)名稱為#main2的CSS規(guī)則，其代碼如圖3-50所示。返回實(shí)時(shí)視圖頁面，頁面效果如圖3-51所示。

（16）將光標(biāo)移至名為main2的Div中，將多余的文本內(nèi)容刪除，在該Div中插入名為main2-1的Div。將頁面切換到div.css文件，創(chuàng)建一個(gè)名稱為#main2-1的CSS規(guī)則，其代碼如圖3-52所示。返回實(shí)時(shí)視圖頁面，頁面效果如圖3-53所示。

（17）將光標(biāo)移至名為main2-1的Div中，將多余的文本內(nèi)容刪除，并輸入文本內(nèi)容。將頁面切換到css.css文件，創(chuàng)建一個(gè)名稱為.font01的CSS規(guī)則，其代碼如圖3-54所示。

（18）選中剛剛輸入的文字，應(yīng)用剛剛新建的樣式，頁面效果如圖3-55所示。

（19）用相同的方法制作出該Div中的內(nèi)容，其代碼如圖3-56所示，頁面效果如圖3-57所示。

（20）用相同方法制作出頁面中的其他內(nèi)容，具體的代碼如圖3-58所示，頁面效果如圖3-59所示。

（21）完成頁面的制作，執(zhí)行“文件”→“保存”命令，保存頁面。單擊頁面右下角的“預(yù)覽”按鈕，頁面效果如圖3-60所示。

3.6.3 案例總結(jié)

本節(jié)通過案例的制作，向讀者簡單地介紹了一些Div+CSS布局相關(guān)的基本知識(shí)，如CSS布局頁面、定義Div及常見布局方式等，完成本案例的制作后，讀者應(yīng)該了解、掌握關(guān)于Div+CSS布局的知識(shí)和方法，并且能將其應(yīng)用到實(shí)際中。