任務(wù)4-構(gòu)建網(wǎng)站層疊樣式表-動(dòng)畫版課件

1、任務(wù)4 : 構(gòu)建網(wǎng)站層疊樣式表網(wǎng)頁(yè)設(shè)計(jì)與制作(HTML+CSS+Javascript)網(wǎng)頁(yè)設(shè)計(jì)與制作課程組目標(biāo)TARGET知識(shí)目標(biāo)了解CSS3簡(jiǎn)介；掌握CSS樣式設(shè)置規(guī)則；掌握CSS樣式的調(diào)用方法；掌握CSS基礎(chǔ)選擇器的使用方法；掌握CSS3新增選擇器的使用方法;掌握CSS的繼承與層疊性的應(yīng)用。 1 任務(wù)描述 2 初識(shí)CSS3 3 CSS的使用 4 CSS3選擇器 5 CSS的繼承與層疊 6 綜合實(shí)例 7 任務(wù)實(shí)施 8 任務(wù)拓展1任務(wù)描述Part使用CSS實(shí)現(xiàn)門戶網(wǎng)站導(dǎo)航 本任務(wù)就是在任務(wù)3的基礎(chǔ)之上，編寫基本的CSS3樣式表，實(shí)現(xiàn)網(wǎng)站頭部的頁(yè)面效果。任務(wù)描述：使用CSS實(shí)現(xiàn)門戶網(wǎng)站導(dǎo)航2初識(shí)

2、CSS3Part CSS3簡(jiǎn)介主流瀏覽器對(duì)CSS3的支持情況CSS3簡(jiǎn)介CSS即層疊樣式表，是CascadingStyle Sheet的縮寫。只要對(duì)相應(yīng)的代碼做一些簡(jiǎn)單的修改，就可以改變同一頁(yè)面的不同部分，或者頁(yè)數(shù)不同的網(wǎng)頁(yè)的外觀和格式。在網(wǎng)頁(yè)制作時(shí)采用層疊樣式表技術(shù)，可以有效地對(duì)頁(yè)面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。例如：禪意花園（/tr/zh-cn/）。舉例演示禪意花園 http:/tr/zh-cn/CSS3簡(jiǎn)介核心內(nèi)容：盒子模型、列表模塊、超鏈接方式 、語(yǔ)言模塊 、背景和邊框 、文字特效、多欄布局等。CSS3是CSS技術(shù)的升級(jí)版本，CSS3語(yǔ)言開(kāi)發(fā)是朝著模塊化發(fā)展的。

3、盒子模型列表模塊超鏈接方式語(yǔ)言模塊背景邊框多欄布局文字特效主流瀏覽器瀏覽器就是一種把再互聯(lián)網(wǎng)上的文本文檔和其他文件翻譯成網(wǎng)頁(yè)的軟件，通過(guò)瀏覽器可以快捷地閱讀Internet上的內(nèi)容。IEFireFoxChromeOperaSafariCSS3模塊名稱Chrome30Safari5Firefox3.6Opera11IE10RGBA（RGB色彩模式+Alpha透明度）HSLA（HSL色彩模式+Alpha透明度）Multiple Backgrounds（多背景）Border Image（邊框圖像）Border Radius（邊框半徑/圓角）Box Shadow（盒陰影）Opacity（不透明度）CS

4、S Animations（CSS動(dòng)畫）CSS Columns（CSS多列布局）CSS Gradients（CSS漸變）CSS Reflections（CSS映像）CSS Transforms（CSS 轉(zhuǎn)換）CSS Transforms 3D（CSS 3D轉(zhuǎn)換）CSS Transitions（CSS 過(guò)渡）CSS FontFace（CSS 字體）3CSS的使用PartCSS樣式設(shè)置規(guī)則CSS樣式的調(diào)用CSS基礎(chǔ)選擇器 CSS樣式設(shè)置規(guī)則CSS樣式設(shè)置規(guī)則由選擇器和聲明部分組成。語(yǔ)法：選擇器 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;選擇器綠色部分為選擇器，大括號(hào)部分為聲明部分，包

5、括屬性與屬性值。聲明由屬性和值兩部分組成。屬性和值用英文冒號(hào)“：”鏈接。多個(gè)“鍵值對(duì)”之間用英文分號(hào)“；”進(jìn)行區(qū)分，最后一個(gè)分號(hào)可以省略，為了規(guī)范最好保留。舉例： P color: red; font-size: 18px; line-height: 30px; 聲明部分屬性屬性值注意：選擇器命名統(tǒng)一使用英文、英文簡(jiǎn)寫或者統(tǒng)一使用拼音。選擇器命名盡量不縮寫，除非是一看就懂得單詞。在編寫CSS代碼時(shí)，為了提高代碼的可讀性，通常會(huì)加上CSS注釋，可以使用/*/（斜杠和星號(hào)）。CSS樣式中的類和id選擇器嚴(yán)格區(qū)分大小寫，屬性和值不區(qū)分大小寫，按照書寫習(xí)慣一般將“選擇器、屬性和值”都采用小寫的方式 。

6、多個(gè)屬性之間必須用英文狀態(tài)下的分號(hào)隔開(kāi)，最后用的分號(hào)可以省略，但是為了便于增加新樣式最好保留。如果屬性的值由多個(gè)單詞組成且中間包含空格，則必須為這個(gè)屬性值加上英文狀態(tài)下的引號(hào)。 例如： pfont-family: microsoft yahei;CSS常見(jiàn)命名規(guī)則名稱含義名稱含義header頁(yè)頭container容器footer頁(yè)腳nav導(dǎo)航aside或sidebar側(cè)邊欄column欄目wrapper或wrap頁(yè)面外圍控制整體布局寬度left左側(cè)right右側(cè)center中間loginbar登錄條logo標(biāo)志banner廣告main頁(yè)面主體hot熱點(diǎn)news新聞download下載subna

7、v子導(dǎo)航menu菜單submenu子菜單search搜索friendlink友情鏈接copyright版權(quán)scroll滾動(dòng)content內(nèi)容tab標(biāo)簽頁(yè)list列表msg提示信息title欄目標(biāo)題joinus加入guild指南service服務(wù)register注冊(cè)status狀態(tài)vote投票partner合伙伙伴 CSS樣式的調(diào)用方法01行內(nèi)樣式表02內(nèi)部樣式表03鏈接樣式表插入樣式表的方法：行內(nèi)樣式表、內(nèi)部樣式表、鏈接樣式表。 1. 行內(nèi)樣式表語(yǔ)法：舉例：直接在HTML代碼行中加入樣式規(guī)則。適用于指定網(wǎng)頁(yè)內(nèi)的某一小段文字的顯示規(guī)則，效果僅可控制該標(biāo)簽。舉例演示【實(shí)例4-1】行內(nèi)樣式表應(yīng)用。注

8、意：行內(nèi)樣式也可以通過(guò)標(biāo)簽的屬性來(lái)控制樣式，由于沒(méi)有做到結(jié)構(gòu)與表現(xiàn)的分離，所以，不建議使用。只有在樣式規(guī)格較少且只在該元素上使用一次，或者需要臨時(shí)修改某個(gè)樣式規(guī)則時(shí)使用。 2. 內(nèi)部樣式表語(yǔ)法：選擇器樣式屬性:屬性值;內(nèi)部樣式表是將樣式表嵌入到HTML文件的文件頭中的方式。舉例：pcolor:red;舉例演示【實(shí)例4-2】?jī)?nèi)部樣式表。注意：行內(nèi)樣式表與內(nèi)部樣式表的引用方法都屬于引用內(nèi)部樣式表，即樣式表規(guī)則的有效范圍只限于該HTML文件，在該文件以外將無(wú)法使用。但這也具有一定的局限性，對(duì)于一個(gè)網(wǎng)站的構(gòu)建，不建議使用這種方式，因?yàn)樗荒荏w現(xiàn)CSS代碼的重用優(yōu)勢(shì)。3. 鏈接樣式表語(yǔ)法： 鏈接樣式表將

9、一個(gè)外部樣式表鏈接到HTML文檔中。鏈接的CSS文件的位置文檔的類型鏈接樣式表舉例演示【實(shí)例4-3】鏈接樣式表。 基礎(chǔ)選擇器 1. 標(biāo)簽選擇器語(yǔ)法：標(biāo)簽名屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;標(biāo)簽選擇符也稱為類型選擇符，是指用HTML標(biāo)簽名稱作為選擇器，HTML中的所有標(biāo)簽都可以作為標(biāo)簽選擇符。舉例：td font-size: 14px;color: #ff0000;line-height:18px;font-family: 微軟雅黑;2.類選擇器語(yǔ)法：.類名屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;類選擇器能夠把相同的元素分類定義成不同的樣式。定義類選擇符

10、時(shí)，在自定義類的前面需要加一個(gè)英文點(diǎn)號(hào)“.”。舉例：定義h3標(biāo)簽選擇器為“.redtitle”，例如：.redtitle font-size: 20px;color: #ff0000;調(diào)用的方法是通過(guò)標(biāo)簽的class屬性調(diào)用，例如：類選擇器舉例演示【實(shí)例4-4】類選擇器的使用。注意：類名的第一個(gè)字符不能使用數(shù)字，并且嚴(yán)格區(qū)分大小寫，一般采用小寫的英文字符。3. ID選擇器語(yǔ)法：#id名屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;id選擇器是用來(lái)對(duì)某個(gè)單一元素定義單獨(dú)的樣式。id選擇器使用“#”進(jìn)行標(biāo)識(shí)，后面緊跟id名。舉例：定義h3標(biāo)簽選擇器為“.redtitle”，例如：#re

11、dtitle font-size: 20px;color: #ff0000;調(diào)用的方法是通過(guò)標(biāo)簽的id屬性調(diào)用，例如：類選擇器舉例演示【實(shí)例4-5】id選擇器的使用。4. 標(biāo)簽指定式選擇器語(yǔ)法： 標(biāo)簽名.類名屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; 標(biāo)簽名#id名屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;標(biāo)簽指定選擇器又稱交集選擇器，由兩個(gè)選擇器構(gòu)成，其中第一個(gè)為標(biāo)簽選擇器，第二個(gè)為class選擇器或id選擇器，兩個(gè)選擇器之間不能有空格。舉例演示【實(shí)例4-6】標(biāo)簽指定式選擇器的使用。5.包含選擇器語(yǔ)法： 選擇器1 選擇器2 屬性1:屬性值1; 屬性2:屬性值2

12、; 屬性3:屬性值3;包含選擇器用來(lái)選擇元素或元素組的后代，也稱后代選擇器，其寫法就是把外層標(biāo)簽寫在前面，內(nèi)層標(biāo)簽寫在后面，中間用空格分隔。注意中間的空格舉例演示【實(shí)例4-7】包含選擇器的使用。6. 群組選擇器語(yǔ)法： 選擇器1，選擇器2 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;群組選擇器是各個(gè)選擇器通過(guò)逗號(hào)”，”連接而成的。注意中間的逗號(hào)“，”如果某些選擇器定義的樣式完全相同或部分相同，就可以利用群組選擇器為它們定義相同的CSS樣式。7. 通配符選擇器語(yǔ)法： * 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;通配符選擇器用星形標(biāo)示號(hào)“*”表示，它是所有選擇器中作用

13、范圍最廣的，能匹配頁(yè)面中所有的元素。注意星號(hào)“*”表示所有元素例如： *margin:0px; padding:0px;設(shè)置所有元素的外邊距margin和內(nèi)邊距padding都為0像素。4CSS3選擇器Part屬性選擇器關(guān)系選擇器鏈接偽類選擇器結(jié)構(gòu)偽類選擇器偽元素選擇器UI元素狀態(tài)偽類選擇器 屬性選擇器屬性選擇器可以根據(jù)元素的屬性及屬性值來(lái)選擇元素。包括三類:Eatt=”value”、E att$=”value”、E att*=”value”屬性名稱含義Eatt=”value”選擇名稱為E的標(biāo)簽，且該標(biāo)簽定義了att屬性，att屬性值包含前綴為value的子字符串。class屬性以font開(kāi)頭

14、的h2元素 h2class=font font-family: 微軟雅黑; 例如：舉例演示屬性名稱含義E att$=”value”選擇名稱為E的標(biāo)簽，且該標(biāo)簽定義了att屬性，att屬性值包含后綴為value的子字符串。class屬性以title結(jié)尾的所有元素class$=title color: red; 例如：舉例演示屬性名稱含義E att*=”value”選擇名稱為E的標(biāo)簽，且該標(biāo)簽定義了att屬性，att屬性值包含value的子字符串。所有href屬性包含www字符串的a元素ahref*=www color: green; 例如：舉例演示 關(guān)系選擇器關(guān)系選擇器主要包含子代選擇器（EF）

15、、相鄰兄弟選擇器（E+F）、普通兄弟選擇器（EF）。屬性名稱含義子代選擇器（EF）選擇所有作為E元素的直接子元素F，對(duì)更深一層的元素不起作用，用“”表示。子代選擇器, E元素的直接子元素Fdiva color: red;例如：舉例演示屬性名稱含義兄弟相鄰選擇器（E+F）選擇緊貼在E元素之后的F元素，用“+”表示。選擇相鄰的第一個(gè)兄弟元素。相鄰兄弟選擇器，p元素相鄰的第一個(gè)兄弟span元素p+spantext-decoration: line-through;例如：舉例演示屬性名稱含義普通兄弟選擇器（EF）選擇E元素之后的所有兄弟元素F，作用于多個(gè)元素，用“”隔開(kāi)。普通兄弟選擇器，p元素所有兄弟

16、span元素pspancolor: green;例如：舉例演示 鏈接偽類選擇器偽類不是真正意義上的類，但它確實(shí)作為一個(gè)類來(lái)使用。當(dāng)在同一網(wǎng)頁(yè)中使用兩種以上不同樣式的超鏈接，就采用偽類與類名或者id相結(jié)合的方式實(shí)現(xiàn)。偽類名稱含義a:link未訪問(wèn)時(shí)的超級(jí)鏈接的狀態(tài)a:visited訪問(wèn)后的超級(jí)鏈接的狀態(tài)a:hover鼠標(biāo)經(jīng)過(guò)、懸停時(shí)超級(jí)鏈接的狀態(tài)a:active鼠標(biāo)單擊不動(dòng)時(shí)超級(jí)鏈接的狀態(tài)超鏈接偽類及其含義舉例演示 結(jié)構(gòu)偽類選擇器1.基本的結(jié)構(gòu)性偽類選擇器表達(dá)式描述:root將樣式綁定到頁(yè)面的根元素中。所謂根元素，是指位于文檔樹(shù)中最頂層結(jié)構(gòu)的元素，在HTML頁(yè)面中就是指包含著整個(gè)頁(yè)面的部分。:n

17、ot想對(duì)某個(gè)結(jié)構(gòu)元素使用樣式，但想排除這個(gè)結(jié)構(gòu)元素下的子結(jié)構(gòu)元素，就是用:not偽類。:empty指定當(dāng)元素內(nèi)容為空白時(shí)使用的樣式。:target對(duì)頁(yè)面中某個(gè)target元素指定樣式，該樣式只在用戶點(diǎn)擊了頁(yè)面中的鏈接，并且跳轉(zhuǎn)到target元素后生效。表達(dá)式描述:root將樣式綁定到頁(yè)面的根元素中。所謂根元素，是指位于文檔樹(shù)中最頂層結(jié)構(gòu)的元素，在HTML頁(yè)面中就是指包含著整個(gè)頁(yè)面的部分。：root偽類選擇器，使得所有文本為藍(lán)色:root color: blue;例如：表達(dá)式描述:not相對(duì)某個(gè)結(jié)構(gòu)元素使用樣式，但想排除這個(gè)結(jié)構(gòu)元素下的子結(jié)構(gòu)元素，就是用:not偽類。：not偽類選擇器，body

18、中標(biāo)簽以外的文本都變成了紅色body *:not(h2)color: red;例如：表達(dá)式描述:empty指定當(dāng)元素內(nèi)容為空白時(shí)使用的樣式。:empty偽類選擇器，使得標(biāo)簽內(nèi)為空的元素背景顏色為紅色li:emptybackground-color: red;例如：舉例演示表達(dá)式描述:target對(duì)頁(yè)面中某個(gè)target元素指定樣式，該樣式只在用戶點(diǎn)擊了頁(yè)面中的鏈接，并且跳轉(zhuǎn)到target元素后生效。:target偽類選擇器，對(duì)某個(gè)target元素指定樣式:target background-color: yellow;例如：舉例演示子元素偽類選擇器表達(dá)式描述: first-child對(duì)父元素中

19、的第一個(gè)子元素指定樣式例如p:first-child表示第一個(gè)p元素的樣式: last-child對(duì)父元素中的最后一個(gè)子元素指定樣式例如 p:last-chidl表示倒數(shù)第一個(gè)p元素的樣式: only-child當(dāng)某個(gè)父元素中只有一個(gè)子元素時(shí)使用的樣式: nth-child(n)對(duì)指定序號(hào)的子元素設(shè)置樣式(正數(shù))，表示第幾個(gè)子元素例如：p:nth-child(2) 表示第2個(gè)p元素的樣式: nth-last-child(n)對(duì)指定序號(hào)的子元素設(shè)置樣式(正數(shù)) ，表示倒數(shù)第幾個(gè)子元素例如：p:nth-last-child(2)表示倒數(shù)第2個(gè)p元素的樣式:nth-child(even)所有正數(shù)第偶

20、數(shù)個(gè)子元素，等同于:nth-child(2n):nth-child(odd)所有正數(shù)第奇數(shù)個(gè)子元素，等同于:nth-child(2n+1):nth-last-child(even)所有倒數(shù)第偶數(shù)個(gè)子元素:nth-last-child(odd)所有倒數(shù)第奇數(shù)個(gè)子元素:nth-of-type(n)用于匹配屬于父元素的特定類型的第n個(gè)子元素: nth-last-of-type(n)用于匹配屬于父元素的特定類型的倒數(shù)第n個(gè)子元素舉例演示01:before偽元素02after偽元素 偽元素選擇器 偽元素選擇器是針對(duì)CSS中已定義的偽元素使用的選擇器。CSS中主要使用的偽元素為“:before”偽元素選擇

21、器和“:after”偽元素選擇器。偽元素(雙冒號(hào), 例如:before)，css3中的偽類是（單冒號(hào):before ），通常兩種寫法都可以。 1. :before偽元素選擇器語(yǔ)法： element:before content:文字/url(); :before偽元素選擇器用于在被選元素的內(nèi)容前面插入內(nèi)容，必須配合“content”屬性來(lái)指定要插入的具體內(nèi)容。element表示元素，被選元素位于“:before”之前“ ”中的content屬性用來(lái)指定要插入的具體內(nèi)容，該內(nèi)容既可以為文本也可以為圖片，大家還可以根據(jù)其他需要添加相應(yīng)的樣式。 2. :after偽元素選擇器語(yǔ)法： element:

22、after content:文字/url(); :after偽元素選擇器用于在被選元素的內(nèi)容之后插入內(nèi)容，必須配合“content”屬性來(lái)指定要插入的具體內(nèi)容。舉例演示 UI（User Interface，用戶界面）元素狀態(tài)偽類選擇器，是指只有當(dāng)元素處于某種狀態(tài)下時(shí)才能使用的樣式，默認(rèn)狀態(tài)不起作用。不起作用。表達(dá)式描述E:hover鼠標(biāo)指針移動(dòng)到某個(gè)文本框控件上的樣式E:active元素被激活(鼠標(biāo)在元素上按下還沒(méi)有松開(kāi))時(shí)使用的樣式E:focus元素獲得光標(biāo)焦點(diǎn)時(shí)使用的樣式，主要是在文本框控件獲得焦點(diǎn)并進(jìn)行文字輸入的時(shí)候使用E:enable指定當(dāng)元素處于可用狀態(tài)時(shí)的樣式E:disable指定

23、當(dāng)元素處于不可用狀態(tài)時(shí)的樣式E:read-only指定當(dāng)元素處于只讀狀態(tài)時(shí)的樣式Firefox瀏覽器中要寫成 -moz-read-onlyE:read-write指定當(dāng)元素處于非只讀狀態(tài)時(shí)的樣式Firefox瀏覽器中要寫成：-moz-write-onlyE:checked指定當(dāng)表單中的radio單選框或checkbox復(fù)選框處于選取狀態(tài)時(shí)的樣子Firefox瀏覽器中要寫成：-moz-checkedE:default指定當(dāng)頁(yè)面打開(kāi)時(shí)默認(rèn)處于選區(qū)狀態(tài)的radio或checkbox控件的樣式E:indeterminate指定當(dāng)頁(yè)面打開(kāi)時(shí)，如果一組單選框中任何一個(gè)單選框都沒(méi)有被設(shè)定為選取狀態(tài)時(shí)整組單選

24、框的樣式，如果用戶選取了一個(gè)單選框，則該樣式被取消E:selection指定當(dāng)元素處于選中狀態(tài)時(shí)的樣式，這里需要注意的是:在Firefox瀏覽器下使用時(shí)，需要寫成-moz-selection的形式舉例演示5CSS的繼承與層疊PartCSS的繼承性 CSS的層疊性例如：bodycolor:red;font-size:20pt;HTML結(jié)構(gòu)文檔：好好學(xué)習(xí)天天向上在頁(yè)面顯示時(shí)，body標(biāo)簽定義文本的顏色為紅色，文字大小為20pt，段落標(biāo)簽雖然沒(méi)有定義樣式，但是里面的文字會(huì)繼承body的樣式，最終顯示為紅色，大小為20pt。這就是CSS的繼承性。 CSS的繼承性CSS的繼承性是被包含的子元素將擁有外層

25、元素的某些樣式。舉例演示注意：實(shí)際開(kāi)發(fā)中，通常會(huì)對(duì)使用較多的字體、文本屬性等網(wǎng)頁(yè)中通用的樣式可以使用繼承。所以會(huì)在body元素中統(tǒng)一設(shè)置字體、字號(hào)、顏色、行距等樣式。并不是所有的屬性都可以繼承，對(duì)于元素的布局屬性、盒模型屬性都不能繼承。例如：背景屬性、邊框?qū)傩浴⑼膺吘鄬傩?、?nèi)邊距屬性、定位屬性、布局屬性、元素寬高屬性。例如： bodycolor:red;font-size:30pt;ptext-decoration:underline;spancolor:blue;HTML結(jié)構(gòu)文檔：好好學(xué)習(xí)天天向上 CSS的層疊性CSS的層疊性是指多種CSS樣式的疊加。權(quán)值計(jì)算法繼承樣式的權(quán)重=0分標(biāo)簽選擇器

26、=1分偽元素或偽對(duì)象選擇器=1分類選擇器=10分屬性選擇器=10分ID選擇器=100分行內(nèi)樣式的權(quán)值最高 1000分 !important 的權(quán)值是無(wú)窮大處理層疊關(guān)系的使用優(yōu)先級(jí)別來(lái)判斷.1.當(dāng)行內(nèi)樣式、內(nèi)部樣式和鏈接樣式同時(shí)應(yīng)用于同一個(gè)元素，就是使用多重樣式的情況，依據(jù)他們的權(quán)重來(lái)判斷。優(yōu)先級(jí)如下：鏈接樣式內(nèi)部樣式行內(nèi)樣式。舉例演示6綜合實(shí)例Part門戶網(wǎng)站導(dǎo)航設(shè)計(jì) 門戶網(wǎng)站導(dǎo)航設(shè)計(jì)【演示】通過(guò)CSS的樣式表的學(xué)習(xí)，運(yùn)用CSS標(biāo)簽選擇器、類選擇器、id選擇器，以及結(jié)構(gòu)選擇設(shè)計(jì)一個(gè)門戶網(wǎng)站的導(dǎo)航菜單。實(shí)現(xiàn)步驟 1 HTML結(jié)構(gòu)代碼設(shè)計(jì) 2 CSS樣式設(shè)計(jì)任務(wù)實(shí)施門戶網(wǎng)站導(dǎo)航設(shè)計(jì)1 HTML結(jié)構(gòu)

27、代碼設(shè)計(jì)舉例演示任務(wù)實(shí)施門戶網(wǎng)站導(dǎo)航設(shè)計(jì)2 CSS樣式設(shè)計(jì)舉例演示7任務(wù)實(shí)施Part使用CSS實(shí)現(xiàn)門戶網(wǎng)站導(dǎo)航【演示】結(jié)合CSS的繼承性、層疊性編寫網(wǎng)站的基礎(chǔ)樣式表，并實(shí)現(xiàn)網(wǎng)站頭部的頁(yè)面效果。實(shí)現(xiàn)步驟 1 任務(wù)分析 2 編寫頁(yè)面通用樣式 3 編寫頁(yè)面通用樣式 4 編寫nav區(qū)域與鏈接樣式任務(wù)實(shí)施使用CSS實(shí)現(xiàn)門戶網(wǎng)站導(dǎo)航1 任務(wù)分析區(qū)域的HTML代碼如下門戶首頁(yè)學(xué)校概況組織機(jī)構(gòu)招生就業(yè)科學(xué)研究招聘信息區(qū)域的HTML代碼，完成項(xiàng)目要分為以下幾步第一步：使用通配符編寫通用樣式，統(tǒng)一頁(yè)面中所有的文本樣式，統(tǒng)一頁(yè)面中的內(nèi)外邊距與邊框，統(tǒng)一樣式表的風(fēng)格。第二步：根據(jù)需要可以在標(biāo)簽內(nèi)添加2個(gè)標(biāo)簽，第1個(gè)來(lái)放置整個(gè)導(dǎo)航信息，第2個(gè)來(lái)實(shí)現(xiàn)超級(jí)鏈接的頁(yè)面效果。第三步：設(shè)置nav區(qū)域中的超級(jí)鏈接的樣式。任務(wù)實(shí)施使用CSS實(shí)現(xiàn)門戶網(wǎng)站導(dǎo)航2 編寫頁(yè)面通用樣式舉例演示任務(wù)實(shí)施使用CSS實(shí)現(xiàn)門戶網(wǎng)站導(dǎo)航3 添加div并編寫樣式舉例演示任務(wù)實(shí)施使用CSS實(shí)現(xiàn)門戶網(wǎng)站導(dǎo)航4 編寫nav區(qū)域與鏈接樣式舉例演示8任務(wù)拓展Part實(shí)際元素與偽元素的轉(zhuǎn)化瀏覽器的兼容性處理【演示】項(xiàng)目中，header中添加了標(biāo)簽。#headerbottom position: absolute;bottom: 0;left