08找機(jī)會(huì)看1、用html和css開(kāi)發(fā)站點(diǎn)tp07

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

2、link ）已訪問(wèn)狀態(tài)（a:visited ）鼠標(biāo)移上狀態(tài)（a:hover ）激活選定狀態(tài)（a:active ）可以分別設(shè)置鏈接的四種狀態(tài)的樣式超鏈接偽類樣式超鏈接偽類樣式偽 類示 例說(shuō) 明a:linka:linkcolor:#999;未訪問(wèn)狀態(tài)a:visiteda:linkcolor:#333;已訪問(wèn)狀態(tài)a:hovera:linkcolor:#ff7300;鼠標(biāo)移上狀態(tài)a:activea:linkcolor:#999;激活選定狀態(tài)（鼠標(biāo)點(diǎn)擊未釋放時(shí)）采用選擇器：狀態(tài)的方式分別定義樣式，一般稱為偽類如何設(shè)置超鏈接的樣式 .nav li a padding:8px 15px; .nav li a

3、:hover color:#ff7300;font-size:20px; /style 家用電器 手機(jī)數(shù)碼演示示例1：偽類1、先定義共有樣式：表示.nai類下標(biāo)簽中的鏈接樣式設(shè)置超鏈接樣式的步驟：1、確定頁(yè)面所有鏈接樣式是否相同，否則分開(kāi)定義2、先定義四個(gè)狀態(tài)共有樣式，再分別定義其他狀態(tài)2、再單獨(dú)定義某個(gè)狀態(tài)特有的樣式導(dǎo)航版塊的鏈接樣式一般和頁(yè)面樣式不同，需單獨(dú)定義三類應(yīng)用樣式的方式內(nèi)部樣式表 外部樣式表 行內(nèi)樣式如何應(yīng)用樣式3-1 . /樣式定義 /HTML內(nèi)容HTML和CSS在同一文件，方便開(kāi)發(fā)時(shí)修改，樣式和內(nèi)容分離不夠徹底，不利于頁(yè)面復(fù)用三類應(yīng)用樣式的方式內(nèi)部樣式表 外部樣式表 行內(nèi)樣式

4、如何應(yīng)用樣式3-2.nav li apadding:8px 10px;. /CSS樣式定義 /HTML內(nèi)容分別定義*.css和*.html文件，樣式和內(nèi)容徹底分離，多個(gè)網(wǎng)頁(yè)可共享同一CSS演示示例2：外部樣式表三類應(yīng)用樣式的方式內(nèi)部樣式表 外部樣式表 行內(nèi)樣式表如何應(yīng)用樣式3-3 日用百貨單獨(dú)定義某個(gè)元素的樣式，靈活方便。但因?yàn)閮?nèi)容與樣式混寫在一起，應(yīng)盡量少用或不用演示示例3：行內(nèi)樣式表各類樣式有繼承各類樣式的優(yōu)先級(jí)瀏覽器默認(rèn)設(shè)置外部樣式表文件 內(nèi)部樣式表 行內(nèi)樣式表 ID選擇器類選擇器標(biāo)簽選擇器 樣式的優(yōu)先級(jí)3-1 由低到高，“近者優(yōu)先”原則樣式的優(yōu)先級(jí)3-2“日用百貨”鏈接 .nav ul

5、 li a:linkcolor:blue; 家用電器 手機(jī)數(shù)碼 日用百貨 內(nèi)部樣式表外部樣式表行內(nèi)樣式表紅色藍(lán)色演示示例4：樣式優(yōu)先級(jí)樣式的優(yōu)先級(jí)3-3購(gòu)物車的樣式 #nav_id width:300px;background: #ccc; .nav height:100px; background: red; div border:5px solid green; background: blue; 購(gòu)物車 ID選擇器類選擇器標(biāo)簽選擇器不沖突的樣式，邊框5px、綠色同時(shí)應(yīng)用ID、class、標(biāo)簽三類選擇器灰色背景 演示示例5：CSS優(yōu)先級(jí)練習(xí)使用超鏈接偽類實(shí)現(xiàn)導(dǎo)航條 需求說(shuō)明：用提供的背景圖

6、素材，實(shí)現(xiàn)如下導(dǎo)航菜單效果 要求使用外部樣式表div-ul-li結(jié)構(gòu)完成時(shí)間：25分鐘鏈接無(wú)下劃線（text-decoration），鼠標(biāo)懸停，顯示菜單的投影背景（background） 、字體變大行高：24px字體大?。?0px共性問(wèn)題集中講解常見(jiàn)調(diào)試問(wèn)題及解決辦法代碼規(guī)范問(wèn)題共性問(wèn)題集中講解典型的局部布局結(jié)構(gòu)div-ul(ol)-li：常用于分類導(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局部布局的

7、樣式修飾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è)各類樣式：1、小圖標(biāo)：采用背景圖偏移2、右對(duì)齊：float浮動(dòng)3、超鏈接：無(wú)下劃線樣式4、調(diào)整文本對(duì)齊和間距div-ul-li局部布局的樣式修飾2-2實(shí)現(xiàn)步驟先建立HTML標(biāo)簽組織結(jié)構(gòu) 建立CSS樣式表，逐一添加各類樣式測(cè)試樣式細(xì)節(jié)演示示例6：制作貴美頂部菜單如何復(fù)用CSS代碼演示示例7：精簡(jiǎn)CSS代碼.pic1width:28px;height:26px;background:url(./images/icon.gif) no-repeat;.pic2width:

8、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代碼，如何精簡(jiǎn)？ .抽取重復(fù)代碼建立類 .pic /共有的CSS代碼; 應(yīng)用樣式：多個(gè)類樣式 練習(xí)修飾div-ul-li局部布局需求說(shuō)明：重新實(shí)現(xiàn)貴美網(wǎng)站

9、的導(dǎo)航菜單完成時(shí)間：25分鐘行高：26px圖標(biāo)寬度：28px圖標(biāo)寬度：38pxdiv-dl-dt-dd局部布局樣式修飾2-1實(shí)現(xiàn)思路布局結(jié)構(gòu)分析CSS樣式分析布局結(jié)構(gòu)：1、圖文混編結(jié)構(gòu)，宜用div-dl-dt-dd結(jié)構(gòu)。2、放圖片，放文字，做結(jié)構(gòu)容器，方便擴(kuò)展布局結(jié)構(gòu)：1、圖片和文字一行：采用float2、文字居中：調(diào)整寬高與行高div-dl-dt-dd局部布局樣式修飾2-2實(shí)現(xiàn)步驟先建立HTML標(biāo)簽組織結(jié)構(gòu) 建立CSS樣式表，逐一添加各類樣式測(cè)試樣式細(xì)節(jié)演示示例8：制作新品上架制作新品上架版塊樣式小結(jié)基本符號(hào)： (空格)，(逗號(hào))#:（冒號(hào)）組合：標(biāo)簽+類標(biāo)簽+idid+空格+類id+空格+類+逗號(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分鐘總