1、第七章 CSS樣式表（三）,制作貴美橫向主導(dǎo)航條 制作貴美頂部菜單 制作貴美新品上架板塊,本章任務(wù),使用div-ul-li實現(xiàn)局部布局 使用div-dl-dt-dd實現(xiàn)圖文混編 使用偽類樣式控制超鏈接樣式,本章目標,超鏈接樣式的特殊性 文本或圖像加上鏈接，將失去原樣式而繼承鏈接的樣式,超鏈接樣式的特點,加鏈接后，圖片/文本樣式的變化,超鏈接樣式的四種狀態(tài) 未訪問狀態(tài)（a:link ） 已訪問狀態(tài)（a:visited ） 鼠標移上狀態(tài)（a:hover ） 激活選定狀態(tài)（a:active ）,可以分別設(shè)置鏈接的四種狀態(tài)的樣式,超鏈接偽類樣式,超鏈接偽類樣式,采用選擇器：狀態(tài)的方式分別定義樣式，一般

2、稱為偽類,如何設(shè)置超鏈接的樣式, .nav li a padding:8px 15px; .nav li a:hover color:#ff7300;font-size:20px; 家用電器 手機數(shù)碼 ,1、先定義共有樣式：表示.nav類下標簽中的鏈接樣式,設(shè)置超鏈接樣式的步驟： 1、確定頁面所有鏈接樣式是否相同，否則分開定義 2、先定義四個狀態(tài)共有樣式，再分別定義其他狀態(tài),2、再單獨定義某個狀態(tài)特有的樣式,導(dǎo)航版塊的鏈接樣式一般和頁面樣式不同，需單獨定義,三類應(yīng)用樣式的方式 內(nèi)部樣式表 外部樣式表 行內(nèi)樣式,如何應(yīng)用樣式3-1, . /樣式定義 /HTML內(nèi)容 ,HTML和CSS在同一文件，

3、方便開發(fā)時修改，樣式和內(nèi)容分離不夠徹底，不利于頁面復(fù)用,三類應(yīng)用樣式的方式 內(nèi)部樣式表 外部樣式表 行內(nèi)樣式,如何應(yīng)用樣式3-2,.nav li apadding:8px 10px; . /CSS樣式定義, /HTML內(nèi)容 ,分別定義*.css和*.html文件，樣式和內(nèi)容徹底分離，多個網(wǎng)頁可共享同一CSS,三類應(yīng)用樣式的方式 內(nèi)部樣式表 外部樣式表 行內(nèi)樣式表,如何應(yīng)用樣式3-3, 日用百貨 ,單獨定義某個元素的樣式，靈活方便。但因為內(nèi)容與樣式混寫在一起，應(yīng)盡量少用或不用,各類樣式有繼承 各類樣式的優(yōu)先級 瀏覽器默認設(shè)置 外部樣式表文件 內(nèi)部樣式表 行內(nèi)樣式表 ID選擇器 類選擇器 標簽選擇

4、器,樣式的優(yōu)先級3-1,由低到高，“近者優(yōu)先”原則,“日用百貨”鏈接,樣式的優(yōu)先級3-2, .nav ul li a:linkcolor:blue; 家用電器 手機數(shù)碼 日用百貨 ,內(nèi)部樣式表,外部樣式表,行內(nèi)樣式表,紅色,藍色,購物車的樣式,樣式的優(yōu)先級3-3, #nav_id width:300px;background: #ccc; .nav height:100px; background: red; div border:5px solid green; background: blue; 購物車 ,ID選擇器,類選擇器,標簽選擇器,不沖突的樣式，邊框5px、綠色,同時應(yīng)用ID、cl

5、ass、標簽三類選擇器,灰色背景,需求說明： 用提供的背景圖素材，實現(xiàn)如下導(dǎo)航菜單效果 要求使用外部樣式表 div-ul-li結(jié)構(gòu),練習(xí)使用超鏈接偽類實現(xiàn)導(dǎo)航條,完成時間：25分鐘,鏈接無下劃線（text-decoration），鼠標懸停，顯示菜單的投影背景（background） 、字體變大,行高：24px 字體大?。?0px,典型的局部布局結(jié)構(gòu),div-ul(ol)-li：常用于分類導(dǎo)航或菜單等場合； div-dl-dt-dd：常用于圖文混編場合； table-tr-td：常用于圖文布局或顯示數(shù)據(jù)的場合； form-table-tr-td：常用于布局表單的場合；,HTML標簽中，學(xué)過哪些典

6、型的塊狀布局結(jié)構(gòu)？,div-ul-li局部布局的樣式修飾2-1,實現(xiàn)思路 布局結(jié)構(gòu)分析 CSS樣式分析,布局結(jié)構(gòu)： 1、圖文參差并列結(jié)構(gòu)，宜采用div-ul-li實現(xiàn) 2、圖標和文字各占一個,各類樣式： 1、小圖標：采用背景圖偏移 2、右對齊：float浮動 3、超鏈接：無下劃線樣式 4、調(diào)整文本對齊和間距,div-ul-li局部布局的樣式修飾2-2,實現(xiàn)步驟 先建立HTML標簽組織結(jié)構(gòu) 建立CSS樣式表，逐一添加各類樣式 測試樣式細節(jié),如何復(fù)用CSS代碼,.pic1width:28px;height:26px;background:url(./images/icon.gif) no-repe

7、at; .pic2width:28px;height:26px;background:url(./images/icon.gif) no-repeat -28px 0px; .pic3width:28px;height:26px;background:url(./images/icon.gif) no-repeat -84px 0px; .pic4width:28px;height:26px;background:url(./images/icon.gif) ,大量重復(fù)的CSS代碼，如何精簡？,.抽取重復(fù)代碼建立類 .pic /共有的CSS代碼;,應(yīng)用樣式：多個類樣式 ,需求說明： 重新實現(xiàn)貴

8、美網(wǎng)站的導(dǎo)航菜單,練習(xí)修飾div-ul-li局部布局,完成時間：25分鐘,行高：26px 圖標寬度：28px,圖標寬度：38px,div-dl-dt-dd局部布局樣式修飾2-1,實現(xiàn)思路 布局結(jié)構(gòu)分析 CSS樣式分析,布局結(jié)構(gòu)： 1、圖文混編結(jié)構(gòu)，宜用div-dl-dt-dd結(jié)構(gòu)。 2、放圖片，放文字，做結(jié)構(gòu)容器，方便擴展,布局結(jié)構(gòu)： 1、圖片和文字一行：采用float 2、文字居中：調(diào)整寬高與行高,div-dl-dt-dd局部布局樣式修飾2-2,實現(xiàn)步驟 先建立HTML標簽組織結(jié)構(gòu) 建立CSS樣式表，逐一添加各類樣式 測試樣式細節(jié),制作新品上架版塊樣式,小結(jié),基本符號： (空格) ，(逗號) # (ID標識符) . (類標識符) :（冒號）,組合： 標簽+類 標簽+id id+空格+類 id+空格+類+逗號,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;,各代表什么含義