北大青鳥accp506070課件轉換課程s2y2java方向

DIV＋CSS實現(xiàn)典型的局部布局（一）第十五章回顧與作業(yè)點評XHTML使用的基本規(guī)范是什么？方框屬性有哪些？各包含哪些屬性？float屬性的應用場合？有哪些取值？ clear屬性的應用場合？有哪些取值？預習檢查有哪些典型的局部布局結構？各種局部布局適用的場合分別是什么？本章任務制作貴美首頁本章目標使用div-ul-li實現(xiàn)局部布局使用div-dl-dt/dd實現(xiàn)局部布局典型的局部布局結構div-ul(ol)-li：常用于分類導航或菜單等場合div-dl-dt-dd：常用于圖文混編場合table-tr-td：常用于圖文布局或顯示數(shù)據(jù)的場合form-table-tr-td：常用于布局表單的場合HTML標簽中，學過哪些典型的塊狀布局結構？div-ul-li局部布局應用場合產(chǎn)品的分類導航菜單導航實現(xiàn)TAB切換制作貴美首頁的主導航菜單6-1實現(xiàn)思路布局結構分析CSS樣式分析制作貴美首頁中主導航菜單制作貴美首頁的主導航菜單6-2實現(xiàn)步驟先建立HTML標簽組織結構建立CSS樣式表，逐一添加各類樣式測試樣式細節(jié)演示示例1：制作貴美首頁的主導航菜單<styletype="text/css">#header{background-image:url(images/h_bg.jpg);//設置背景圖片background-repeat:no-repeat;width:100%;height:130px;}#logo{width:250px;height:98px;float:left;}#menu{clear:both;height:32px;}</style>制作貴美首頁的主導航菜單6-3<divid="header"><divid="logo"></div><divid="menu"></div></div>頂部局部布局頂部容器樣式LOGO樣式MENU樣式制作貴美首頁的主導航菜單6-4<divid="menu">

<ul>

<li><ahref="#">首   頁</a></li>

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

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

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

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

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

<li><ahref="#">免費開店</a></li>

<li><ahref="#">全球咨詢</a></li></ul></div>菜單項制作貴美首頁的主導航菜單6-5ul,li{/*ul和li無外邊距及內邊距*/padding:0px;margin:0px;}#menuli{float:left;/*向左浮動*/list-style-type:none;/*去掉前面的小圓點*/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>制作貴美首頁的主導航菜單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>練習——制作貴美首頁頂部導航部分需求說明：使用ul-li結構實現(xiàn)貴美網(wǎng)站的頂部導航菜單完成時間：25分鐘共性問題集中講解常見調試問題及解決辦法代碼規(guī)范問題共性問題集中講解小結選擇器常用符號空格,#.:選擇器的組合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應用場合圖文混排布局結構：1、圖文混編結構，宜用div-dl-dt-dd結構。2、<dt>放圖片，<dd>放文字，<dl>做結構容器，方便擴展div-dl-dt/dd局部布局2-2應用場合圖文混排布局結構：1、圖片和文字一行：采用float2、文字居中：調整<dd>寬高與行高制作貴美網(wǎng)站瘋狂購物4-1實現(xiàn)步驟先建立HTML標簽組織結構建立CSS樣式表，逐一添加各類樣式測試樣式細節(jié)制作貴美網(wǎng)站瘋狂購物

版塊樣式<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)站瘋狂購物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)站瘋狂購物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)站瘋狂購物4-4<divid="shopping"><dl><dt><img/></dt><dd>....</dd></dl><dl><dt><img/></dt><dd>...</dd></dl></div>演示示例2：制作貴美－瘋狂購物練習——制作“重點關注”版塊需求說明：使用DIV+CSS進行整體布局使用dl-dt-dd實現(xiàn)局部布局圖片放在標簽dt中，文本放在標簽dd中圖片的說明文字實現(xiàn)超鏈接效果，當鼠標移到超鏈接上時，文本出現(xiàn)下劃線定