1、CSS樣式表（三）,第七章,回顧與作業(yè)點(diǎn)評(píng),方框?qū)傩杂心男?？各包含哪些屬性？ float屬性的應(yīng)用場(chǎng)合？有哪些取值？ clear屬性的應(yīng)用場(chǎng)合？有哪些取值？ 有哪幾類(lèi)定位方式？應(yīng)用場(chǎng)合？ 如何實(shí)現(xiàn)絕對(duì)定位？,預(yù)習(xí)檢查,超鏈接的樣式有哪4種狀態(tài)？ 樣式表有哪三類(lèi)應(yīng)用方式？ 有哪些典型的局部布局結(jié)構(gòu)？,本章任務(wù),制作貴美橫向主導(dǎo)航條 制作貴美頂部菜單 制作貴美新品上架板塊,本章目標(biāo),使用div-ul-li實(shí)現(xiàn)局部布局 使用div-dl-dt-dd實(shí)現(xiàn)圖文混編 使用偽類(lèi)樣式控制超鏈接樣式,超鏈接樣式的特殊性 文本或圖像加上鏈接，將失去原樣式而繼承鏈接的樣式,超鏈接樣式的特點(diǎn),加鏈接后，圖片/文本樣

2、式的變化,超鏈接樣式的四種狀態(tài) 未訪問(wèn)狀態(tài)（a:link ） 已訪問(wèn)狀態(tài)（a:visited ） 鼠標(biāo)移上狀態(tài)（a:hover ） 激活選定狀態(tài)（a:active ）,可以分別設(shè)置鏈接的四種狀態(tài)的樣式,超鏈接偽類(lèi)樣式,超鏈接偽類(lèi)樣式,采用選擇器：狀態(tài)的方式分別定義樣式，一般稱(chēng)為偽類(lèi),如何設(shè)置超鏈接的樣式, .nav li a padding:8px 15px; .nav li a:hover color:#ff7300;font-size:20px; 家用電器 手機(jī)數(shù)碼 ,1、先定義共有樣式：表示.nai類(lèi)下標(biāo)簽中的鏈接樣式,設(shè)置超鏈接樣式的步驟： 1、確定頁(yè)面所有鏈接樣式是否相同，否則分開(kāi)定

3、義 2、先定義四個(gè)狀態(tài)共有樣式，再分別定義其他狀態(tài),2、再單獨(dú)定義某個(gè)狀態(tài)特有的樣式,導(dǎo)航版塊的鏈接樣式一般和頁(yè)面樣式不同，需單獨(dú)定義,三類(lèi)應(yīng)用樣式的方式 內(nèi)部樣式表 外部樣式表 行內(nèi)樣式,如何應(yīng)用樣式3-1, . /樣式定義 /HTML內(nèi)容 ,HTML和CSS在同一文件，方便開(kāi)發(fā)時(shí)修改，樣式和內(nèi)容分離不夠徹底，不利于頁(yè)面復(fù)用,三類(lèi)應(yīng)用樣式的方式 內(nèi)部樣式表 外部樣式表 行內(nèi)樣式,如何應(yīng)用樣式3-2,.nav li apadding:8px 10px; . /CSS樣式定義, /HTML內(nèi)容 ,分別定義*.css和*.html文件，樣式和內(nèi)容徹底分離，多個(gè)網(wǎng)頁(yè)可共享同一CSS,三類(lèi)應(yīng)用樣式的方

4、式 內(nèi)部樣式表 外部樣式表 行內(nèi)樣式表,如何應(yīng)用樣式3-3, 日用百貨 ,單獨(dú)定義某個(gè)元素的樣式，靈活方便。但因?yàn)閮?nèi)容與樣式混寫(xiě)在一起，應(yīng)盡量少用或不用,各類(lèi)樣式有繼承 各類(lèi)樣式的優(yōu)先級(jí) 瀏覽器默認(rèn)設(shè)置 外部樣式表文件 內(nèi)部樣式表 行內(nèi)樣式表 ID選擇器 類(lèi)選擇器 標(biāo)簽選擇器,樣式的優(yōu)先級(jí)3-1,由低到高，“近者優(yōu)先”原則,樣式的優(yōu)先級(jí)3-2,“日用百貨”鏈接, .nav ul li a:linkcolor:blue; 家用電器 手機(jī)數(shù)碼 日用百貨 ,內(nèi)部樣式表,外部樣式表,行內(nèi)樣式表,紅色,藍(lán)色,樣式的優(yōu)先級(jí)3-3,購(gòu)物車(chē)的樣式, #nav_id width:300px;background

5、: #ccc; .nav height:100px; background: red; div border:5px solid green; background: blue; 購(gòu)物車(chē) ,ID選擇器,類(lèi)選擇器,標(biāo)簽選擇器,不沖突的樣式，邊框5px、綠色,同時(shí)應(yīng)用ID、class、標(biāo)簽三類(lèi)選擇器,灰色背景,練習(xí)使用超鏈接偽類(lèi)實(shí)現(xiàn)導(dǎo)航條,需求說(shuō)明： 用提供的背景圖素材，實(shí)現(xiàn)如下導(dǎo)航菜單效果 要求使用外部樣式表 div-ul-li結(jié)構(gòu),完成時(shí)間：25分鐘,鏈接無(wú)下劃線（text-decoration），鼠標(biāo)懸停，顯示菜單的投影背景（background） 、字體變大,行高：24px 字體大?。?0

6、px,共性問(wèn)題集中講解,常見(jiàn)調(diào)試問(wèn)題及解決辦法 代碼規(guī)范問(wèn)題,共性問(wèn)題集中講解,典型的局部布局結(jié)構(gòu),div-ul(ol)-li：常用于分類(lèi)導(dǎo)航或菜單等場(chǎng)合； div-dl-dt-dd：常用于圖文混編場(chǎng)合； table-tr-td：常用于圖文布局或顯示數(shù)據(jù)的場(chǎng)合； form-table-tr-td：常用于布局表單的場(chǎng)合；,HTML標(biāo)簽中，學(xué)過(guò)哪些典型的塊狀布局結(jié)構(gòu)？,div-ul-li局部布局的樣式修飾2-1,實(shí)現(xiàn)思路 布局結(jié)構(gòu)分析 CSS樣式分析,布局結(jié)構(gòu)： 1、圖文參差并列結(jié)構(gòu)，宜采用div-ul-li實(shí)現(xiàn) 2、圖標(biāo)和文字各占一個(gè),各類(lèi)樣式： 1、小圖標(biāo)：采用背景圖偏移 2、右對(duì)齊：floa

7、t浮動(dòng) 3、超鏈接：無(wú)下劃線樣式 4、調(diào)整文本對(duì)齊和間距,div-ul-li局部布局的樣式修飾2-2,實(shí)現(xiàn)步驟 先建立HTML標(biāo)簽組織結(jié)構(gòu) 建立CSS樣式表，逐一添加各類(lèi)樣式 測(cè)試樣式細(xì)節(jié),如何復(fù)用CSS代碼,.pic1width:28px;height:26px;background:url(./images/icon.gif) no-repeat; .pic2width:28px;height:26px;background:url(./images/icon.gif) no-repeat -28px 0px; .pic3width:28px;height:26px;background:

8、url(./images/icon.gif) no-repeat -84px 0px; .pic4width:28px;height:26px;background:url(./images/icon.gif) ,大量重復(fù)的CSS代碼，如何精簡(jiǎn)？,.抽取重復(fù)代碼建立類(lèi) .pic /共有的CSS代碼;,應(yīng)用樣式：多個(gè)類(lèi)樣式 ,練習(xí)修飾div-ul-li局部布局,需求說(shuō)明： 重新實(shí)現(xiàn)貴美網(wǎng)站的導(dǎo)航菜單,完成時(shí)間：25分鐘,行高：26px 圖標(biāo)寬度：28px,圖標(biāo)寬度：38px,div-dl-dt-dd局部布局樣式修飾2-1,實(shí)現(xiàn)思路 布局結(jié)構(gòu)分析 CSS樣式分析,布局結(jié)構(gòu)： 1、圖文混編結(jié)構(gòu)，宜用

9、div-dl-dt-dd結(jié)構(gòu)。 2、放圖片，放文字，做結(jié)構(gòu)容器，方便擴(kuò)展,布局結(jié)構(gòu)： 1、圖片和文字一行：采用float 2、文字居中：調(diào)整寬高與行高,div-dl-dt-dd局部布局樣式修飾2-2,實(shí)現(xiàn)步驟 先建立HTML標(biāo)簽組織結(jié)構(gòu) 建立CSS樣式表，逐一添加各類(lèi)樣式 測(cè)試樣式細(xì)節(jié),制作新品上架版塊樣式,小結(jié),基本符號(hào)： (空格) ，(逗號(hào)) # :（冒號(hào)）,組合： 標(biāo)簽+類(lèi) 標(biāo)簽+id id+空格+類(lèi) id+空格+類(lèi)+逗號(hào),div ullist-style:none; div,ultext-align:center; #navwidth:100%; .picbackground:url(bg.gif); a:hover#ff0;,各代表什么含義？,li.picwidth:28px; div#navtext-align:center; #nav .picborder:1px; #nav .pic,#nav .textheight:26px;,各代表什么含義？,練習(xí)實(shí)現(xiàn)貴美對(duì)聯(lián)廣告布局,需求說(shuō)明： 根據(jù)提供的素材，重新實(shí)現(xiàn)新品上架版塊,完成時(shí)間：20分鐘,總結(jié),超鏈接樣式有哪四類(lèi)狀態(tài)及對(duì)應(yīng)偽類(lèi)？ 應(yīng)用樣式有哪三類(lèi)方式？?jī)?yōu)先級(jí)？ div-