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

第8講DIV+CSS布局-圖文混排1陜西新華電腦軟件學(xué)校-電子商務(wù)教研組任務(wù)一圖文混排相關(guān)知識(shí)點(diǎn)（重點(diǎn)）CSS-圖文混排教學(xué)重難點(diǎn)課前回顧：圖文混排基礎(chǔ)知識(shí)任務(wù)二圖文混排綜合應(yīng)用（重點(diǎn)）2陜西新華電腦軟件學(xué)校-電子商務(wù)教研組課前回顧：圖文混排QQ相冊(cè)效果制作相冊(cè)瀏覽效果3陜西新華電腦軟件學(xué)校-電子商務(wù)教研組任務(wù)一混排相關(guān)知識(shí)點(diǎn)background-image:url(圖片路徑);background-repeat:repeat-x;background-position:lefttop;4陜西新華電腦軟件學(xué)校-電子商務(wù)教研組任務(wù)二綜合應(yīng)用圖文混排-做人做事的藝術(shù)圖文混排-暢游普吉島圖像的陰影效果5陜西新華電腦軟件學(xué)校-電子商務(wù)教研組任務(wù)二綜合應(yīng)用知識(shí)點(diǎn)復(fù)習(xí)margin定義和用法margin簡(jiǎn)寫(xiě)屬性在一個(gè)聲明中設(shè)置所有外邊距屬性。該屬性可以有1到4個(gè)值。注釋：允許使用負(fù)值。6陜西新華電腦軟件學(xué)校-電子商務(wù)教研組任務(wù)二綜合應(yīng)用知識(shí)點(diǎn)復(fù)習(xí)例子1margin:10px5px15px20px;上外邊距是10px右外邊距是5px下外邊距是15px左外邊距是20px7陜西新華電腦軟件學(xué)校-電子商務(wù)教研組任務(wù)二綜合應(yīng)用知識(shí)點(diǎn)復(fù)習(xí)例子2margin:10px5px15px;上外邊距是10px右外邊距和左外邊距是5px下外邊距是15px8陜西新華電腦軟件學(xué)校-電子商務(wù)教研組任務(wù)二綜合應(yīng)用知識(shí)點(diǎn)復(fù)習(xí)例子3margin:10px5px;上外邊距和下外邊距是10px右外邊距和左外邊距是5px9陜西新華電腦軟件學(xué)校-電子商務(wù)教研組任務(wù)二綜合應(yīng)用知識(shí)點(diǎn)復(fù)習(xí)例子4margin:10px;所有4個(gè)外邊距都是10px瀏覽器支持所有瀏覽器都支持margin屬性。實(shí)例：magin.html

10陜西新華電腦軟件學(xué)校-電子商務(wù)教研組任務(wù)二綜合應(yīng)用注釋：任何的版本的InternetExplorer（包括IE8）都不支持屬性值"inherit"。

11陜西新華電腦軟件學(xué)校-電子商務(wù)教研組任務(wù)二綜合應(yīng)用基本方法：首先制作一個(gè)圖像經(jīng)驗(yàn)：這個(gè)圖像的大小可以隨意設(shè)定，但是如果圖像的大小大于這個(gè)陰影大小，則圖像的陰影就不能全部顯示，因此這個(gè)圖像應(yīng)該比里邊的圖像大些。12陜西新華電腦軟件學(xué)校-電子商務(wù)教研組任務(wù)二綜合應(yīng)用基本方法：給img標(biāo)簽外加個(gè)“div”<divclass="yx"><imgsrc="圖像"/></div>13陜西新華電腦軟件學(xué)校-電子商務(wù)教研組任務(wù)二綜合應(yīng)用基本方法：給DIV設(shè)置左浮動(dòng)設(shè)置圖像屬性實(shí)例：yingying.htm14陜西新華電腦軟件學(xué)校-電子商務(wù)教研組任務(wù)二綜合應(yīng)用使用“滑動(dòng)門(mén)”技術(shù)上述實(shí)例在firefox瀏覽器與IE7正常顯示，但是在IE6就不能正常顯示了。怎么解決IE6的問(wèn)題呢？使用“滑動(dòng)門(mén)”技術(shù)15陜西新華電腦軟件學(xué)校-電子商務(wù)教研組任務(wù)二綜合應(yīng)用基本方法：制作一個(gè)部分透明的GIF圖像，圖像的上邊和左邊各有“8”個(gè)像素的白色不透明區(qū)域，其余均為透明色。16陜西新華電腦軟件學(xué)校-電子商務(wù)教研組任務(wù)二綜合應(yīng)用基本方法：改造HTML代碼，把圖像外部再套一層DIV<divclass="youxiajiao"><div><imgsrc="cup.gif"/></div></div>注意：寫(xiě)代碼的時(shí)候<div><img>之間不要有空格。17陜西新華電腦軟件學(xué)校-電子商務(wù)教研組任務(wù)二綜合應(yīng)用基本方法設(shè)置CSS代碼18陜西新華電腦軟件學(xué)校-電子商務(wù)教研組本講總結(jié)綜合應(yīng)用19陜西新華電腦軟件學(xué)校