div+css背景.ppt

div+css背景.ppt

ID:48854516

大小:3.19 MB

頁數(shù):17頁

時間:2020-01-31

div+css背景.ppt_第1頁
div+css背景.ppt_第2頁
div+css背景.ppt_第3頁
div+css背景.ppt_第4頁
div+css背景.ppt_第5頁
資源描述:

《div+css背景.ppt》由會員上傳分享,免費在線閱讀,更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、回顧與檢查“border:1pxdashed#00FF33;”代表什么?盒子模型屬性有哪些?什么是標(biāo)準(zhǔn)文檔流?display屬性的作用是什么?本章目標(biāo)會使用背景屬性美化網(wǎng)頁元素會使用background屬性簡寫背景樣式背景在網(wǎng)頁中的應(yīng)用背景在網(wǎng)頁中的應(yīng)用是網(wǎng)頁設(shè)計中最常用的一種技術(shù)背景顏色,背景圖像,都能為頁面增加豐富的視覺效果背景顏色背景顏色(background-color)用于設(shè)置網(wǎng)頁元素的背景顏色設(shè)置標(biāo)題背景顏色設(shè)置

背景顏色設(shè)置單元格背景顏色背景顏色背景顏色(background-color)屬性值:顏色名稱、十六進(jìn)制

2、色值、rgb代碼、關(guān)鍵字語法規(guī)則background-color:#FFFF00;如果一個元素沒有指定背景顏色,那么它的背景顏色就是透明的設(shè)置方式與color屬性相同背景圖像背景圖像(background-image)用于設(shè)置網(wǎng)頁元素的背景圖像屬性值:指向圖像的路徑語法規(guī)則background-image:url(lotus.jpg);不能繼承父類屬性,其默認(rèn)值是none。表示背景上沒有放置任何圖像圖像的存放路徑背景圖像背景圖像(background-image)為設(shè)置背景圖像圖像會自動沿著水平和垂直兩個方向平鋪為body標(biāo)

3、簽添加背景圖像背景圖像背景圖像(background-image)為

設(shè)置背景圖像為h1標(biāo)簽添加背景圖像背景重復(fù)背景重復(fù)(background-repeat)用于控制圖像平鋪的方式和方向?qū)傩灾担宏P(guān)鍵字屬性值說明repeat沿水平和垂直兩個方向平鋪no-repeat不平鋪,即只顯示一次repeat-x只沿水平方向平鋪repeat-y只沿垂直方向平鋪默認(rèn)情況下,圖像會自動向水平和垂直兩個方向平鋪背景重復(fù)背景重復(fù)(background-repeat)顯示效果repeatno-repeatrepeat-yrepeat-x背景重復(fù)背景重復(fù)(

4、background-repeat)語法規(guī)則background-repeat:repeat-x;只沿水平方向平鋪背景定位背景定位(background-position)用于控制圖像在背景中的位置屬性值:關(guān)鍵字、長度值、百分?jǐn)?shù)值關(guān)鍵字:top、bottom、left、right和center長度值:像素(px)、厘米(cm)等百分?jǐn)?shù)值:x%y%想要精確定位圖像位置,常使用長度值px背景定位屬性值說明關(guān)鍵字toplefttopcentertoprightcenterleftcentercentercenterrightbottomlef

5、tbottomcenterbottomright1.第一個值是水平位置,第二個值是垂直位置;2.如果僅設(shè)定了一個關(guān)鍵詞,那么第二個值將是“center”3.默認(rèn)值:0%0%百分?jǐn)?shù)值x%y%1.第一個值是水平位置,第二個值是垂直位置;2.左上角是0%0%,右下角是100%100%。3.如果僅規(guī)定了一個值,另一個值將是50%。4.%和position值可以混合使用,不可以和關(guān)鍵字混合使用。長度值xposypos1.pos為”position”的簡寫,這里表示第一個值是水平位置,第二個值是垂直位置;2.左上角是00。單位是像素(0px0px)

6、或任何其他的CSS單位;3.如果僅規(guī)定了一個值,另一個值將是50%;背景定位背景定位(background-position)顯示效果改變荷花在背景中的位置背景定位背景定位(background-position)語法規(guī)則background-position:140px210px;水平右移140px垂直下移210px圖片未被完全顯示原因:圖片本身的寬度與位置距離之和大于了容器盒子寬度時,超出的部分就不能被顯示了背景屬性背景(background)簡寫背景樣式同時設(shè)置多個背景屬性background-image:url(lotus2.j

7、pg);background-repeat:no-repeat;background-position:140px210px;background-color:#CCFFFF;background:url(lotus2.jpg)no-repeat140px210px#CCFFFF;屬性之間用英文輸入模式下的空格分隔開4條背景屬性規(guī)則使用一條CSS規(guī)則簡寫總結(jié)背景屬性包括哪些屬性?這些屬性的作用分別是什么?使用background-image屬性設(shè)置背景圖像時,背景圖像是如何顯示的?可以同時設(shè)置多個背景屬性的屬性是什么?總結(jié)并布置作業(yè)

當(dāng)前文檔最多預(yù)覽五頁,下載文檔查看全文

此文檔下載收益歸作者所有

當(dāng)前文檔最多預(yù)覽五頁,下載文檔查看全文
溫馨提示:
1. 部分包含數(shù)學(xué)公式或PPT動畫的文件,查看預(yù)覽時可能會顯示錯亂或異常,文件下載后無此問題,請放心下載。
2. 本文檔由用戶上傳,版權(quán)歸屬用戶,天天文庫負(fù)責(zé)整理代發(fā)布。如果您對本文檔版權(quán)有爭議請及時聯(lián)系客服。
3. 下載前請仔細(xì)閱讀文檔內(nèi)容,確認(rèn)文檔內(nèi)容符合您的需求后進(jìn)行下載,若出現(xiàn)內(nèi)容與標(biāo)題不符可向本站投訴處理。
4. 下載文檔時可能由于網(wǎng)絡(luò)波動等原因無法下載或下載錯誤,付費完成后未能成功下載的用戶請聯(lián)系客服處理。