divstyle常用屬性

1、div style 常用屬性一、常用屬性：1、Height:設(shè)置DIV的高度。2、Width:設(shè)置DIV的寬度。例：<div style= "width:200px;height:200px;background-color:Black;"v/div>復(fù)制代碼3、margin:用于設(shè)置DIV的外延邊距，也就是到父容器的距離。例：1 <div style= "background-color:Black;width:500px;height:500px;">22 <div style= "margin:5px 10p

2、x 20px 30px;width:200px; height:200px;background-color:White;">45 </div>7 </div>復(fù)制代碼說明：margin:后面跟有四個距離分別為到父容器的上-右-下-左邊的距離；可以看例子中的白色DIV到黑色DIV的邊距離效果。還可以分別設(shè)置這四個邊的距離，用到的屬性如下：4、margin-left:到父容器左邊框的距離。5、margin-right:到父容器右邊框的距離。6、margin-top:到父容器上邊框的距離。7、margin-bottom:到父容器下邊框的距離。例：UU代碼8、

3、padding:用于設(shè)置DIV的內(nèi)邊距。例：1 <div style= "padding:5px 10px 20px 30px;background-color:Black;width:500px;height:500px;">22 <div style= "width:200px; height:200px;background-color:White;"></div>43 </div>6復(fù)制代碼說明：padding的格式和margin的格式一樣，可以對照學(xué)習(xí)?？梢钥春谏獶IV與白色DIV的邊距來體會此屬

4、性的效果。這是還需要注意的是padding設(shè)置的距離不包括在本身的width 和 height 內(nèi)（在 IE7 和 FF 中），比如一個 DIV 的 width 設(shè)置了 100px,而 padding-left 設(shè)置了 50px,那么這個DIV在頁面上顯示的將是 150px寬。也可以用以下四個屬性來分別 設(shè)置DIV的內(nèi)邊距：9、padding-left:左內(nèi)邊距。10、padding-right:右內(nèi)邊距。11、padding-top;上內(nèi)邊距。12、padding-bottom: 下內(nèi)邊距。例：1 <div style= "padding-left:50px;padding-

5、top:50px;width:150px;height:150px;background-color:Black;">22 <div style= "width:140px; height:140px;background-color:White;">43 </div>64 </div>8復(fù)制代碼13、position:設(shè)置DIV的定位方式。例：冋ULJ代碼說明：position 的屬性中有 static、fixed、relative、absolute 四個屬性。常用 relative 和absolute。若指定為stat

6、ic時，DIV遵循HTML規(guī)則；若指定為relative時，可以用top、 left、right、bottom來設(shè)置DIV在頁面中的偏移，但是此時不可使用層；若指定為absolute時，可以用top、left、right、bottom 對DIV進(jìn)行絕對定位；若指定為 fixed時，在IE7與 FF中DIV的位置相對于屏屏固定不變，IE6中沒有效果（期待高手指點原因）；14、left:設(shè)置對象相對于文檔層次中最近一個定位對象的左邊界的位置。15、top:設(shè)置對象相對于文檔層次中最近一個定位對象的上邊界的位置。16、right:設(shè)置對象相對于文檔層次中最近一個定位對象的右邊界的位置。17、bott

7、om:設(shè)置對象相對于文檔層次中最近一個定位對象的下邊界的位置。18、z-index:設(shè)置DIV的層疊順序。例：說明：上例效果中如果不設(shè)z-index屬性藍(lán)色DIV應(yīng)該在中間，而現(xiàn)在的效果藍(lán)色在最上面了。還要說明的是用z-index屬性時，position必需要指定為absolute才行。19、font:指定DIV中文本的樣式，其后可跟文本的多個樣式。例：匚<div style=" font:bold 14px宋體；background-color:Yellow">明月幾時有？把酒問青天。不知天上宮闕、今夕是何年？我欲乘風(fēng)歸去，惟恐瓊樓玉宇，高處不勝寒起舞弄清影，

8、何似在人間？轉(zhuǎn)朱閣，低綺戶，照無眠。不應(yīng)有恨、何事長向別時圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但愿人長久，千里共蟬娟。</div>說明：font后可以跟文本樣式的多個屬性，如字體粗細(xì)、字體大小、何種字體等等。還可以用以下幾個屬性分別加以設(shè)置：20、font-family:設(shè)置要用的字體名稱；21、font-weight:指定文本的粗細(xì)，其值有 bold bolder lighter 等。22、font-size:指定文本的大小。23、 font-style:指定文本樣式，其值有italic normal oblique 等。24、color:指定文本顏色。25、text-a

9、lign:指定文本水平對齊方式，其值有 center（居中）left right justify 。26、 text-decorator: 用于文本的修飾。其值有none underline overline line-through禾口blink的組合。（在IE中無閃爍效果，F(xiàn)F中有效果。期待高手指點，）27、text-indent:設(shè)置文本的縮進(jìn)。28、 text-transform: 設(shè)置文本的字母大小寫。其值有 lowercase uppercase capitalize（ 首字母大寫）none。例：ULJ代碼29、 overflow:內(nèi)容溢出控制，其值有scroll（始終顯示滾動條）

10、、visible（不顯示滾動條，但超出部分可見）、auto（內(nèi)容超出時顯示滾動條）、hidden（超出時隱藏內(nèi)容）。30、 direction:內(nèi)容的流向。其值有l(wèi)tr（從左至右 卜rtl（從右至左）。31、line-height:指定文本的行高。32、Word-spacing:字間距。例：UU代碼33、border:設(shè)置DIV的邊框樣式。例：冋<div style= "border:dotted 2px black; background-color:Yellow; width:100px;height:100px;">v/div>復(fù)制代碼說明：bord

11、er后跟邊框的樣式、寬度、顏色等屬性。還可以用以下屬性分別設(shè)置。34、border-width:設(shè)置邊框的寬度。35、border-color :設(shè)置邊框的顏色。36、border-style:設(shè)置邊框的樣式。例:LJ"代碼說明：border是對四個邊框同時進(jìn)行設(shè)置。也可以單獨對某一邊或幾個邊進(jìn)行設(shè)置，此時用以下屬性：border-top:設(shè)置上邊框樣式。37、border-bottom:設(shè)置下邊框樣式。38、border-left:設(shè)置左邊框樣式。39、border-right:設(shè)置右邊框樣式。說明：某一邊框的某一樣式也可單獨設(shè)置，以上邊框為例可以用：border-top-styl

12、e、border-top-width、border-top-color 來分別設(shè)置，由于使用各 border相同，所以不在舉例說 明。40、 display:設(shè)置顯示屬性。其值有block、none。41、 float:設(shè)置DIV在頁面上的流向，其值有 left（靠左顯示）、right（靠右顯示）、none。50、background:設(shè)置DIV的背景樣式。例：01 <div style= "width:600px;height:200px; background:yellow url(mw3.jpg) r epeat scroll;22 overflow:auto "

13、;>43 <div style= "width:2px;height:1000px;"></div>67 </div>復(fù)制代碼說明：background后可直接跟背景的顏色、背景圖片、平鋪方式等樣式。也可以用以 下屬性分別設(shè)置。51、background-color:設(shè)置背景顏色。52、 background-attachment:背景圖像的附加方式，其值有scroll、fixed。53、background-image:指定使有的背景圖片。54、 background-repeat:背景圖象的平鋪方式。其值有no-repeat（不

14、平鋪）、repeat（兩 個方向平鋪卜repeat-x（水平方向平鋪）、repeat-y（垂直方向平鋪）。55、background-position: 在 DIV 中定位背景位置。 其值有 top bottom left right 的不同 組合。也可以以用坐標(biāo)指定具體的位置。例：1 <div style= "background-color:Yellow; background-image:url(mw3.jpg); background-position:right bottom; background-attachment:scroll; width:600 px;he

15、ight:200px;">22 </div>4復(fù)制代碼二、一些特殊效果：1、cursor:設(shè)置DIV上光標(biāo)的樣式。2、clip:設(shè)置剪輯矩形。例：LILI代碼說明：clip:rect(top right bottom left);設(shè)置上下左右的距離，但此時要把 position指定為absolute?？匆陨闲Ч?。3、filter:濾鏡效果。例：0LT代碼說明：設(shè)置透明度:opacity : value (FF專用，value的取值為0至1之間的小數(shù))， filter:alpha(opacity=value)(IE 專用，value 取值：0 至 100)。如果要有J

16、avaScript改變DIV的透明度可用下面的方法：FF 中：document.getElementByld('tdiv').style.opacity='0.9：IE 中：document.getElementByld('tdiv').style.filter='alpha(opacity=90)：所以就*以下是濾鏡綜合的例子， 將以下代碼復(fù)制到一個網(wǎng)頁文件中就可看到其效果， 不要加以說明了。例：囘 <style type="text/css">II#pa neldiv divbackgro un d-Color

17、:yellow;I height:200px;I width:200px;</style><div id="pa neldiv" style="width:230px;height:2300px;backgro un d-color:Blue;"><div style="filter:alpha(opacity=0,fi ni shopacity=80,style=1,一 startx=10,starty=10,Fi nishX=100, Fini shY=100);opacity:0.5;"> a

18、lpha 效果:<br /></div><div style="filter:blur(add=1,directio n=100,stre ngth=5);">gray 效果：<br/>|_ladd為1代表字有陰影，0代表字全部模糊。|_|abcdefghijkl mno pqrstuvwxyzI"! </div>| | <div style="filter:chroma(color='#ff0000')" onclick="this.style.bac

19、kgroundColor='#ff0000'" on dblclick="this.style.backgro un dColor='black'">nchroma 效果：<br/>原為黃色，單擊變成紅色變成透明，雙擊變成黑色。</div><div style="filter:FlipH;">fliph 效果：<br/>ABCDEFGH<br />IJKLMNOP<br/>此屬性在設(shè)置寬高后有效</div><div s

20、tyle="filter:FlipV;">flipv 效果：<br/>ABCDEFGH<br />IJKLMNOP<br />此屬性在設(shè)置寬高后有效</div><div style="filter:gray;">abcdefghijkl mnI | </div>Hl <div style="filter:i nvert; text-tra nsform:uppercase;color:Red;">invert 效果：<br/>匚I背景

21、色變成相反顏色，如黑變成白。I l </div><div style="filter:wave（add=0,freq=3,lightstre ngth=20,phase=3,stre ngth=10）">I lwave 效果：<br />IAdd : 一般為1,或0。 （0表示上下波浪）匚IFreq :變形值。（指定多少個波浪）I丨LightStrength :變形百分比。（變形后的陰影。）（數(shù)值越Phase :角度變形百分比。（彎曲的角度）Strength :變形強(qiáng)度。大，DIV變形就越大。）I"! </div>&

22、lt;div style="filter:Xray">xray 效果：<br /> sfasdfasdfasdfsadf</div><div style="filter: progid:DXImageTra nsform.Microsoft.Gradie nt效果：<br/>(Gradie ntType=0, StartColorStr='#B5CCFA', En dColorStr='#ffffff);">progid:dximagetra nsform.microsoft.

23、gradie ntshadow 效果：<br />endendendendendendendendendend| | </div></div><div style="filter:DropShadow(color='#666666',OffX='3',OffY=3,| Positive='1');width:200px;height:200px;"> dropshadow 效果：<br /> 此效果只有在不設(shè)置背景色時有效，這時Color指定的將成為背景色。此時背上的

24、字將是清晰的。positive為0時color將成為背景色，為 1時color只是文本投影的顏 色。</div><div style="filter:Glow(color='#0000ff,stre ngth='3');width:100px;height:100px;">glow 效果：<br/>strength的光的強(qiáng)度0-100 ;此時不能設(shè) DIV的背景色。</div><div style="filter:mask(color='ff0000'); width:1

25、00p x;height:100px;text-transform:uppercase;color:black;">mask 效果：<br />沒有明顯效果，不能設(shè)背景色。</div><div style="filter:shadow(color='0000ff,directio n='100');width:100px;height:100px;">shadow 效果：<br />abcdefghijkl mnI | </div>I | <div style=&quo

26、t;filter:Xray;width:1OOpx;height:1OOpx;backgro un d-color:red;">xray 效果：<br/>I | sfasdfasdfasdfsadfI | </div><div style="filter: progid:DXImageTra nsform.Microsoft.Gradie nt(Gradie ntType=100, StartColorStr='#B5CCFA', En dColorStr='#ffffff);width:100px;height:

27、100px;">漸變效果。endendendendendendendendendend</div><div style="filter:progid:dXImageTra nsform.Microsoft.Pixelate(maxsquare=5);width:100px;height:100px;"></div>lsksalsslalalalalalalal<div style="filter:alpha(opacity=100, fini shOpacity=0,style=2);width:100p

28、x; height:100px;backgrou nd-color:Yellow;"> </div>DIV邊框樣式設(shè)置I總I 1.外凸邊框：'' 效果：日志文字代碼：<div style="BORDER-RIGHT: 3px outset; BORDER-TOP: 3px outset; BACKGROUND: #ffffff;BORDER-LEFT: 3px outset; WIDTH: 100%; BORDER-BOTTOM: 3px outset; HEIGHT: 100%" align=left>日志文字<

29、;/DIV>代碼說明：藍(lán)色部分為可修改部分，一一說明：四個2表示凸起邊框的寬度，用1的話不太明顯，2或3比較合適；四個outset表示邊框類型為"凸起"，如果都改成inset或者double，就分別是凹陷邊框和雙線邊框的效果，其他效 果下文會給出完整代碼；WIDTH: 100%; 和HEIGHT: 100% 表示這個框的寬度占日志寬度的百分之百，當(dāng)窗口伸縮的時候，框的寬度也會 隨著伸縮，HEIGHT表示高度，另外，還有一種表示方法以px為單位的，表示單位為象素，例如：WIDTH: 355px 表 示框的寬度為355象素，不同的版式，日志寬度是不一樣，可參考這里給定的值

30、，一般的情況下，用百分比表示就可以 了，但是有的時候需要用象素來確定大小，見機(jī)行事吧；align=left表示框內(nèi)內(nèi)容的排列方式為左對齊，把left分別改成center或right分別為居中對齊和右對齊，如果想左對齊的話，可以把a(bǔ)lign=left 刪掉，缺省情況下是左對齊；ffffff表示框內(nèi)的背景色，ffffff表示白色（000000表示黑色），顏色值可參考這個表來選擇，另外，將 #ffffff改為 transprant即為透明背景，個人認(rèn)為透明背景比較常用；為了方便復(fù)制粘貼，給出透明背景的邊框代碼如下：（框內(nèi)紅色部分為代碼）<DIV style="BORDER- RIGH

31、T: 3px outset; BORDER-TOP: 3px outset; BACKGROUND: transprant;BORDER-LEFT: 3px outset; WIDTH: 100%; BORDER-BOTTOM: 3px outset; HEIGHT: 100%" align=left>日志文字</DIV>日志文字為框內(nèi)的日志內(nèi)容，沒有必要在代碼里編輯，回到普通設(shè)計模式，雙擊生成的框，即可進(jìn)入框內(nèi)編輯文字。內(nèi)凹邊框:效果： 日志文字代碼：<DIV style="BORDER-RIGHT: 3px inset; BORDER-TOP:

32、3px inset; BACKGROUND: #ffffff; BORDER-LEFT:3px inset; WIDTH: 100%; BORDER- BOTTOM: 3px inset; HEIGHT: 100%" align=left>日志文字 </DIV>透明背景內(nèi)凹邊框代碼：<DIV style="BORDER- RIGHT: 3px inset; BORDER-TOP: 3px inset; BACKGROUND: transprant;BORDER-LEFT: 3px inset; WIDTH: 100%; BORDER-BOTTOM:

33、3px inset; HEIGHT: 100%" align=left> 日 志文字 </DIV> 代碼說明：類似上面的，略2. 雙線邊框：<DIV style="BORDER-RIGHT: 3px double #000000; BORDER-TOP: 3px double #000000;BACKGROUND: #ffffff; BORDER-LEFT: 3px double #000000; WIDTH: 100%; BORDER-BOTTOM: 3pxdouble #000000; HEIGHT: 100%" align=left> 日志文字 </DIV> 透明背景雙線邊框代碼：<DIV style="BORDER-RIGHT: 3px double #000000; BORDER-TOP: 3px double #000000;BACKGROUND: transprant; BORDER-LEFT: 3px dou