style屬性的詳細(xì)設(shè)置_第1頁(yè)
style屬性的詳細(xì)設(shè)置_第2頁(yè)
style屬性的詳細(xì)設(shè)置_第3頁(yè)
style屬性的詳細(xì)設(shè)置_第4頁(yè)
style屬性的詳細(xì)設(shè)置_第5頁(yè)
已閱讀5頁(yè),還剩1頁(yè)未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

divstyle常用屬性一、常用屬性:1、 Height:設(shè)置DIV的高度。2、 Width:設(shè)置DIV的寬度。例:<divstyle="width:200px;height:200px;background-color:Black;"> 內(nèi)容 </div>3、 margin:用于設(shè)置DIV的外延邊距,也就是到父容器的距離。例:<divstyle="background-color:Black;width:500px;height:500px;"><divstyle="margin:5px10px20px30px;width:200px;height:200px;background-color:White;"> 內(nèi)容 </div></div>說(shuō)明:margin:后面跟有四個(gè)距離分別為到父容器的上-右-下-左邊的距離;可以看例子中的白色DIV到黑色DIV的邊距離效果。還可以分別設(shè)置這四個(gè)邊的距離,用到的屬性如下:4、 margin-left:到父容器左邊框的距離。5、 margin-right:到父容器右邊框的距離。6、 margin-top:到父容器上邊框的距離。7、 margin-bottom:到父容器下邊框的距離。8、 padding:用于設(shè)置DIV的內(nèi)邊距。例:<divstyle=”padding:5px10px20px30px;background-color:black;width:500px;height:500px;”> 內(nèi)容 <divstyle=”width:200px;height:200px;background-color:white;”> 內(nèi)容 </div> 內(nèi)容 </div>說(shuō)明:padding的格式和margin的格式一樣,可以對(duì)照學(xué)習(xí)。可以看黑色DIV與白色DIV的邊距來(lái)體會(huì)此屬性的效果。這是還需要注意的是padding設(shè)置的距離不包括在本身的width和height內(nèi)(在IE7和FF中),比如一個(gè)DIV的width設(shè)置了100px,而padding-left設(shè)置了50px,那么這個(gè)DIV在頁(yè)面上顯示的將是150px寬。也可以用以下四個(gè)屬性來(lái)分別設(shè)置DIV的內(nèi)邊距:9、padding-left:左內(nèi)邊距。10、padding-right:右內(nèi)邊距。11、padding-top;上內(nèi)邊距。12、padding-bottom:下內(nèi)邊距。例:<divstyle="padding-left:50px;padding-top:50px;width:150px;height:150px;background-color:Black;"> 內(nèi)容 <divstyle="width:140px;height:140px;background-color:White;"> 內(nèi)容 </div> 內(nèi)容 </div>13、position:設(shè)置DIV的定位方式。例:<divstyle="width:200px;height:200px;background-color:Black;"><divstyle="position:relative;top:10px;left:10px;width:140px;height:140px;background-color:White;"></div><divstyle="position:absolute;top:60px;left:60px;background-color:Silver;width:100px;height:100px;"></div><divstyle="position:fixed;top:210px;left:210px;background-color:Navy;width:100px;height:100px;"></div></div><divstyle="position:absolute;top:50px;left:50px;background-color:Blue;width:100px;height:100px;"></div><divstyle="position:fixed;top:200px;left:200px;background-color:Navy;width:100px;height:100px;"></div><divstyle="position:static;top:200px;left:100px;background-color:Yellow;width:100px;height:100px;">v/div>說(shuō)明:position的屬性中有static、fixed、relative、absolute四個(gè)屬性。常用relative和absolute。若指定為static時(shí),DIV遵循HTML規(guī)則;若指定為relative時(shí),可以用top、left、right、bottom來(lái)設(shè)置DIV在頁(yè)面中的偏移,但是此時(shí)不可使用層;若指定為absolute時(shí),可以用top、left、right、bottom對(duì)DIV進(jìn)行絕對(duì)定位;若指定為fixed時(shí),在IE7與FF中DIV的位置相對(duì)于屏屏固定不變,IE6中沒有效果(期待高手指點(diǎn)原因);14、 left:設(shè)置對(duì)象相對(duì)于文檔層次中最近一個(gè)定位對(duì)象的左邊界的位置。15、 top:設(shè)置對(duì)象相對(duì)于文檔層次中最近一個(gè)定位對(duì)象的上邊界的位置。16、 right:設(shè)置對(duì)象相對(duì)于文檔層次中最近一個(gè)定位對(duì)象的右邊界的位置。17、 bottom:設(shè)置對(duì)象相對(duì)于文檔層次中最近一個(gè)定位對(duì)象的下邊界的位置。18、 z-index:設(shè)置DIV的層疊順序。例:vdivstyle="position:absolute;top:50px;left:50px;width:100px;height:100px;background-color:black;">v/div>vdivstyle="position:absolute;top:60px;left:60px;width:100px;height:100px;background-color:Blue;z-index:1;">v/div>vdivstyle="position:absolute;top:70px;left:70px;background-color:Silver;width:100px;height:100px;">v/div>說(shuō)明:上例效果中如果不設(shè)z-index屬性藍(lán)色DIV應(yīng)該在中間,而現(xiàn)在的效果藍(lán)色在最上面了。還要說(shuō)明的是用z-index屬性時(shí),position必需要指定為absolute才行。19、 font:指定DIV中文本的樣式,其后可跟文本的多個(gè)樣式。例:<divstyle="font:bold14px宋體;background-color:Yellow">明月幾時(shí)有?把酒問(wèn)青天。不知天上宮闕、今夕是何年?我欲乘風(fēng)歸去,惟恐瓊樓玉宇,高處不勝寒.起舞弄清影,何似在人間?轉(zhuǎn)朱閣,低綺戶,照無(wú)眠。不應(yīng)有恨、何事長(zhǎng)向別時(shí)圓?人有悲歡離合,月有陰晴圓缺,此事古難全。但愿人長(zhǎng)久,千里共蟬娟。</div>說(shuō)明:font后可以跟文本樣式的多個(gè)屬性,如字體粗細(xì)、字體大小、何種字體等等。還可以用以下幾個(gè)屬性分別加以設(shè)置:20、 font-family:設(shè)置要用的字體名稱;21、 font-weight:指定文本的粗細(xì),其值有boldbolderlighter等。22、 font-size:指定文本的大小。23、 font-style:指定文本樣式,其值有italicnormaloblique等。24、 color:指定文本顏色。25、 text-align:指定文本水平對(duì)齊方式,其值有center(居中)leftrightjustify。26、 text-decorator:用于文本的修飾。其值有noneunderlineoverlineline-through和blink的組合。(在IE中無(wú)閃爍效果,F(xiàn)F中有效果。期待高手指點(diǎn),)27、 text-indent:設(shè)置文本的縮進(jìn)。28、 text-transform:設(shè)置文本的字母大小寫。其值有l(wèi)owercaseuppercasecapitalize(首字母大寫)none。29、 overflow:內(nèi)容溢出控制,其值有scroll(始終顯示滾動(dòng)條)、visible(不顯示滾動(dòng)條,但超出部分可見)、auto(內(nèi)容超出時(shí)顯示滾動(dòng)條)、hidden(超出時(shí)隱藏內(nèi)容)。30、 direction:內(nèi)容的流向。其值有l(wèi)tr(從左至右)、rtl(從右至左)。31、 line-height:指定文本的行高。32、 Word-spacing:字間距。例:vdivstyle="font:16px宋體;width:600px;height:200px;word-spacing:5px;line-height:20px;direction:rtl;overflow:auto;background-color:Yellow">明月幾時(shí)有?把酒問(wèn)青天。不知天上宮闕、今夕是何年?我欲乘風(fēng)歸去,惟恐瓊樓玉宇,高處不勝寒.起舞弄清影,何似在人間?轉(zhuǎn)朱閣,低綺戶,照無(wú)眠。不應(yīng)有恨、何事長(zhǎng)向別時(shí)圓?人有悲歡離合,月有陰晴圓缺,此事古難全。但愿人長(zhǎng)久,千里共蟬娟。vbr/>v/div>33、 border:設(shè)置DIV的邊框樣式。例:vdivstyle="border:dotted2pxblack;background-color:Yellow;width:100px;height:100px;">v/div>說(shuō)明:border后跟邊框的樣式、寬度、顏色等屬性。還可以用以下屬性分別設(shè)置。34、 border-width:設(shè)置邊框的寬度。35、 border-color:設(shè)置邊框的顏色。36、 border-style:設(shè)置邊框的樣式。例:代碼vlabelstyle="font-size:14px;">選擇樣式:v/label><selectid="bstyle"onchange="document.getElementById('tdd').style.borderStyle=this.options[this.selectedIndex].text;"><optionselected="selected">none</option><option>dashed</option><option>dotted</option><option>groove</option><option>hidden</option><option>inset</option><option>outset</option><option>ridge</option><option>double</option><option>solid</option></select><divid="tdd"style="border-style:none;border-width:5px;border-color:Black;width:100px;height:100px;background-color:Yellow;"></div>說(shuō)明:border是對(duì)四個(gè)邊框同時(shí)進(jìn)行設(shè)置。也可以單獨(dú)對(duì)某一邊或幾個(gè)邊進(jìn)行設(shè)置,此時(shí)用以下屬性:border-top:設(shè)置上邊框樣式。37、 border-bottom:設(shè)置下邊框樣式。38、 border-left:設(shè)置左邊框樣式。39、 border-right:設(shè)置右邊框樣式。說(shuō)明:某一邊框的某一樣式也可單獨(dú)設(shè)置,以上邊框?yàn)槔梢杂茫篵order-top-style、border-top-width、border-top-color來(lái)分別設(shè)置,由于使用各border相同,所以不在舉例說(shuō)明。40、 display:設(shè)置顯示屬性。其值有block、none。41、 float:設(shè)置DIV在頁(yè)面上的流向,其值有l(wèi)eft(靠左顯示)、right(靠右顯示)、none。50、 background:設(shè)置DIV的背景樣式。例:<divstyle="width:600px;height:200px;background:yellowurl(mw3.jpg)repeatscroll;overflow:auto"><divstyle="width:2px;height:1000px;"></div></div>說(shuō)明:background后可直接跟背景的顏色、背景圖片、平鋪方式等樣式。也可以用以下屬性分別設(shè)置。51、 background-color:設(shè)置背景顏色。52、 background-attachment:背景圖像的附加方式,其值有scroll、fixed。53、 background-image:指定使有的背景圖片。54、 background-repeat:背景圖象的平鋪方式。其值有no-repeat(不平鋪)、repeat(兩個(gè)方向平鋪)、repeat-x(水平方向平鋪)、repeat-y(垂直方向平鋪)。55、 background-position:在DIV中定位背景位置。其值有topbottomleftright的不同組合。也可以以用坐標(biāo)指定具體的位置。例:<divstyle="background-color:Yellow;background-image:url(mw3.jpg);background-position:rightbottom;ackground-attachment:scroll;width:600px;height:200px;"></div>二、一些特殊效果:1、 cursor:設(shè)置DIV上光標(biāo)的樣式。2、 /r/

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論