第8講DIV+CSS布局—圖文混排

1、陜西新華電腦軟件學(xué)校-電子商務(wù)教研組1第8講 DIV+CSS布局-圖文混排版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組2任務(wù)一任務(wù)一 圖文混排相關(guān)知識(shí)點(diǎn)（重點(diǎn)）圖文混排相關(guān)知識(shí)點(diǎn)（重點(diǎn)）CSS-圖文混排教學(xué)重難點(diǎn)教學(xué)重難點(diǎn)課前回顧：圖文混排基礎(chǔ)知識(shí)課前回顧：圖文混排基礎(chǔ)知識(shí)任務(wù)二任務(wù)二 圖文混排綜合應(yīng)用（重點(diǎn)）圖文混排綜合應(yīng)用（重點(diǎn)）版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組3課前回顧：圖文混排課前回顧：圖文混排uQQ相冊(cè)效果制作u相冊(cè)瀏覽效果版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組4任務(wù)一任務(wù)一 混排相關(guān)知識(shí)點(diǎn)混排相關(guān)知識(shí)點(diǎn)ubackground-image:url(圖片路徑);uba

2、ckground-repeat:repeat-x; ubackground-position:left top;版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組5任務(wù)任務(wù)二二 綜合應(yīng)用綜合應(yīng)用u圖文混排-做人做事的藝術(shù)u圖文混排-暢游普吉島u圖像的陰影效果版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組6任務(wù)二任務(wù)二 綜合應(yīng)用綜合應(yīng)用 u知識(shí)點(diǎn)復(fù)習(xí)pmargin定義和用法 margin 簡(jiǎn)寫(xiě)屬性在一個(gè)聲明中設(shè)置所有外邊距屬性。該屬性可以有 1 到 4 個(gè)值。 注釋?zhuān)涸试S使用負(fù)值。注釋?zhuān)涸试S使用負(fù)值。版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組7任務(wù)二任務(wù)二 綜合應(yīng)用綜合應(yīng)用 u知識(shí)點(diǎn)復(fù)習(xí)p例子 1 m

3、argin:10px 5px 15px 20px; 上外邊距是 10px 右外邊距是 5px 下外邊距是 15px 左外邊距是 20px版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組8任務(wù)二任務(wù)二 綜合應(yīng)用綜合應(yīng)用 u知識(shí)點(diǎn)復(fù)習(xí)p例子 2 margin:10px 5px 15px; 上外邊距是 10px 右外邊距和左外邊距是 5px 下外邊距是 15px 版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組9任務(wù)二任務(wù)二 綜合應(yīng)用綜合應(yīng)用 u知識(shí)點(diǎn)復(fù)習(xí)p例子 3 margin:10px 5px; 上外邊距和下外邊距是 10px 右外邊距和左外邊距是 5px版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組10

4、任務(wù)二任務(wù)二 綜合應(yīng)用綜合應(yīng)用 u知識(shí)點(diǎn)復(fù)習(xí)p例子 4margin:10px; 所有 4 個(gè)外邊距都是 10pxu瀏覽器支持p所有瀏覽器都支持 margin 屬性。p實(shí)例：magin.html 版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組11任務(wù)二任務(wù)二 綜合應(yīng)用綜合應(yīng)用 u注釋?zhuān)喝魏蔚陌姹镜?Internet Explorer （包括 IE8）都不支持屬性值 inherit。 版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組12任務(wù)二任務(wù)二 綜合應(yīng)用綜合應(yīng)用 u基本方法：p首先制作一個(gè)圖像p經(jīng)驗(yàn)：這個(gè)圖像的大小可以隨意設(shè)定，但是如果圖像的大小大于這個(gè)陰影大小，則圖像的陰影就不能全部顯示，因此這個(gè)

5、圖像應(yīng)該比里邊的圖像大些。版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組13任務(wù)二任務(wù)二 綜合應(yīng)用綜合應(yīng)用 u基本方法：p給img標(biāo)簽外加個(gè)“div”版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組14任務(wù)二任務(wù)二 綜合應(yīng)用綜合應(yīng)用 u基本方法：p給DIV設(shè)置左浮動(dòng)p設(shè)置圖像屬性p實(shí)例：yingying.htm版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組15任務(wù)二任務(wù)二 綜合應(yīng)用綜合應(yīng)用 u使用“滑動(dòng)門(mén)”技術(shù)p上述實(shí)例在firefox瀏覽器與IE7正常顯示，但是在IE6就不能正常顯示了。p怎么解決IE6的問(wèn)題呢？ 使用“滑動(dòng)門(mén)”技術(shù)版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組16任務(wù)二任務(wù)二 綜合應(yīng)用綜合應(yīng)用 u基本方法：p制作一個(gè)部分透明的GIF圖像，圖像的上邊和左邊各有“8”個(gè)像素的白色不透明區(qū)域，其余均為透明色。版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組17任務(wù)二任務(wù)二 綜合應(yīng)用綜合應(yīng)用 u基本方法：p改造HTML代碼，把圖像外部再套一層DIV注意：寫(xiě)代碼的時(shí)候之間不要有空格。版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組18任務(wù)二任務(wù)二 綜合應(yīng)用綜合應(yīng)用 u基本方法p設(shè)置CSS代碼版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組19本講總結(jié)本講