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

1、陜西新華電腦軟件學(xué)校-電子商務(wù)教研組1第8講 DIV+CSS布局-圖文混排版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組2任務(wù)一任務(wù)一 圖文混排相關(guān)知識點(diǎn)（重點(diǎn)）圖文混排相關(guān)知識點(diǎn)（重點(diǎn)）CSS-圖文混排教學(xué)重難點(diǎn)教學(xué)重難點(diǎn)課前回顧：圖文混排基礎(chǔ)知識課前回顧：圖文混排基礎(chǔ)知識任務(wù)二任務(wù)二 圖文混排綜合應(yīng)用（重點(diǎn)）圖文混排綜合應(yīng)用（重點(diǎn)）版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組3課前回顧：圖文混排課前回顧：圖文混排uQQ相冊效果制作u相冊瀏覽效果版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組4任務(wù)一任務(wù)一 混排相關(guān)知識點(diǎn)混排相關(guān)知識點(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知識點(diǎn)復(fù)習(xí)pmargin定義和用法 margin 簡寫屬性在一個聲明中設(shè)置所有外邊距屬性。該屬性可以有 1 到 4 個值。 注釋：允許使用負(fù)值。注釋：允許使用負(fù)值。版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組7任務(wù)二任務(wù)二 綜合應(yīng)用綜合應(yīng)用 u知識點(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知識點(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知識點(diǎn)復(fù)習(xí)p例子 3 margin:10px 5px; 上外邊距和下外邊距是 10px 右外邊距和左外邊距是 5px版權(quán)所有陜西新華電腦軟件學(xué)校-電子商務(wù)教研組10

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

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