北大青鳥accp506070課件轉(zhuǎn)換課程s2y2java方向

DIV＋CSS實(shí)現(xiàn)典型的局部布局（一）第十五章回顧與作業(yè)點(diǎn)評(píng)XHTML使用的基本規(guī)范是什么？方框?qū)傩杂心男?？各包含哪些屬性？float屬性的應(yīng)用場(chǎng)合？有哪些取值？ clear屬性的應(yīng)用場(chǎng)合？有哪些取值？預(yù)習(xí)檢查有哪些典型的局部布局結(jié)構(gòu)？各種局部布局適用的場(chǎng)合分別是什么？本章任務(wù)制作貴美首頁(yè)本章目標(biāo)使用div-ul-li實(shí)現(xiàn)局部布局使用div-dl-dt/dd實(shí)現(xià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局部布局應(yīng)用場(chǎng)合產(chǎn)品的分類導(dǎo)航菜單導(dǎo)航實(shí)現(xiàn)TAB切換制作貴美首頁(yè)的主導(dǎo)航菜單6-1實(shí)現(xiàn)思路布局結(jié)構(gòu)分析CSS樣式分析制作貴美首頁(yè)中主導(dǎo)航菜單制作貴美首頁(yè)的主導(dǎo)航菜單6-2實(shí)現(xiàn)步驟先建立HTML標(biāo)簽組織結(jié)構(gòu)建立CSS樣式表，逐一添加各類樣式測(cè)試樣式細(xì)節(jié)演示示例1：制作貴美首頁(yè)的主導(dǎo)航菜單<styletype="text/css">#header{background-image:url(images/h_bg.jpg);//設(shè)置背景圖片background-repeat:no-repeat;width:100%;height:130px;}#logo{width:250px;height:98px;float:left;}#menu{clear:both;height:32px;}</style>制作貴美首頁(yè)的主導(dǎo)航菜單6-3<divid="header"><divid="logo"></div><divid="menu"></div></div>頂部局部布局頂部容器樣式LOGO樣式MENU樣式制作貴美首頁(yè)的主導(dǎo)航菜單6-4<divid="menu">

<ul>

<li><ahref="#">首   頁(yè)</a></li>

<li><ahref="#">家用電器</a></li>

<li><ahref="#">手機(jī)數(shù)碼</a></li>

<li><ahref="#">日用百貨</a></li>

<li><ahref="#">書   籍</a></li>

<li><ahref="#">幫助中心</a></li>

<li><ahref="#">免費(fèi)開店</a></li>

<li><ahref="#">全球咨詢</a></li></ul></div>菜單項(xiàng)制作貴美首頁(yè)的主導(dǎo)航菜單6-5ul,li{/*ul和li無(wú)外邊距及內(nèi)邊距*/padding:0px;margin:0px;}#menuli{float:left;/*向左浮動(dòng)*/list-style-type:none;/*去掉前面的小圓點(diǎn)*/width:84px;height:32px;text-align:center;/*居中顯示*/line-height:32px;font-weight:bold;font-size:13px;}<divid="menu">

<ul>

<li><ahref="#">...</a></li>

<li><ahref="#">...</a></li>

</ul></div>制作貴美首頁(yè)的主導(dǎo)航菜單6-6#menua,#menua:hover{color:#333333;font-size:13px;text-decoration:none;height:32px;width:84px;display:block;}#menua:hover{background-image:url(images/nav_bg.png);background-repeat:no-repeat;background-position:centercenter;}<divid="menu">

<ul>

<li><ahref="#">...</a></li>

<li><ahref="#">...</a></li>

</ul></div>練習(xí)——制作貴美首頁(yè)頂部導(dǎo)航部分需求說(shuō)明：使用ul-li結(jié)構(gòu)實(shí)現(xiàn)貴美網(wǎng)站的頂部導(dǎo)航菜單完成時(shí)間：25分鐘共性問(wèn)題集中講解常見調(diào)試問(wèn)題及解決辦法代碼規(guī)范問(wèn)題共性問(wèn)題集中講解小結(jié)選擇器常用符號(hào)空格,#.:選擇器的組合li.div##.#.,divul{list-style:none;}div,ul{text-align:center;}#nav{width:100%;}.pic{background:url(bg.gif);}a:hover{#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)用場(chǎng)合圖文混排布局結(jié)構(gòu)：1、圖文混編結(jié)構(gòu)，宜用div-dl-dt-dd結(jié)構(gòu)。2、<dt>放圖片，<dd>放文字，<dl>做結(jié)構(gòu)容器，方便擴(kuò)展div-dl-dt/dd局部布局2-2應(yīng)用場(chǎng)合圖文混排布局結(jié)構(gòu)：1、圖片和文字一行：采用float2、文字居中：調(diào)整<dd>寬高與行高制作貴美網(wǎng)站瘋狂購(gòu)物4-1實(shí)現(xiàn)步驟先建立HTML標(biāo)簽組織結(jié)構(gòu)建立CSS樣式表，逐一添加各類樣式測(cè)試樣式細(xì)節(jié)制作貴美網(wǎng)站瘋狂購(gòu)物

版塊樣式<styletype="text/css">#shopping{background-image:url(images/bg.gif);background-repeat:no-repeat;margin:0pxauto;width:504px;height:390px;padding:40px10px10px15px;}</style>制作貴美網(wǎng)站瘋狂購(gòu)物4-2<divid="shopping"></div>整體布局<styletype="text/css">dl{float:left;width:160px;}dt{height:90px;text-align:center;vertical-align:middle;}dd{height:40px;text-align:center;}</style>制作貴美網(wǎng)站瘋狂購(gòu)物4-3<divid="shopping"><dl><dt><img/></dt><dd>....</dd></dl><dl><dt><img/></dt><dd>...</dd></dl></div>文本和圖片布局......<styletype="text/css">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;}</style>制作貴美網(wǎng)站瘋狂購(gòu)物4-4<divid="shopping"><dl><dt><img/></dt><dd>....</dd></dl><dl><dt><img/></dt><dd>...</dd></dl></div>演示示例2：制作貴美－瘋狂購(gòu)物練習(xí)——制作“重點(diǎn)關(guān)注”版塊需求說(shuō)明：使用DIV+CSS進(jìn)行整體布局使用dl-dt-dd實(shí)現(xiàn)局部布局圖片放在標(biāo)簽dt中，文本放在標(biāo)簽dd中圖片的說(shuō)明文字實(shí)現(xiàn)超鏈接效果，當(dāng)鼠標(biāo)移到超鏈接上時(shí)，文本出現(xiàn)下劃線定