1、DIVCSS實現(xiàn)典型的局部布局,回顧與作業(yè)點評,XHTML使用的基本規(guī)范是什么？ 方框?qū)傩杂心男?？各包含哪些屬性？ float屬性的應(yīng)用場合？有哪些取值？ clear屬性的應(yīng)用場合？有哪些取值？,預(yù)習(xí)檢查,有哪些典型的局部布局結(jié)構(gòu)？ 各種局部布局適用的場合分別是什么？,本章任務(wù),制作貴美首頁,本章目標,使用div-ul-li實現(xiàn)局部布局 使用div-dl-dt/dd實現(xiàn)局部布局,典型的局部布局結(jié)構(gòu),div-ul(ol)-li：常用于分類導(dǎo)航或菜單等場合 div-dl-dt-dd：常用于圖文混編場合 table-tr-td：常用于圖文布局或顯示數(shù)據(jù)的場合 form-table-tr-td：常用

2、于布局表單的場合,HTML標簽中，學(xué)過哪些典型的塊狀布局結(jié)構(gòu)？,div-ul-li局部布局,應(yīng)用場合 產(chǎn)品的分類導(dǎo)航 菜單導(dǎo)航 實現(xiàn)TAB切換,制作貴美首頁的主導(dǎo)航菜單6-1,實現(xiàn)思路 布局結(jié)構(gòu)分析 CSS樣式分析,制作貴美首頁中主導(dǎo)航菜單,制作貴美首頁的主導(dǎo)航菜單6-2,實現(xiàn)步驟 先建立HTML標簽組織結(jié)構(gòu) 建立CSS樣式表，逐一添加各類樣式 測試樣式細節(jié), #header background-image:url(images/h_bg.jpg); /設(shè)置背景圖片 background-repeat:no-repeat; width:100%; height:130px; #logo wi

3、dth:250px; height:98px; float:left; #menu clear:both; height:32px; ,制作貴美首頁的主導(dǎo)航菜單6-3, ,頂部局部布局,頂部容器樣式,LOGO樣式,MENU樣式,制作貴美首頁的主導(dǎo)航菜單6-4, 首籍 幫助中心 免費開店 全球咨詢 ,菜單項,制作貴美首頁的主導(dǎo)航菜單6-5,ul,li /*ul和li無外邊距及內(nèi)邊距*/ padding:0px; margin:0px; #menu li float:left; /*向左浮動*/ list-style-type:none; /*去掉前面的小圓點*/ width:84px; heig

4、ht:32px; text-align:center; /*居中顯示*/ line-height:32px; font-weight:bold; font-size:13px; , . . ,制作貴美首頁的主導(dǎo)航菜單6-6,#menu a, #menu a:hover color:#333333; font-size:13px; text-decoration:none; height:32px; width:84px; display: block; #menu a:hover background-image:url(images/nav_bg.png); background-repea

5、t:no-repeat; background-position:center center; , . . ,練習(xí)制作貴美首頁頂部導(dǎo)航部分,需求說明： 使用ul-li結(jié)構(gòu)實現(xiàn)貴美網(wǎng)站的頂部導(dǎo)航菜單,完成時間：25分鐘,共性問題集中講解,常見調(diào)試問題及解決辦法 代碼規(guī)范問題,共性問題集中講解,小結(jié),選擇器常用符號 空格 , # . : 選擇器的組合 li. div# # . # . ,div ul list-style:none; ,div, ul text-align:center; ,#nav width:100%; ,.pic background:url(bg.gif); ,a:hove

6、r #ff0; ,li.pic width:28px; ,div#nav text-align:center; ,#nav .pic border:1px; ,#nav .pic, #nav .text height:26px; ,div-dl-dt/dd局部布局2-1,應(yīng)用場合 圖文混排,布局結(jié)構(gòu)： 1、圖文混編結(jié)構(gòu)，宜用div-dl-dt-dd結(jié)構(gòu)。 2、放圖片，放文字，做結(jié)構(gòu)容器，方便擴展,div-dl-dt/dd局部布局2-2,應(yīng)用場合 圖文混排,布局結(jié)構(gòu)： 1、圖片和文字一行：采用float 2、文字居中：調(diào)整寬高與行高,制作貴美網(wǎng)站瘋狂購物4-1,實現(xiàn)步驟 先建立HTML標簽組織結(jié)

7、構(gòu) 建立CSS樣式表，逐一添加各類樣式 測試樣式細節(jié),制作貴美網(wǎng)站瘋狂購物 版塊樣式, #shopping background-image:url(images/bg.gif); background-repeat:no-repeat; margin:0px auto; width:504px; height:390px; padding:40px 10px 10px 15px; ,制作貴美網(wǎng)站瘋狂購物4-2, ,整體布局, dl float:left; width:160px; dt height:90px; text-align:center; vertical-align:middle

8、; dd height:40px; text-align:center; ,制作貴美網(wǎng)站瘋狂購物4-3, . . ,文本和圖片布局,., dl,dt,dd margin:0px; padding:0px; dl float:left; width:160px; dt height:90px; text-align:center; vertical-align:middle; dd height:40px; text-align:center; ,制作貴美網(wǎng)站瘋狂購物4-4, . . ,練習(xí)制作“重點關(guān)注”版塊,需求說明： 使用DIV+CSS進行整體布局 使用dl-dt-dd實現(xiàn)局部布局 圖片放在標簽dt中，文本放 在標簽dd中 圖片的說明文字實現(xiàn)超鏈接 效果，當(dāng)鼠標移到超鏈接上 時，文本出現(xiàn)下劃線 定價和當(dāng)當(dāng)價放在標簽dd中,完成時間：20分鐘,共性問題集中講解,常見調(diào)試問題及解決辦法 代碼規(guī)范問題,共性問題集中講解,總結(jié),典型的局部結(jié)構(gòu)包括哪