- Div+CSS3.0網(wǎng)頁布局案例精粹(升級版)
- 張曉景
- 2540字
- 2020-03-02 16:09:22
2.8 應(yīng)用案例——為頁面添加CSS樣式
使用CSS可以減輕網(wǎng)頁設(shè)計者的工作負(fù)擔(dān),CSS能夠在恰當(dāng)?shù)牡胤郊幸慌睿詫崿F(xiàn)某種可視效果,而不是將它們分散在整個文檔中。下面通過一個網(wǎng)站頁面的設(shè)計制作過程,向讀者介紹CSS樣式在網(wǎng)頁設(shè)計中的應(yīng)用方法和技巧,頁面的最終效果如圖2-19所示。

圖2-19 頁面的最終效果
源文件位置:源文件\第2章\2-8.html
視頻位置:視頻\第2章\2-8.mp4
2.8.1 設(shè)計分析
本案例設(shè)計制作了一個工作室網(wǎng)站頁面,頁面布局新穎,運用的色彩艷麗,頁面中的背景以及圖片的布局給瀏覽者一種神秘的感覺,不會因過于簡單而不夠美觀。設(shè)計頁面時結(jié)合了相應(yīng)的配色原理,使頁面具有獨特的設(shè)計風(fēng)格。
2.8.2 制作步驟
(1)執(zhí)行“文件”→“新建”命令,彈出“新建文檔”對話框,新建一個HTML文檔,如圖2-20所示。執(zhí)行“文件”→“保存”命令,將頁面保存為“源文件\第2章\2-6.html”。

圖2-20 新建文檔
(2)用相同的方法,新建兩個CSS文件,并分別保存為“源文件\第2章\style\div.css”和“源文件\第2章\style\css.css”。
技巧
按“Ctrl+N”組合鍵,可以直接彈出“新建文檔”對話框,從中進(jìn)行新建頁面的操作。
(3)執(zhí)行“窗口”→“CSS設(shè)計器”命令,打開“CSS設(shè)計器”面板,單擊面板上的“添加CSS源”按鈕,在彈出的下拉列表中選擇“附加現(xiàn)有的CSS文件”選項,繼續(xù)彈出“使用現(xiàn)有的CSS文件”對話框,將剛剛新建的外部樣式表文件div.css和css.css鏈接到頁面中,如圖2-21所示。

圖2-21 鏈接外部樣式表文件
(4)將頁面切換到css.css文件,創(chuàng)建一個名為*的CSS規(guī)則,如圖2-22所示。再創(chuàng)建一個名為body的CSS規(guī)則,如圖2-23所示。

圖2-22 名為*的CSS規(guī)則代碼

圖2-23 名為body的CSS規(guī)則代碼
提示
這里的*為通配選擇符。*的使用表示所有對象,包括所有不同id、不同class的HTML的所有標(biāo)簽。
(5)將光標(biāo)置于頁面視圖中,單擊“插入”面板上的“Div”按鈕,彈出“插入Div”對話框,在ID下拉列表框中輸入“box”,如圖2-24所示,單擊“確定”按鈕,在頁面中插入名為box的Div,頁面效果如圖2-25所示。

圖2-24 “插入Div”對話框

圖2-25 插入名為box的Div
(6)將頁面切換到div.css文件,創(chuàng)建一個名為#box的CSS規(guī)則,如圖2-26所示,頁面效果如圖2-27所示。

圖2-26 CSS規(guī)則代碼

圖2-27 頁面效果
(7)將光標(biāo)移至名為box的Div中,將多余的文本內(nèi)容刪除,單擊“插入”面板上的“Div”按鈕,彈出“插入Div”對話框,在ID下拉列表框中輸入“top”,如圖2-28所示,單擊“確定”按鈕,在名為box的Div中插入名為top的Div,頁面效果如圖2-29所示。

圖2-28 “插入Div”對話框

圖2-29 插入名為top的Div
提示
在“插入Div”對話框中,通過“插入”選項,可以指定插入的Div位置。
· 在插入點:將Div插入在光標(biāo)所在的位置。
· 在標(biāo)簽之前:將Div插入在所選標(biāo)簽的前面。
· 在開始標(biāo)簽之后:將Div插入在所選標(biāo)簽的開始標(biāo)簽之后。
· 在開始標(biāo)簽之前:將Div插入在所選標(biāo)簽的結(jié)束標(biāo)簽之前。
· 在標(biāo)簽之后:將Div插入在所選標(biāo)簽的后面。
(8)將頁面切換到div.css文件,創(chuàng)建一個名稱為#top的CSS規(guī)則,如圖2-30所示,頁面效果如圖2-31所示。

圖2-30 CSS規(guī)則代碼

圖2-31 頁面效果
(9)將光標(biāo)移至名為top的Div中,將多余的文本內(nèi)容刪除,輸入相應(yīng)文本,如圖2-32所示,選中剛剛輸入的文字,將頁面切換到代碼視圖,添加列表代碼,如圖2-33所示。

圖2-32 輸入文字

圖2-33 添加列表代碼
(10)將頁面切換到div.css文件,創(chuàng)建一個名稱為#top li的CSS規(guī)則,如圖2-34所示,頁面效果如圖2-35所示。

圖2-34 CSS規(guī)則代碼

圖2-35 頁面效果
(11)單擊“插入”面板上的“Div”按鈕,彈出“插入Div”對話框,在ID下拉列表框中輸入“top2”,如圖2-36所示,單擊“確定”按鈕,在名為top的Div后插入名為top2的Div,如圖2-37所示。

圖2-36 “插入div”對話框

圖2-37 插入名為top2的Div
(12)將頁面切換到div.css文件,創(chuàng)建一個名稱為#top2的CSS規(guī)則,如圖2-38所示,頁面效果如圖2-39所示。

圖2-38 CSS規(guī)則代碼

圖2-39 頁面效果
(13)將光標(biāo)移至名為top2的Div中,將多余的文本內(nèi)容刪除,單擊“插入”面板上的“Image”按鈕,將圖像“源文件\第2章\images\2402.png”插入頁面,如圖2-40所示,再將光標(biāo)移至圖像后,按“Shift+Enter”組合鍵插入換行符,輸入文本內(nèi)容,如圖2-41所示。

圖2-40 插入圖像

圖2-41 輸入文本內(nèi)容
提示
在網(wǎng)頁中插入的透底圖片多以gif格式為主,但是由于gif格式的圖片顏色信息較少,會使一些色彩較多的圖片失真,這時就需要使用png格式來保存透底圖片。但需要注意的是,IE7以下版本的IE瀏覽器不支持png格式。
(14)單擊“插入”面板上的“Div”按鈕,在名為top2的Div后插入名為main的Div,將頁面切換到div.css文件,創(chuàng)建一個名稱為#main的CSS規(guī)則,如圖2-42所示,頁面效果如圖2-43所示。

圖2-42 CSS規(guī)則代碼

圖2-43 頁面效果
(15)將光標(biāo)移至名為main的Div中,將多余的文本內(nèi)容刪除,單擊“插入”面板上的“Div”按鈕,在名為main的Div中插入名為main-left的Div,將頁面切換到div.css文件,創(chuàng)建一個名稱為#main-left的CSS規(guī)則,如圖2-44所示,頁面效果如圖2-45所示。

圖2-44 CSS規(guī)則代碼

圖2-45 頁面效果
(16)單擊“插入”面板上的“Image”按鈕,將圖像“源文件\第2章\images\2403.png”插入頁面,如圖2-46所示,將光標(biāo)移至圖像后,按“Shift+Enter”組合鍵插入換行符,輸入文本內(nèi)容,如圖2-47所示。

圖2-46 插入圖像

圖2-47 頁面效果
提示
換行符在代碼視圖中顯示為
。按“Enter”鍵可以插入段落符,在代碼視圖中顯示為<p></p>。
(17)將頁面切換到css.css文件,創(chuàng)建一個名稱為.font01的CSS規(guī)則,如圖2-48所示。選中“LimeWire下載”文字,應(yīng)用剛剛新建的樣式,頁面效果如圖2-49所示。

圖2-48 CSS規(guī)則代碼

圖2-49 頁面效果
提示
此處的CSS規(guī)則代碼的意思為:字體大小為15px;字體為微軟雅黑;行高為30px;字體顏色為#89b601。
(18)用相同的方法,插入名為main-main的Div和名為main-right的Div。其CSS規(guī)則代碼如圖2-50所示,頁面效果如圖2-51所示。

圖2-50 CSS規(guī)則代碼

圖2-51 頁面效果
(19)單擊“插入”面板上的Div按鈕,在名為main的Div后插入名為bottom的Div。將頁面切換到div.css文件,創(chuàng)建一個名稱為#bottom的CSS規(guī)則,如圖2-52所示,頁面效果如圖2-53所示。

圖2-52 CSS規(guī)則代碼

圖2-53 頁面效果
(20)將光標(biāo)移至名為bottom的Div中,將多余的文本內(nèi)容刪除,輸入文本內(nèi)容,如圖2-54所示,將頁面切換到代碼視圖,添加<span>標(biāo)簽,如圖2-55所示。

圖2-54 輸入文字

圖2-55 添加<span>標(biāo)簽
(21)將頁面切換到div.css文件,創(chuàng)建一個名稱為#bottom span的CSS規(guī)則,如圖2-56所示,頁面效果如圖2-57所示。

圖2-56 CSS規(guī)則代碼

圖2-57 頁面效果
(22)完成頁面的制作,執(zhí)行“文件”→“保存”命令,保存頁面。單擊頁面右下角的“預(yù)覽”按鈕,頁面效果如圖2-58所示。

圖2-58 頁面效果
2.8.3 案例總結(jié)
本案例通過設(shè)計制作一個工作室網(wǎng)站頁面,講解了在頁面中添加CSS樣式及控制頁面元素的方法,讀者在完成了本案例的制作后,需要能夠掌握基本的CSS樣式應(yīng)用方法,并能應(yīng)用到實際的工作中。
- 超好玩的電子制作:少兒電子制作啟蒙
- 用手機(jī)做博主:人氣短視頻拍攝與剪輯(剪映版)
- AutoCAD 2011實用教程
- 視頻拍攝與制作:短視頻 商品視頻 直播視頻(第2版·全彩慕課版)
- 商業(yè)PPT設(shè)計完全學(xué)習(xí)手冊
- 邊用邊學(xué)3ds Max建筑設(shè)計
- SketchUp印象 城市規(guī)劃項目實踐(第2版)
- 錦繡年華:古風(fēng)短視頻策劃、拍攝與后期制作全流程精解
- Photoshop CS6摳圖從新手到高手
- After Effects CS6技術(shù)大全
- 短視頻拍攝與制作(微課版)
- 48小時精通Flash CS6
- After Effects影視特效制作208例
- 手把手教你學(xué)AutoCAD 2012
- 短視頻制作基礎(chǔ)