第8課css布局講義

1、)99 布（時間 1（252課程回顧（3 3本章目標(biāo)（1 4內(nèi)容概要（1 5新課內(nèi)容（70關(guān)于頁面布局（10float)99 布（時間 1（252課程回顧（3 3本章目標(biāo)（1 4內(nèi)容概要（1 5新課內(nèi)容（70關(guān)于頁面布局（10float（20 清除浮動（10clearie6overflow 超出（15visibility 可視（156課程總結(jié)（4 7作業(yè)布置（1 8CSS 布局課（無PPT） 建議時間：25課前回顧（PPT2）建議時間： 5詳見 本章目標(biāo)（PPT3）建議時間： 1闡述本節(jié)課需要掌握的學(xué)習(xí)目標(biāo)（詳見內(nèi)容概要（PPT4）建議時間： 2新課內(nèi)容關(guān)于CSS 布局課（無PPT） 建議時間

2、：25課前回顧（PPT2）建議時間： 5詳見 本章目標(biāo)（PPT3）建議時間： 1闡述本節(jié)課需要掌握的學(xué)習(xí)目標(biāo)（詳見內(nèi)容概要（PPT4）建議時間： 2新課內(nèi)容關(guān)于頁面布局（PPT56）建議時間： 15min 先讓大家看一個頁面，這是hao123都那 第三階段課程要學(xué)習(xí)的CSS3。那今要學(xué)習(xí)的就是在頁面布局中最為常用的float局。這節(jié)課學(xué)完后新課內(nèi)容浮動屬性（PPT79）建議時間： 101）講解float屬那么給元素設(shè)置了 float 之后，元素應(yīng)該按照怎么樣的規(guī)律去顯示呢？這里為了讓大家更容易理解 看到了 ppt 上的一個水槽，那積木。當(dāng)沒有給元素（積木）設(shè)置float性時，水槽里是沒有水的，

3、元素按照正常的規(guī)律顯示在水槽里（即 果設(shè)置的是 會講到（接著帶著學(xué)float浮動，有三個屬性值，none、left、right。none動，leftright右新課內(nèi)容clear（PPT1012）建議時間： 101）講解clear新課內(nèi)容clear（PPT1012）建議時間： 101）講解clear最外層div960px15div，寬度高度都是192px；div6、div8、div9、div11 是div12新課內(nèi)容overflow（PPT1314）建議時間： 151）講解overflow用新課內(nèi)容visibility（PPT16）建議時間： 151） 講解visibility法visibil

4、ity3值。Visible、hidden、inherit3屬性值灰色，不常用，但要知道。Visible 指元素可見，默認(rèn)值。Hidden 指元素不可見。Inherit 指繼承父元素可視性。見ppt 第14visible 指顯示超出內(nèi)容，不剪切內(nèi)容也不添加滾動條。hidden 指超出內(nèi)容隱藏。auto 指默認(rèn)屬性，在需要是剪切內(nèi)容并添加滾動條。scroll示滾動條。另外 oveflow 還可針對元素的 x 軸方向和 y 軸方向設(shè)置相應(yīng)屬性值。例如：overflow-x：scroll；見ppt11、12 頁 （帶著打代碼并講解clear值有4，none、left、right、both3ppt常使浮動元素。both素。2、具有float屬性的元素在 float 對行內(nèi)屬float 之后能設(shè)置width 和height 屬性，并支持margin 和paddingfloat 對塊屬一容易把display 屬性和visibility屬。那一容易把display 屬性和visibility屬。那visibility（不顯示這里需要注意了如果設(shè)置了display:nonevisibility：hidden區(qū)別呢設(shè)置了Display:none