DIV+CSS網(wǎng)頁布局經(jīng)典

1、DIV+CSS布局基礎(chǔ)經(jīng)布局基礎(chǔ)經(jīng)典典課程大綱課程大綱123傳統(tǒng)布局傳統(tǒng)布局與與CSSCSS布局布局XHTMLXHTML與與CSSCSS基礎(chǔ)基礎(chǔ)4CSSCSS網(wǎng)頁布局與定位網(wǎng)頁布局與定位實(shí)例：實(shí)例：三欄居中式布局三欄居中式布局1.1.1 傳統(tǒng)傳統(tǒng)Table布局布局v傳統(tǒng)Table布局方式只是利用了HTML的table元素所具有的零邊框特性v因此，Table布局的核心是： 設(shè)計(jì)一個(gè)能滿足版式要求的表格結(jié)構(gòu)，將內(nèi)容裝入每個(gè)單元格中，間距及空格使用透明gif圖片實(shí)現(xiàn)，最終的結(jié)構(gòu)是一個(gè)復(fù)雜的表格（有時(shí)候會(huì)出現(xiàn)多次嵌套），顯然，這樣不利于設(shè)計(jì)和修改。1.1.2 傳統(tǒng)傳統(tǒng)Table布局示意圖布局示意圖1.

2、1.3 Table布局的缺點(diǎn)布局的缺點(diǎn)設(shè)計(jì)復(fù)雜，改版時(shí)工作量巨大表現(xiàn)代碼與內(nèi)容混合，可讀性差 不利于數(shù)據(jù)調(diào)用分析網(wǎng)頁文件量大，瀏覽器解析速度慢如蝸牛2.2.0 Web標(biāo)準(zhǔn)的構(gòu)成（選）標(biāo)準(zhǔn)的構(gòu)成（選）表現(xiàn)表現(xiàn)：用于對(duì)已經(jīng)被結(jié)構(gòu)化的信息進(jìn)行顯示上的修飾，包括版式顏色大小等. 主要技術(shù)就是CSS,目前版本2.0行為行為：是指對(duì)整個(gè)文檔內(nèi)部的一個(gè)模型進(jìn)行定義及交互行為的編寫 主要技術(shù)有：DOM(文檔對(duì)象模型)、ECMAScript(JavaScript腳本語言)結(jié)構(gòu)結(jié)構(gòu)：用來對(duì)網(wǎng)頁中的信息進(jìn)行整理與分類， 常用的技術(shù)有：HTML、XHTML、XML1.2.1 Web標(biāo)準(zhǔn)布局標(biāo)準(zhǔn)布局v基于Web標(biāo)準(zhǔn)的網(wǎng)

3、站設(shè)計(jì)的核心目的： 如何使網(wǎng)頁的表現(xiàn)與內(nèi)容分離！v這樣做的好處：高效率的開發(fā)與簡(jiǎn)單維護(hù)信息跨平臺(tái)的可用性降低服務(wù)器成本；加快網(wǎng)頁解析速度更良好的用戶體驗(yàn)?zāi)敲?，那么，CSSCSS2.0從真正意義實(shí)現(xiàn)了設(shè)計(jì)代碼與內(nèi)容分離從真正意義實(shí)現(xiàn)了設(shè)計(jì)代碼與內(nèi)容分離1.2.2 DIV+CSS布局示意圖布局示意圖 真正的表現(xiàn)與內(nèi)容完全分離，代碼可讀性強(qiáng)，樣式可重復(fù)應(yīng)用1.2.3 CSS布局代碼示例布局代碼示例測(cè)試頁頭部主體尾部Xhtml文檔* font-family: Arial, Helvetica, sans-serif, 宋體;font-size: 12px;margin: 0px;text-align:

4、center;#container width: 810px;margin:auto;background:#CCCCCC;#header height: 100px;width: 800px;padding:5px;background-color: #6699FF;#content height: 400px;width: 800px;padding:5px;background-color#FF9900;#footer width: 800px;height: 50px;padding:5px; background-color: #6699FF;Style1.css最終布局效果2.1.

5、1 向向Web標(biāo)準(zhǔn)過度標(biāo)準(zhǔn)過度 / XHTML 基礎(chǔ)基礎(chǔ)S 為什么要使用XHTML? XHTMLXHTML是在HTML4.0基礎(chǔ)上，用XML規(guī)則擴(kuò)展得到的，建立XHTML的目的就是為了實(shí)現(xiàn)HTML向XML的過度。 HTMLHTML:更多的被用于網(wǎng)頁設(shè)計(jì)和表現(xiàn) XHTMLXHTML:它的初衷就不是為了表現(xiàn)，而是對(duì)網(wǎng)頁內(nèi) 容進(jìn)行結(jié)構(gòu)設(shè)計(jì)，嚴(yán)格的說它是面向文檔 結(jié)構(gòu)的語言，更符合未來的發(fā)展要求！2.1.2 選擇合適的選擇合適的DTD 一個(gè)標(biāo)準(zhǔn)的XHTML文檔，必須以Doctype標(biāo)簽作為開始，doctype用于定義文檔類型。對(duì)于XHTML而言，可以選擇三種不同的XHTML文檔類型，請(qǐng)看下面代碼： 無

6、標(biāo)題文檔 TransitionalTransitional類型類型：過度類型。瀏覽器對(duì)XHTML的解析將為寬松（建議使用）StrictStrict類型類型：嚴(yán)格類型。文檔中不允許使用任何表現(xiàn)樣式的標(biāo)識(shí)和屬性FramesetFrameset類型類型：框架頁類型。網(wǎng)頁使用框架結(jié)構(gòu)時(shí)，聲明此類型 2.1.3 DreamweaverCS3中中DTD（DTD文檔類型）選擇畫面2.1.4 XHTML 語法規(guī)范語法規(guī)范v屬性名稱必須小寫v屬性值必須使用雙引號(hào)v不允許使用標(biāo)簽簡(jiǎn)寫v使用id替代namev必須使用結(jié)束標(biāo)簽必須使用結(jié)束標(biāo)簽M注意：選擇合適的標(biāo)簽注意：選擇合適的標(biāo)簽（區(qū)別與table布局的習(xí)慣.）

7、布局用：； 文本用：， 圖片用： 列表用： 數(shù)據(jù)用： 其他的：form，input，select各司其職各司其職2.2.1 CSS語法基礎(chǔ)語法基礎(chǔ)S 何為何為CSSCSS（Cascading Style SheetCascading Style Sheet）？）？ CSS中文譯為表。是用于控制網(wǎng)頁樣式并允許 將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。 即即: :告訴瀏覽器，這段樣式將應(yīng)用到哪個(gè)對(duì)象告訴瀏覽器，這段樣式將應(yīng)用到哪個(gè)對(duì)象.CSSCSS語法結(jié)構(gòu)語法結(jié)構(gòu): 選擇符 屬性1:值1； 屬性2:值2 舉例：body font-size:12px; text-align:center;參數(shù)說明

8、：屬性和屬性值之間用冒號(hào)(:)隔開，定義多個(gè)屬性時(shí)，屬性之間用分號(hào)(;)隔開2.2.2 CSS選擇器（符）選擇器（符）：指以網(wǎng)頁中已有的標(biāo)簽名作為名稱的選擇器，幾乎所有的html標(biāo)簽均可用作該類選擇器（如：body p h1 等等.）：屬用戶自定義名稱的選擇器，可以在XHTML標(biāo)簽中用class=“”為相應(yīng)標(biāo)簽指派樣式。可理解為一類。 特點(diǎn)特點(diǎn)：在文檔中允許被重復(fù)使用：屬用戶自定義名稱選擇器，基于DOM文檔對(duì)象模型原理出現(xiàn)的選擇器，可以在XHTML標(biāo)簽中用id=“”為相應(yīng)標(biāo)簽指派樣式，可理解為一個(gè)標(biāo)識(shí)特點(diǎn)：特點(diǎn)：在網(wǎng)頁中，每個(gè)id名稱只能使用一次2.2.3 選擇器的聲明選擇器的聲明body,t

9、d,th,#header,.onecolor:blue;font-size:12px;:并列關(guān)系P h1color:blue;font-size:14px;:從屬關(guān)系P H1,#header ulcolor:blue;font-size:12px;:并列及從屬關(guān)系2.2.4 如何應(yīng)用如何應(yīng)用CSS到網(wǎng)頁中到網(wǎng)頁中 行內(nèi)樣式表 內(nèi)部（內(nèi)嵌）樣式表 外部（鏈接）樣式表 導(dǎo)入式樣式表CSS編碼可以多種方式靈活地應(yīng)用到我們所設(shè)計(jì)XHTML頁面之中，選擇方式可根據(jù)我們對(duì)設(shè)計(jì)的不同表現(xiàn)手段來制定，一般按CSS代碼位置分為：2.2.5 實(shí)例代碼實(shí)例代碼:CSS按位置的分類按位置的分類測(cè)試頁 頭部 主體 尾部

10、 在之間加入 import url(css/style2.css); 稱為：導(dǎo)入式樣式表2.2.5 樣式優(yōu)先權(quán)問題樣式優(yōu)先權(quán)問題2.6 CSS開發(fā)環(huán)境與調(diào)試環(huán)境開發(fā)環(huán)境與調(diào)試環(huán)境3.1 被遺忘的主角被遺忘的主角 DIV3.2 CSS盒子模型盒子模型3.3 文檔流及浮動(dòng)概念文檔流及浮動(dòng)概念3.4 浮動(dòng)定位與絕對(duì)定位浮動(dòng)定位與絕對(duì)定位4.0 一個(gè)簡(jiǎn)單的一個(gè)簡(jiǎn)單的CSS布局實(shí)例布局實(shí)例網(wǎng)頁制作流程： 效果圖切圖布局（DIV+CSS、table 嵌入動(dòng)態(tài)程序或模板標(biāo)簽測(cè)試發(fā)布學(xué)習(xí)要點(diǎn)及學(xué)習(xí)要點(diǎn)及1.11.21.3傳統(tǒng)布局于傳統(tǒng)布局于CSSCSS布局的區(qū)別布局的區(qū)別1.21.3 CSSCSS（Casca

11、ding Style SheetCascading Style Sheet），中文譯為層），中文譯為層疊樣式表。是用于控制網(wǎng)頁樣式并允許將樣式信息疊樣式表。是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。 【本章學(xué)習(xí)目的本章學(xué)習(xí)目的】 本章通過多個(gè)本章通過多個(gè)CSSCSS樣式的應(yīng)用實(shí)例，重點(diǎn)介紹樣式的應(yīng)用實(shí)例，重點(diǎn)介紹了了CSSCSS樣式表功能、定義樣式表功能、定義CSSCSS規(guī)則的方法，應(yīng)用內(nèi)嵌規(guī)則的方法，應(yīng)用內(nèi)嵌式樣式表和鏈接外部樣式表的方法等，通過本章的式樣式表和鏈接外部樣式表的方法等，通過本章的學(xué)習(xí)，讀者應(yīng)了解學(xué)習(xí)，讀者應(yīng)了解CSSCS

12、S樣式表的用途，掌握創(chuàng)建和樣式表的用途，掌握創(chuàng)建和應(yīng)用應(yīng)用CSSCSS樣式表的方法，學(xué)會(huì)用樣式表的方法，學(xué)會(huì)用CSSCSS樣式表進(jìn)行網(wǎng)頁樣式表進(jìn)行網(wǎng)頁的美化和網(wǎng)頁布局。的美化和網(wǎng)頁布局。5.1 利用CSS 樣式表的網(wǎng)頁實(shí)例 CSSCSS樣式表是由一系列樣式選擇器和樣式表是由一系列樣式選擇器和CSSCSS屬性組成，它屬性組成，它支持字體屬性、顏色和背景屬性、文本屬性、邊框?qū)傩?、支持字體屬性、顏色和背景屬性、文本屬性、邊框?qū)傩?、列表屬性以及精確定位網(wǎng)頁元素屬性等，增強(qiáng)了網(wǎng)頁的列表屬性以及精確定位網(wǎng)頁元素屬性等，增強(qiáng)了網(wǎng)頁的格式化功能。格式化功能。 使用使用CSSCSS樣式表的另一個(gè)優(yōu)點(diǎn)是可以利用同

13、一個(gè)樣式樣式表的另一個(gè)優(yōu)點(diǎn)是可以利用同一個(gè)樣式表對(duì)整個(gè)站點(diǎn)的具有相同性質(zhì)的網(wǎng)頁元素進(jìn)行格式修飾，表對(duì)整個(gè)站點(diǎn)的具有相同性質(zhì)的網(wǎng)頁元素進(jìn)行格式修飾，當(dāng)需要更改樣式設(shè)置時(shí)，只要在這個(gè)樣式表中修改，而當(dāng)需要更改樣式設(shè)置時(shí)，只要在這個(gè)樣式表中修改，而不用對(duì)每個(gè)頁面逐個(gè)進(jìn)行修改，簡(jiǎn)化了格式化網(wǎng)頁的工不用對(duì)每個(gè)頁面逐個(gè)進(jìn)行修改，簡(jiǎn)化了格式化網(wǎng)頁的工作。作。5.1 利用CSS 樣式表的網(wǎng)頁實(shí)例 【例例5.55.5】利用利用CSSCSS樣式還可以代替表格進(jìn)行網(wǎng)頁布局，樣式還可以代替表格進(jìn)行網(wǎng)頁布局，這是目前較為流行頁面排版方式，如圖所示。這是目前較為流行頁面排版方式，如圖所示。 該實(shí)例主要采用了該實(shí)例主要采用

14、了divdiv標(biāo)簽標(biāo)簽csscss樣式，涉及到的知識(shí)樣式，涉及到的知識(shí)點(diǎn)有以下幾點(diǎn)：點(diǎn)有以下幾點(diǎn)：v 分析構(gòu)架：畫出構(gòu)架圖；分析構(gòu)架：畫出構(gòu)架圖；v 模塊拆分：分別定義模塊拆分：分別定義DivDiv的的CSSCSS樣式；樣式；v 在網(wǎng)頁中插入在網(wǎng)頁中插入DivDiv標(biāo)簽，在標(biāo)簽，在DivDiv中填充網(wǎng)頁內(nèi)容；中填充網(wǎng)頁內(nèi)容；v 總體調(diào)整：色彩及內(nèi)容調(diào)整，適當(dāng)修改總體調(diào)整：色彩及內(nèi)容調(diào)整，適當(dāng)修改CSSCSS樣式。樣式。5.2 5.2 使用CSS樣式表v5.2.1 CSS5.2.1 CSS樣式表概述樣式表概述 1、樣式表的使用樣式表的使用 CSSCSS樣式表的使用常用的方法有以下兩種：樣式表的使

15、用常用的方法有以下兩種： 頁面內(nèi)嵌法。將樣式表代碼直接寫在頁面內(nèi)嵌法。將樣式表代碼直接寫在HTMLHTML標(biāo)簽的標(biāo)簽的headhead區(qū)。區(qū)。 外部鏈接法。將樣式表寫在一個(gè)獨(dú)立的后綴名為外部鏈接法。將樣式表寫在一個(gè)獨(dú)立的后綴名為CSSCSS文件中，在需要應(yīng)用文件中，在需要應(yīng)用CSSCSS樣式的網(wǎng)頁中鏈接該文件，樣式的網(wǎng)頁中鏈接該文件，在頁面在頁面和和之間用以下代碼調(diào)用。之間用以下代碼調(diào)用。link href=css/master.css rel=stylesheet type=text/css /5.2 5.2 使用CSS樣式表2 2、CSSCSS樣式表語法樣式表語法選擇符選擇符 屬性屬性1

16、1：值：值1 1；屬性；屬性2 2：值：值2 2 參數(shù)說明：參數(shù)說明： 屬性和屬性值之間用冒號(hào)屬性和屬性值之間用冒號(hào)(:)(:)隔開，定義多個(gè)屬性時(shí)，隔開，定義多個(gè)屬性時(shí)，屬性之間用分號(hào)屬性之間用分號(hào)(;)(;)隔開。隔開。1. 1. 創(chuàng)建創(chuàng)建CSSCSS樣式樣式選擇選擇“窗口窗口”菜單菜單“CSS“CSS樣式樣式”命令，打開命令，打開“CSS“CSS樣式樣式”面板，單擊右下角的面板，單擊右下角的“新建新建CSSCSS規(guī)則規(guī)則”按鈕，或選擇按鈕，或選擇“文本文本”菜單菜單“CSS“CSS樣式樣式”“新建新建”命令，彈出命令，彈出“新建新建CSSCSS規(guī)則規(guī)則”對(duì)話框?qū)υ捒? . 5.2.2 在

17、Dreamweaver中定義CSS5.2.2 在Dreamweaver中定義CSS選擇器類型有以下三種：選擇器類型有以下三種：（1 1） 類類 自定義自定義 CSS CSS 規(guī)則，它的特點(diǎn)是靈活多變，可以規(guī)則，它的特點(diǎn)是靈活多變，可以重復(fù)將樣式應(yīng)用于網(wǎng)頁元素。在應(yīng)用時(shí)，它會(huì)在重復(fù)將樣式應(yīng)用于網(wǎng)頁元素。在應(yīng)用時(shí)，它會(huì)在HTMLHTML標(biāo)簽標(biāo)簽內(nèi)加入一個(gè)類（內(nèi)加入一個(gè)類（classclass）的定久來規(guī)定標(biāo)簽中的格式。比）的定久來規(guī)定標(biāo)簽中的格式。比如將類的樣式如將類的樣式mystylemystyle定義于某個(gè)標(biāo)題，那么代碼為：定義于某個(gè)標(biāo)題，那么代碼為： 標(biāo)題標(biāo)題1 1應(yīng)用自定義的樣式應(yīng)用自定義

18、的樣式（2 2） 標(biāo)簽標(biāo)簽 重新定義指定標(biāo)簽的外觀，例如：創(chuàng)建或更改重新定義指定標(biāo)簽的外觀，例如：創(chuàng)建或更改 h1 h1 標(biāo)簽的標(biāo)簽的 CSS CSS 樣式時(shí)，所有用樣式時(shí)，所有用 h1 h1 標(biāo)簽設(shè)置了格式的文標(biāo)簽設(shè)置了格式的文本都會(huì)立即更新，實(shí)現(xiàn)了批量快速更改格式的特點(diǎn)。本都會(huì)立即更新，實(shí)現(xiàn)了批量快速更改格式的特點(diǎn)。5.2.2 在Dreamweaver中定義CSS（3 3） 高級(jí)高級(jí) 在在CSS CSS 選擇器中，它的功能最為強(qiáng)大，可以定義超鏈選擇器中，它的功能最為強(qiáng)大，可以定義超鏈接的特效，定義特定元素組合的格式設(shè)置（例如：接的特效，定義特定元素組合的格式設(shè)置（例如：body,table

19、,tdbody,table,td，用逗號(hào)隔開），定義嵌套的樣式（，用逗號(hào)隔開），定義嵌套的樣式（td td imgimg空格隔開），定義包含特定空格隔開），定義包含特定 id id 屬性的標(biāo)簽的格式屬性的標(biāo)簽的格式設(shè)置。設(shè)置。定義的位置有以下三種情況：定義的位置有以下三種情況： 選擇選擇“僅為該文檔僅為該文檔”，此時(shí)，此時(shí)CSSCSS樣式的代碼會(huì)嵌套樣式的代碼會(huì)嵌套在網(wǎng)頁在網(wǎng)頁和和標(biāo)簽中。標(biāo)簽中。選擇選擇“新建樣式表文件新建樣式表文件”，則彈出，則彈出“保存樣式表文保存樣式表文件為件為”對(duì)話框，如圖對(duì)話框，如圖5.55.5所示，選擇樣式文件的存所示，選擇樣式文件的存儲(chǔ)路徑和文件名，單擊儲(chǔ)路徑和

20、文件名，單擊“保存保存”按鈕，將按鈕，將CSSCSS樣式樣式代碼單獨(dú)存放在一個(gè)代碼單獨(dú)存放在一個(gè)CSSCSS文件。文件。選擇選擇“已有的某已有的某CSSCSS文件文件”，將新建的，將新建的CSSCSS規(guī)則寫入規(guī)則寫入已有的已有的csscss文件中。文件中。比如：選擇定義在比如：選擇定義在“僅對(duì)該文檔僅對(duì)該文檔”，單擊，單擊“確定確定”按鈕后，彈出按鈕后，彈出“H1H1的的CSSCSS規(guī)則定義規(guī)則定義”對(duì)話框，如圖對(duì)話框，如圖所示，在對(duì)話框中進(jìn)行各項(xiàng)的格式設(shè)置，然后單擊所示，在對(duì)話框中進(jìn)行各項(xiàng)的格式設(shè)置，然后單擊“確定確定”按鈕。按鈕。2.2.編輯和刪除編輯和刪除CSSCSS樣式樣式 創(chuàng)建創(chuàng)建C

21、SSCSS樣式后，如果要修改樣式后，如果要修改CSSCSS樣式，在樣式，在“CSS“CSS樣式樣式”面板中，單擊面板中，單擊“CSS“CSS樣式樣式”面板右下角面板右下角的的“編輯編輯”按鈕，進(jìn)入按鈕，進(jìn)入“CSS“CSS規(guī)則定義規(guī)則定義”的對(duì)話框，的對(duì)話框，可進(jìn)行修改。可進(jìn)行修改。 某個(gè)某個(gè)CSSCSS樣式不再需要時(shí)，在樣式不再需要時(shí)，在“CSS“CSS樣式樣式”面板面板中，首先選中某個(gè)樣式，單擊中，首先選中某個(gè)樣式，單擊CSSCSS樣式面板右下角樣式面板右下角的的“刪除刪除”按鈕。按鈕。5.3 CSS 樣式的應(yīng)用 【例例5.65.6】應(yīng)用應(yīng)用CSSCSS樣式設(shè)計(jì)出圖文混排效果，樣式設(shè)計(jì)出圖

22、文混排效果，如圖所示。如圖所示。 此實(shí)例所涉及到的知識(shí)點(diǎn)是此實(shí)例所涉及到的知識(shí)點(diǎn)是CSSCSS樣式的創(chuàng)建和樣式的創(chuàng)建和應(yīng)用，主要包括以下幾個(gè)方面：應(yīng)用，主要包括以下幾個(gè)方面： 背景樣式、文本及列表樣式、方框與邊框樣式、背景樣式、文本及列表樣式、方框與邊框樣式、動(dòng)態(tài)鏈接樣式；動(dòng)態(tài)鏈接樣式； 建立單獨(dú)的建立單獨(dú)的CSSCSS文件，應(yīng)用于多個(gè)網(wǎng)頁。文件，應(yīng)用于多個(gè)網(wǎng)頁。5.3.1 樣式表的應(yīng)用實(shí)例1：背景樣式 的應(yīng)用 在在【例例5.65.6】中，上方桔黃色的橫條其實(shí)是重定義了中，上方桔黃色的橫條其實(shí)是重定義了bodybody標(biāo)簽的網(wǎng)頁背景圖像，背景圖像橫向重復(fù)，網(wǎng)頁元素標(biāo)簽的網(wǎng)頁背景圖像，背景圖像橫

23、向重復(fù)，網(wǎng)頁元素與頁邊距也進(jìn)行了設(shè)置，其操作步驟如下：與頁邊距也進(jìn)行了設(shè)置，其操作步驟如下： 步驟步驟 單擊單擊“窗口窗口”菜單菜單“CSSCSS樣式樣式”命令，打開命令，打開“CSSCSS樣式樣式”面板，單擊右下角的面板，單擊右下角的“新建新建CSSCSS規(guī)則規(guī)則”按鈕，按鈕，彈出彈出“CSSCSS規(guī)則定義規(guī)則定義”的對(duì)話框，選擇的對(duì)話框，選擇“選擇器類型選擇器類型”為為“標(biāo)簽標(biāo)簽”，在，在“標(biāo)簽標(biāo)簽”下拉列表中選擇下拉列表中選擇bodybody，定義在：選，定義在：選擇擇“僅為該文檔僅為該文檔”，單擊，單擊“確定確定”按鈕，彈出按鈕，彈出 “ “bodybody的的CSSCSS規(guī)則定義規(guī)則

24、定義”的對(duì)話框，的對(duì)話框，單擊單擊“背景背景”選項(xiàng)卡，設(shè)置背景圖像為：選項(xiàng)卡，設(shè)置背景圖像為：images/bg.gifimages/bg.gif，單擊單擊“重復(fù)重復(fù)”下拉列表，選擇下拉列表，選擇“橫向重復(fù)橫向重復(fù)”命令。命令。 步驟步驟2 2 設(shè)置頁邊距單擊設(shè)置頁邊距單擊“方框方框”選項(xiàng)卡，在邊界中分選項(xiàng)卡，在邊界中分別設(shè)置上、下均為別設(shè)置上、下均為5050像素，左右均為像素，左右均為100100像素。像素。5.3.2 5.3.2 樣式表的實(shí)例應(yīng)用樣式表的實(shí)例應(yīng)用2 2：文本及列：文本及列表的應(yīng)用表的應(yīng)用 在在【例例5.65.6】中，文本和列表都應(yīng)用了中，文本和列表都應(yīng)用了CSSCSS樣式，

25、分樣式，分別設(shè)置字體、段落、列表的相關(guān)屬性。第一行文本是標(biāo)別設(shè)置字體、段落、列表的相關(guān)屬性。第一行文本是標(biāo)題題1 1（標(biāo)簽為（標(biāo)簽為H1H1），第二行文本是標(biāo)題），第二行文本是標(biāo)題2 2（標(biāo)簽為（標(biāo)簽為H2H2），），正文部分用了列表（標(biāo)簽為正文部分用了列表（標(biāo)簽為ULUL）。）。1 1、字體的樣式設(shè)置、字體的樣式設(shè)置 在在“CSSCSS規(guī)則定義規(guī)則定義”對(duì)話框的對(duì)話框的“類型類型”選項(xiàng)卡中設(shè)選項(xiàng)卡中設(shè)置。置。2 2、文本段落的樣式設(shè)置、文本段落的樣式設(shè)置 在在“CSSCSS規(guī)則定義規(guī)則定義”對(duì)話框的對(duì)話框的“區(qū)塊區(qū)塊”選項(xiàng)卡，設(shè)選項(xiàng)卡，設(shè)置。置。3 3、列表的樣式設(shè)置、列表的樣式設(shè)置 類型：

26、設(shè)置項(xiàng)目符號(hào)或編號(hào)的外觀。類型：設(shè)置項(xiàng)目符號(hào)或編號(hào)的外觀。 項(xiàng)目符號(hào)圖像：指定圖像替代項(xiàng)目符號(hào)的樣式，項(xiàng)目符號(hào)圖像：指定圖像替代項(xiàng)目符號(hào)的樣式，美化項(xiàng)目符號(hào)。美化項(xiàng)目符號(hào)。 重定義項(xiàng)目列表（標(biāo)簽為重定義項(xiàng)目列表（標(biāo)簽為UL)UL)。5.3.3 樣式表的實(shí)例應(yīng)3：方框和邊框 樣式的應(yīng)用 在在【例例5.65.6】中，插入一幅圖像，通過中，插入一幅圖像，通過CSSCSS樣式的應(yīng)用，樣式的應(yīng)用，實(shí)現(xiàn)了圖文混排的效果。該實(shí)例中主要設(shè)置了方框的浮動(dòng)實(shí)現(xiàn)了圖文混排的效果。該實(shí)例中主要設(shè)置了方框的浮動(dòng)和邊界及填充的距離，實(shí)現(xiàn)了圖像與文本之間的環(huán)繞，還和邊界及填充的距離，實(shí)現(xiàn)了圖像與文本之間的環(huán)繞，還設(shè)置了邊框

27、，添加了一個(gè)虛線邊框修飾圖像。這里首先定設(shè)置了邊框，添加了一個(gè)虛線邊框修飾圖像。這里首先定義了一個(gè)類的義了一個(gè)類的CSSCSS規(guī)則，然后將此類應(yīng)用于某個(gè)圖像上。規(guī)則，然后將此類應(yīng)用于某個(gè)圖像上。v 圖像邊距的設(shè)置圖像邊距的設(shè)置v 圖像的邊框的設(shè)置圖像的邊框的設(shè)置5.3.4 樣式表的實(shí)例應(yīng)用4：動(dòng)態(tài)鏈接樣式 簡(jiǎn)單的簡(jiǎn)單的CSSCSS鏈接樣式可以在頁面屬性中的鏈接樣式可以在頁面屬性中的“鏈接鏈接”選項(xiàng)卡中設(shè)置，選項(xiàng)卡中設(shè)置，5.15.1節(jié)中已經(jīng)講過。節(jié)中已經(jīng)講過。 在在【例例5.65.6】中，建立較為復(fù)雜的中，建立較為復(fù)雜的CSSCSS鏈接樣鏈接樣式，當(dāng)鼠標(biāo)經(jīng)過鏈接文字時(shí)，文字顏色會(huì)變色、式，當(dāng)鼠

28、標(biāo)經(jīng)過鏈接文字時(shí)，文字顏色會(huì)變色、字體樣式變粗、出現(xiàn)背景顏色、文字修飾有下劃字體樣式變粗、出現(xiàn)背景顏色、文字修飾有下劃線等。這里還講解兩個(gè)重要的知識(shí)點(diǎn)：如何建立線等。這里還講解兩個(gè)重要的知識(shí)點(diǎn)：如何建立CSSCSS鏈接樣式和如何調(diào)用外部鏈接樣式和如何調(diào)用外部CSSCSS樣式表。樣式表。1.1.建立鏈接建立鏈接CSSCSS樣式樣式 單擊單擊“CSSCSS樣式樣式”面板中的面板中的“新建新建CSSCSS規(guī)則規(guī)則”按鈕，按鈕，選擇器類型：高級(jí)，單擊選擇器類型：高級(jí)，單擊“選擇器選擇器”下拉列表，分別選下拉列表，分別選擇擇a:llinka:llink（鏈接后效果）、（鏈接后效果）、a:visiteda

29、:visited（訪問后效果）、（訪問后效果）、a:hovera:hover（鼠標(biāo)經(jīng)過效果），分別定義其樣式。（鼠標(biāo)經(jīng)過效果），分別定義其樣式。2. 2. 調(diào)用調(diào)用CSSCSS樣式文件樣式文件 其它網(wǎng)頁要應(yīng)用剛才建立的其它網(wǎng)頁要應(yīng)用剛才建立的CSSCSS樣式文件，樣式文件，如何調(diào)用呢？單擊如何調(diào)用呢？單擊“CSS“CSS樣式樣式”面板中的面板中的“附加附加樣式表樣式表”按鈕，彈出按鈕，彈出“鏈接外部樣式表鏈接外部樣式表”的對(duì)話的對(duì)話框，在框，在“文件文件/URL”/URL”文本框中輸入外部文本框中輸入外部CSSCSS文件文件路徑和文件名，添加為選擇路徑和文件名，添加為選擇“鏈接鏈接”選項(xiàng)，將新

30、選項(xiàng)，將新建的樣式文件鏈接到此文件，如圖所示。建的樣式文件鏈接到此文件，如圖所示。 5.3.5 樣式的實(shí)例5：濾鏡效果的應(yīng)用 CSSCSS濾鏡并不是瀏覽器的插件，也不符合濾鏡并不是瀏覽器的插件，也不符合CSSCSS標(biāo)準(zhǔn)，而標(biāo)準(zhǔn)，而是微軟公司為增強(qiáng)瀏覽器功能而特意開發(fā)的并整合在是微軟公司為增強(qiáng)瀏覽器功能而特意開發(fā)的并整合在IEIE瀏瀏覽器中的一類功能集合。由于瀏覽器覽器中的一類功能集合。由于瀏覽器IEIE有著廣泛的使用范有著廣泛的使用范圍，因此圍，因此CSSCSS濾鏡也被廣大設(shè)計(jì)者所喜愛。濾鏡也被廣大設(shè)計(jì)者所喜愛。 CSSCSS濾鏡可以為樣式控制的對(duì)象指定特殊效果。濾鏡可以為樣式控制的對(duì)象指定特

31、殊效果。 注意：注意：CSSCSS濾鏡只能作用于有區(qū)域限制的對(duì)象，如表格、濾鏡只能作用于有區(qū)域限制的對(duì)象，如表格、單元格、圖片等，而不能直接作用于文字，所以把所需要單元格、圖片等，而不能直接作用于文字，所以把所需要增加特效的文本事先放在單元格或?qū)又?，然后?duì)單元格或增加特效的文本事先放在單元格或?qū)又?，然后?duì)單元格或?qū)討?yīng)用層應(yīng)用CSSCSS樣式。樣式。v AlphaAlpha透明效果透明效果v BlurBlur模糊效果模糊效果v ChromaChroma將指定的顏色設(shè)將指定的顏色設(shè)置成透明置成透明v DropshadowDropshadow投影效果投影效果v FlipHFlipH進(jìn)行水平翻轉(zhuǎn)進(jìn)行水平翻轉(zhuǎn)v FlipVFlipV進(jìn)行垂直翻轉(zhuǎn)進(jìn)行垂直翻轉(zhuǎn)v GlowGlow發(fā)光效果發(fā)光效果v GrayscaleGrayscale產(chǎn)生灰階產(chǎn)生灰階v