版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
CSS圖像屬性
圖像基本設(shè)置重點難點圖像大小圖像內(nèi)外邊距圖像邊框左漂右漂圖像對齊背景圖像屬性給圖像添加投影一、圖像基本設(shè)置1、圖像大小設(shè)置(width/height)img{width:150;height:150;}<imgsrc=“name.gif">參考1圖像大小設(shè)置.html2、圖像邊框
border-top-width:1px; border-top-style:solid; border-top-color:#FF0000;border-top:10px
solidred;簡寫方法:粗細(xì)樣式顏色圖像邊框樣式border-top-style:solid實線groove凹槽double雙線ridge凸槽dashed虛線inset凹邊dotted點狀線outset凸邊邊框練習(xí)參考2邊框練習(xí).html3、圖像左漂右漂(left/right)
img{
float:left;
}
<imgsrc="cup.gif">注意:只能設(shè)置左右漂,不能設(shè)置居中用于圖文混排參考3左漂右漂.html4、設(shè)置圖像的外邊距
img{margin:數(shù)值;}例如:margin:20px;表示上下左右邊距都為20margin-top上邊距
margin-right右邊距
margin-bottom下邊距
margin-left左邊距參考4外邊距.html圖像topleftrightbottom書寫順序:上右下左如何簡寫?margin:20px;=margin:20px20px20px20px;margin:30px40px;=margin:30px40px30px40px;margin:30px40px50px;=margin:30px40px50px40px;
省略規(guī)則:如果margin只有一個值,按照值的順序為margin:top;如果margin只有兩個值,按照值的順序為margin:topright;如果margin只有三個值,按照值的順序為margin:toprightbottom;margin練習(xí)Margin:50px;Margin:35px20px70px;Margin:50px90px;Margin:20px65px;Margin:10px55px30px;Margin:20px;Margin:45px25px60px;Margin:15px25px;5、設(shè)置圖像的內(nèi)邊距
img{padding:數(shù)值;(邊框到內(nèi)容的距離)}例如:padding:20px;表示上下左右邊距都為20
padding-top上內(nèi)邊距
padding-right右內(nèi)邊距
padding-bottom下內(nèi)邊距
padding-left左內(nèi)邊距img{border:5pxsolid#ff0000;padding:10px;}參考5內(nèi)邊距.html小技巧:給圖像設(shè)置padding時在FF里正常顯示,在IE里卻不可以,怎樣解決這一問題呢?方法很簡單在代碼的開始處寫入:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">參考5內(nèi)邊距.html6、圖像水平對齊:錯誤方法:img{text-align:center;}正確方法:p/div{text-align:center;}<p或div><imgsrc=“one.jpg”/></p或/div>7、圖像旁的文字垂直對齊:vertical-align:top/middle/bottom;參考6水平對齊.html參考7垂直對齊.html二、背景圖像1、設(shè)置背景圖像
<styletype="text/css">body{background-image:url(images/bg.gif);}</style>參考8背景圖像.html2、設(shè)置背景圖像平鋪
background-repeat:
repeat水平垂直兩個方向平鋪
no-repeat不平鋪
repeat-x水平方向平鋪
repeat-y垂直方向平鋪參考9背景圖像平鋪.html3、設(shè)置背景顏色
background-color:#3399ff;4、設(shè)置背景圖像的位置
background-position:bottomright;注意:一個值表示水平方向位置,一個值表示垂直方向位置。參考10背景顏色.html參考11、12背景圖像位置.html5、設(shè)置圖像背景滾動/固定
background-attachment:scroll/fixed;body{background-image:url(images/bg.gif);background-attachment:fixed;}參考13背景固定文字滾動.html6、背景樣式簡寫background-image:url(images/bg.gif);background-repeat:no-repeat;background-color:#3399ff;background-position:bottom
right;backgroun
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024年綠色能源項目合伙人共同投資合作協(xié)議范本3篇
- 多元化資產(chǎn)管理合同
- 辦公室空間利用合同
- 網(wǎng)絡(luò)文化產(chǎn)品交易服務(wù)平臺協(xié)議
- 常用購銷合同
- 軟件知識產(chǎn)權(quán)保護(hù)協(xié)議
- 2025版醫(yī)療健康企業(yè)100%股權(quán)出售及合作開發(fā)合同3篇
- 消防工程施工簡單協(xié)議書
- 少兒百科知識故事征文
- 水穩(wěn)料采購合同協(xié)議書
- 2025年河南鶴壁市政務(wù)服務(wù)和大數(shù)據(jù)管理局招聘12345市長熱線人員10人高頻重點提升(共500題)附帶答案詳解
- 《上海理工大學(xué)》課件
- 中職班主任培訓(xùn)
- 建設(shè)項目安全設(shè)施施工監(jiān)理情況報告
- 春節(jié)期間安全施工措施
- 安徽省合肥市2023-2024學(xué)年七年級上學(xué)期期末數(shù)學(xué)試題(含答案)
- 《國有企業(yè)管理人員處分條例》重點解讀
- 競技垂釣中心、旅游度假村建設(shè)項目可行性研究報告
- 肺脹中醫(yī)護(hù)理方案.ppt
- 裝飾辦公室工作總結(jié)
- 膩子、乳膠漆涂飾分項工程檢驗批驗收記錄
評論
0/150
提交評論