1、主講：,網(wǎng)頁(yè)設(shè)計(jì)與制作Dreamweaver 8,項(xiàng)目八 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,任務(wù)一 設(shè)置頁(yè)眉CSS規(guī)則,任務(wù)二 設(shè)置購(gòu)物網(wǎng)頁(yè)主體的CSS樣式,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,任務(wù)一,任務(wù)二,任務(wù)三 設(shè)置頁(yè)腳的CSS規(guī)則,小 結(jié),任務(wù)三,實(shí) 訓(xùn),任務(wù)一 設(shè)置頁(yè)眉CSS規(guī)則,CSS是“Cascading Style Sheet”的縮寫，可譯為“層疊樣式表”或“級(jí)聯(lián)樣式表”。形象地說(shuō)，CSS可以使直線顯示為虛線，可以使表格只顯示一條邊框，可以使網(wǎng)頁(yè)背景固定不動(dòng)，可以使文字產(chǎn)生陰影等效果?？梢哉f(shuō)，CSS簡(jiǎn)化了HTML中各種繁瑣的標(biāo)簽，擴(kuò)展了原先的標(biāo)簽功能，能夠?qū)崿F(xiàn)更多的效果。 購(gòu)物網(wǎng)頁(yè)

2、頁(yè)眉部分放置的內(nèi)容通常有站標(biāo)、網(wǎng)站標(biāo)題和商品導(dǎo)航欄等。本任務(wù)主要介紹購(gòu)物網(wǎng)頁(yè)頁(yè)眉的制作及使用CSS樣式控制其外觀的基本方法。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),操作一 定義“body”的CSS規(guī)則,本操作主要介紹使用CSS樣式重新定義標(biāo)簽“body”的文本大小、背景顏色和邊界的方法。通過(guò)本操作的學(xué)習(xí)，應(yīng)該掌握的內(nèi)容主要有：,1.認(rèn)識(shí)【CSS樣式】面板,在主菜單中選擇【窗口】【CSS樣式】命令，即在【CSS樣式】命令前打上“”，即可打開(kāi)【CSS樣式】面板。如果想關(guān)閉【CSS樣式】面板，把該命令前的“”去掉即可。 也可以單擊【CSS樣式】面板右上角菜單圖

3、標(biāo)，在彈出的菜單中選擇【關(guān)閉CSS樣式】命令，或在面板標(biāo)題欄上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇【關(guān)閉CSS樣式】命令來(lái)關(guān)閉【CSS樣式】面板。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,定義“body”的CSS規(guī)則操作動(dòng)畫,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),操作一 定義“body”的CSS規(guī)則,【CSS樣式】面板,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),操作一 定義“body”的CSS規(guī)則,2.重新定義特定標(biāo)簽外觀的方法,在【CSS樣式】面板中單擊 （新建CSS規(guī)則）按鈕，彈出【新建CSS規(guī)則】對(duì)話框，在對(duì)話框中【選擇器類型】選擇【標(biāo)簽（重新定義特定

4、標(biāo)簽的外觀）】選項(xiàng)，在【標(biāo)簽】下拉列表框中選擇需要重新定義樣式的標(biāo)簽，如“body”，然后根據(jù)需要在【定義在】選項(xiàng)選擇適合的選項(xiàng)，最后在【類型】、【背景】、【方框】等對(duì)話框中根據(jù)需要設(shè)置參數(shù)即可。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),操作一 定義“body”的CSS規(guī)則,3. CSS規(guī)則的類型,在【新建CSS規(guī)則】對(duì)話框中，CSS樣式被劃分為3種類型。 （1）類（可應(yīng)用于任何標(biāo)簽） 由用戶自定義的CSS樣式，能夠應(yīng)用到網(wǎng)頁(yè)中的任何標(biāo)簽上，需要用戶手動(dòng)進(jìn)行設(shè)置。如應(yīng)用到一個(gè)段落標(biāo)簽“p”上，那么一個(gè)“class”屬性就會(huì)被添加到文本塊標(biāo)簽上（如“p cl

5、ass=myStyle”）。 （2）標(biāo)簽（重新定義特定標(biāo)簽的外觀） 對(duì)現(xiàn)有的HTML標(biāo)簽進(jìn)行重新定義，當(dāng)創(chuàng)建或改變?cè)摌邮綍r(shí)，所有應(yīng)用了該樣式的格式都會(huì)自動(dòng)更新。例如，當(dāng)創(chuàng)建或修改“h1”標(biāo)簽（標(biāo)題1）的CSS樣式時(shí)，所有用“h1”標(biāo)簽進(jìn)行格式化的文本都將被立即更新。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),操作一 定義“body”的CSS規(guī)則,（3）高級(jí)（ID、偽類選擇器等） 該樣式是對(duì)某些標(biāo)簽組合（如“td h2”表示所有在單元格中出現(xiàn)“h2”的標(biāo)題）或者是含有特定ID屬性的標(biāo)簽（如“#myStyle”表示所有屬性值中有“ID=myStyle”的標(biāo)簽）應(yīng)

6、用樣式。樣式設(shè)置好后，Dreamweaver會(huì)自動(dòng)應(yīng)用該樣式。而“#myStyle1 a:visited,#myStyle2 a:link, #myStyle3”表示可以一次性定義相同屬性的多個(gè)CSS樣式。 另外，在【定義在】選項(xiàng)中，選擇【僅對(duì)該文檔】選項(xiàng)，將會(huì)將新建的CSS規(guī)則寫入到當(dāng)前網(wǎng)頁(yè)文件中，否則將新建的CSS規(guī)則保存到擴(kuò)展名為“*.css”的樣式表文件中。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),操作一 定義“body”的CSS規(guī)則,4.認(rèn)識(shí)【CSS規(guī)則定義】對(duì)話框,（1）【類型】屬性對(duì)話框 【類型】屬性主要用于定義網(wǎng)頁(yè)中文本的字體、大小、顏色、

7、樣式及文本鏈接的修飾線等，其中包含9種CSS屬性，全部是針對(duì)網(wǎng)頁(yè)中的文本的。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),操作一 定義“body”的CSS規(guī)則,（2）【背景】屬性對(duì)話框 【背景】分類屬性的功能主要是在網(wǎng)頁(yè)元素后面加入固定的背景顏色或圖像?！颈尘啊繉傩悦姘逯邪韵?種CSS屬性。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),操作一 定義“body”的CSS規(guī)則,（3）【區(qū)塊】屬性對(duì)話框 CSS中的【區(qū)塊】屬性指的是網(wǎng)頁(yè)中的文本、圖像和層等替代元素，它主要用于控制塊中內(nèi)容的間距、對(duì)齊方式和文字縮進(jìn)等。該屬性面板中

8、包含以下7種CSS屬性。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),操作一 定義“body”的CSS規(guī)則,（4）【方框】屬性對(duì)話框 【方框】屬性包含6種CSS屬性。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),操作二 定義頁(yè)眉的CSS規(guī)則,本操作主要是制作購(gòu)物網(wǎng)頁(yè)頁(yè)眉的內(nèi)容并使用CSS樣式控制其外觀。通過(guò)本操作的學(xué)習(xí)，應(yīng)該掌握的內(nèi)容主要有：,1. 3種選擇器各自的特點(diǎn),【類】CSS樣式用來(lái)存放文檔中標(biāo)簽的共同屬性，網(wǎng)頁(yè)元素使用該類CSS樣式時(shí)，需要添加引用。 【標(biāo)簽】CSS樣式用來(lái)改變或者擴(kuò)展文檔中某些特定的HTML標(biāo)簽的屬

9、性。 【高級(jí)】CSS樣式是改變標(biāo)簽組合、命名ID標(biāo)簽屬性最好的方式。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,定義頁(yè)眉的CSS規(guī)則操作動(dòng)畫,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),操作二 定義頁(yè)眉的CSS規(guī)則,對(duì)話框中的【定義在】選項(xiàng)右側(cè)是兩個(gè)單選項(xiàng)，它們決定了所創(chuàng)建的CSS樣式的保存方法。點(diǎn)選【僅對(duì)該文檔】單選鈕，則將CSS樣式保存在當(dāng)前的文檔中，包含在文檔的頭部標(biāo)簽“”內(nèi)。而如果點(diǎn)選【新建樣式表文件】單選按鈕，則將新建一個(gè)專門用來(lái)保存CSS樣式的文件，它的文件擴(kuò)展名為“*.css”。網(wǎng)頁(yè)文檔要使用樣式表文件中的CSS樣式時(shí)，將通過(guò)“附加樣式表”命令，將CSS文件鏈接或者導(dǎo)入到文檔中。,項(xiàng)目八

10、： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),操作二 定義頁(yè)眉的CSS規(guī)則,2. 創(chuàng)建高級(jí)CSS樣式的方法,以表格為例，首先設(shè)置表格Id名稱，如“TopTable”，在表格被選中的狀態(tài)下，在【CSS樣式】面板中單擊 （新建CSS規(guī)則）按鈕，彈出【新建CSS規(guī)則】對(duì)話框，創(chuàng)建相應(yīng)名稱為“#TopTable”的高級(jí)CSS樣式，然后在【類型】、【背景】、【方框】等對(duì)話框中根據(jù)需要設(shè)置參數(shù)即可。,要設(shè)置表格的【填充】和【間距】屬性可以通過(guò)表格【屬性】面板進(jìn)行設(shè)置，不能通過(guò)【方框】分類中的【填充】和【邊界】進(jìn)行設(shè)置。對(duì)表格應(yīng)用【方框】中的【邊界】屬性只影響表格本身所在塊元素周圍

11、的空格填充數(shù)量，與表格本身無(wú)關(guān)。,需要注意的是，在【方框】分類中的【填充】和【邊界】選項(xiàng)與表格【屬性】面板中的【填充】和【間距】選項(xiàng)是兩個(gè)不同的概念。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),操作二 定義頁(yè)眉的CSS規(guī)則,3.創(chuàng)建和應(yīng)用類樣式的方法,以單元格為例，在【CSS樣式】面板中單擊 （新建CSS規(guī)則）按鈕，彈出【新建CSS規(guī)則】對(duì)話框，在【選擇器類型】選項(xiàng)組中點(diǎn)選【類（可應(yīng)用于任何標(biāo)簽）】單選按鈕，在【名稱】文本框中輸入CSS樣式名稱，“.td_1”，然后在【類型】、【背景】、【方框】等對(duì)話框中根據(jù)需要設(shè)置參數(shù)即可。CSS樣式定義完畢后，在單元格【

12、屬性】面板的【樣式】下拉列表中選擇定義的樣式名稱，如“td_1”，將其應(yīng)用到單元格上。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),操作二 定義頁(yè)眉的CSS規(guī)則,4.創(chuàng)建基于表格的超級(jí)鏈接高級(jí)CSS樣式的方法,首先設(shè)定表格Id名稱，如“NavTable”，然后創(chuàng)建基于該表格的超級(jí)鏈接高級(jí)CSS樣式，如“#NavTable a:link,#NavTable a:visited”。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),操作二 定義頁(yè)眉的CSS規(guī)則,接著創(chuàng)建超級(jí)鏈接懸停效果的高級(jí)CSS樣式“#NavTable a:hover

13、”。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),在本項(xiàng)目制作的購(gòu)物網(wǎng)頁(yè)中，購(gòu)物網(wǎng)頁(yè)左側(cè)部分仍然是商品的導(dǎo)航欄，中間和右側(cè)部分為具體商品介紹和新品推薦等。本任務(wù)主要介紹購(gòu)物網(wǎng)頁(yè)主體部分的制作及使用CSS樣式控制網(wǎng)頁(yè)外觀的基本方法。,任務(wù)二 設(shè)置購(gòu)物網(wǎng)頁(yè)主體的CSS樣式,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),操作一 設(shè)置左側(cè)欄目CSS規(guī)則,本操作主要是制作購(gòu)物網(wǎng)頁(yè)左側(cè)欄目。通過(guò)本操作的學(xué)習(xí)，應(yīng)該掌握的內(nèi)容主要有：,1.左側(cè)欄目標(biāo)題單元格CSS樣式的設(shè)置方法,創(chuàng)建類樣式“.LeftTableTd”，在【.LeftTableT

14、d的CSS規(guī)則定義】對(duì)話框的【類型】分類中，設(shè)置文本大小為“14像素”，行高為“22像素”，文本顏色為“#FFFFFF”。在【背景】分類中，設(shè)置背景圖像為“images/left_top.jpg”，不重復(fù)，水平位置為“左對(duì)齊”，垂直位置為“居中”。在【方框】分類中，設(shè)置【左】填充為“10像素”。最后通過(guò)【屬性】面板的【樣式】下拉列表，將“.LeftTableTd”樣式應(yīng)用到表格的標(biāo)題單元格上。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,設(shè)置左側(cè)欄目和CSS規(guī)則操作動(dòng)畫,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),操作一 設(shè)置左側(cè)欄目CSS規(guī)則,2.左側(cè)欄目?jī)?nèi)容單元格CSS樣式的設(shè)置方法,選定單元格，右

15、鍵單擊文檔左下角的“”標(biāo)簽，在彈出的快捷菜單中選擇【快速標(biāo)簽編輯器】命令，打開(kāi)快速標(biāo)簽編輯器，在其中添加ID名稱，如“id=”LeftTableNavTD”，然后分別選定其他單元格，并右鍵單擊文檔左下角的“”標(biāo)簽，在彈出的快捷菜單中選擇【設(shè)置ID】【LeftTableNavTD】命令即可設(shè)置與上一單元格相同的ID。最后創(chuàng)建基于該單元格的超級(jí)鏈接高級(jí)CSS樣式“#LeftTableNavTD a:link, #LeftTableNavTD a:visited”和“#LeftTableNavTD a:hover”。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),操作

16、一 設(shè)置左側(cè)欄目CSS規(guī)則,在本操作中，沒(méi)有設(shè)置CSS樣式之前，左側(cè)偶數(shù)單元格中的內(nèi)容是“擠”在一起的，當(dāng)為命名ID的單元格設(shè)置樣式以后，每個(gè)帶鏈接的文本都成行排列，這主要是由于設(shè)置了【區(qū)塊】分類中的【顯示】屬性為“塊”，這是設(shè)置文本鏈接的技巧。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),操作二 設(shè)置中間欄目的CSS規(guī)則,本操作主要是制作購(gòu)物網(wǎng)頁(yè)中間部分的內(nèi)容。通過(guò)本操作的學(xué)習(xí)，應(yīng)該掌握的內(nèi)容主要有：,網(wǎng)頁(yè)元素邊框的效果是在【CSS規(guī)則定義】對(duì)話框的【邊框】分類對(duì)話框中進(jìn)行設(shè)置的，該屬性對(duì)話框中共包括3種CSS屬性。 【樣式】：屬性名為“border-sty

17、le”，用于設(shè)定邊框線的樣式，包括【無(wú)】（none，無(wú)邊框）、【虛線】（dotted，邊框?yàn)辄c(diǎn)線）、【點(diǎn)劃線】（dashed，邊框?yàn)殚L(zhǎng)短線）、【實(shí)線】（solid，邊框?yàn)閷?shí)線）、【雙線】（double，邊框?yàn)殡p線）、【槽狀】（groove）、【脊?fàn)睢浚╮idge）、【凹陷】（inset）、【凸出】（outset，前面4種選擇根據(jù)不同顏色設(shè)置不同的三維效果）9個(gè)選項(xiàng)。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,設(shè)置中間欄目的CSS規(guī)則操作動(dòng)畫,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),操作二 設(shè)置中間欄目的CSS規(guī)則,【寬度】：屬性名為“border-width”，用于控制邊框的寬度，包括【上】（bo

18、rder-top-width，頂邊框的寬度）、【右】（border-right-width，右邊框的寬度）、【下】（border-bottom-width，底邊框的寬度）、【左】（border-left-width，左邊框的寬度）4個(gè)選項(xiàng)。 【顏色】：屬性名為“border-color”，用于設(shè)置各邊框的顏色。如果想使邊框的4條邊顯示不同的顏色，可以在設(shè)置中分別列出各種顏色，如頂邊框的顏色（border-top-color: #FF0000），右邊框的顏色（border-right-color: #00FF00），底邊框的顏色（border-bottom-color: #0000FF），左邊框

19、的顏色（border-left-color: #FFFF00）。瀏覽器將第1種顏色理解為頂邊框的顏色參數(shù)值，第2種顏色為右邊框，然后是底邊框，最后是左邊框。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),操作二 設(shè)置中間欄目的CSS規(guī)則,【邊框】分類對(duì)話框,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),操作三 設(shè)置右側(cè)欄目的CSS規(guī)則,本操作主要是制作購(gòu)物網(wǎng)頁(yè)右鍘部分的內(nèi)容。通過(guò)本操作的學(xué)習(xí)，應(yīng)該掌握的內(nèi)容主要有：,1. 【列表】屬性對(duì)話框,用于控制列表內(nèi)的各項(xiàng)元素，包含以下3種CSS屬性。 （1）【類型】屬性用于確定列表內(nèi)每一項(xiàng)

20、前使用的符號(hào)。 （2）【項(xiàng)目符號(hào)圖像】作用是將列表前面的符號(hào)換為圖形。 （3）【位置】屬性用于描述列表的位置，有【外】（在方框之外顯示）和【內(nèi)】（在方框之內(nèi)顯示）兩個(gè)選項(xiàng)。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,設(shè)置右側(cè)欄目的CSS規(guī)則操作動(dòng)畫,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),操作三 設(shè)置右側(cè)欄目的CSS規(guī)則,2. 【定位】屬性對(duì)話框,可疑使網(wǎng)頁(yè)元素隨處浮動(dòng)，這對(duì)于一些固定元素（如表格）來(lái)說(shuō)，是一種功能的擴(kuò)展，而對(duì)于一些浮動(dòng)元素（如層）來(lái)說(shuō)，卻是有效地、用于精確控制其位置的方法。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),操作三 設(shè)置右側(cè)欄目的CSS

21、規(guī)則,3. 【擴(kuò)展】屬性對(duì)話框,包含兩部分：【分頁(yè)】的作用是為打印的頁(yè)面設(shè)置分頁(yè)符；【視覺(jué)效果】的作用是為網(wǎng)頁(yè)中的元素施加特殊效果，其中【光標(biāo)】選項(xiàng)可以指定在某個(gè)元素上要使用的光標(biāo)形狀，【濾鏡】可以為網(wǎng)頁(yè)元素施加多種特殊的顯示效果，如陰影、模糊、透明、光暈等。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),任務(wù)三 設(shè)置頁(yè)腳的CSS規(guī)則,本任務(wù)主要是制作購(gòu)物網(wǎng)頁(yè)頁(yè)腳部分的內(nèi)容。通過(guò)本任務(wù)的學(xué)習(xí)，應(yīng)該掌握的內(nèi)容主要有：,1. 通過(guò)CSS樣式制作方框效果的方法,創(chuàng)建類樣式“.FootP”，在CSS規(guī)則定義對(duì)話框的【類型】分類中設(shè)置【行高】為“40像素”，在【背景】分類

22、中設(shè)置背景顏色為“#3DA4A3”，在【方框】分類中設(shè)置寬度為“775像素”，邊界均為“0”，在【邊框】分類中設(shè)置所有邊框樣式均為“實(shí)線”，寬度為“1像素”，顏色為“#0082FE”。將光標(biāo)置于頁(yè)腳文本上，然后在【屬性】面板的【樣式】下拉列表中選擇“FootP”，即實(shí)現(xiàn)如圖所示效果。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,設(shè)置頁(yè)腳的CSS規(guī)則操作動(dòng)畫,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),任務(wù)三 設(shè)置頁(yè)腳的CSS規(guī)則,2. 修改CSS樣式的方法,（1）第1種是在【CSS樣式】面板中雙擊樣式名稱，或先選中樣式再單擊面板底部的 （編輯）按鈕，或在鼠標(biāo)右鍵快捷菜單中選擇【編輯】命令打開(kāi)【CSS規(guī)則

23、定義】對(duì)話框進(jìn)行可視化定義或修改。 （2）第2種是在【CSS樣式】面板中先選中樣式名稱，然后在【CSS樣式】面板的屬性列表框中進(jìn)行定義或修改。 （3）第3種是在【CSS樣式】面板中用鼠標(biāo)右鍵單擊樣式名稱，在其快捷菜單中選擇【轉(zhuǎn)到代碼】命令將進(jìn)入文檔中源代碼處，可以直接修改源代碼。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)頁(yè)外觀,任務(wù)一,任務(wù)二,小 結(jié),任務(wù)三,實(shí) 訓(xùn),任務(wù)三 設(shè)置頁(yè)腳的CSS規(guī)則,3. 刪除CSS樣式的方法,（1）第1種是在【CSS樣式】面板中先選中樣式名稱再單擊面板底部的 （刪除）按鈕進(jìn)行刪除。 （2）第2種是在【CSS樣式】面板中用鼠標(biāo)右鍵單擊樣式名稱，在其快捷菜單中選擇【刪除】命令。 （3）第3種是在【CSS樣式】面板中用鼠標(biāo)右鍵單擊樣式名稱，在其快捷菜單中選擇【轉(zhuǎn)到代碼】命令進(jìn)入文檔源代碼處，直接刪除源代碼。,4.對(duì)樣式重新命名的方法,在【CSS樣式】面板中用鼠標(biāo)右鍵單擊樣式名稱，在其快捷菜單中選擇【重命名】命令或直接在源代碼中進(jìn)行修改。,項(xiàng)目八： 使用CSS控制購(gòu)物網(wǎng)