欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

一、常用屬性：

1、Height:設置DIV的高度。

2、Width:設置DIV的寬度。

例：

 

 

<div style="width:200px;height:200px;background-color:Black;">

</div>

 

 

 

3、margin:用于設置DIV的外延邊距，也就是到父容器的距離。

 例：

 

1 <div style="background-color:Black;width:500px;height:500px;">
2 
3      <div style="margin:5px 10px 20px 30px;width:200px; height:200px;background-color:White;">
4 
5      </div>
6 
7  </div>

 

 

 

說(shuō)明：margin:后面跟有四個(gè)距離分別為到父容器的上-右-下-左邊的距離；可以看例子中的白色DIV到黑色DIV的邊距離效果。還可以分別設置這四個(gè)邊的距離，用到的屬性如下：

4、margin-left:到父容器左邊框的距離。

5、margin-right:到父容器右邊框的距離。

6、margin-top: 到父容器上邊框的距離。

7、margin-bottom:到父容器下邊框的距離。

例：

 

代碼

 1 <div style="width:500px;height:500px;background-color:Black;">
 2 
 3       <div style="margin-left:50px; margin-top:50px; width:200px; height:200px;
 4  
 5           background- color:White;">
 6  
 7       </div>
 8 
 9  </div>
10  

 

 

8、padding:用于設置DIV的內邊距。

例：

 

1 <div style="padding:5px 10px 20px 30px;background-color:Black;width:500px;height:500px;">
2 
3      <div style="width:200px; height:200px;background-color:White;"></div>
4 
5  </div>
6  

 

 

 

說(shuō)明：padding的格式和margin的格式一樣，可以對照學(xué)習?？梢钥春谏獶IV與白色DIV的邊距來(lái)體會(huì )此屬性的效果。這是還需要注意的是padding設置的距離不包括在本身的width和height內(在IE7和FF中)，比如一個(gè)DIV的width設置了100px,而padding-left設置了50px,那么這個(gè)DIV在頁(yè)面上顯示的將是150px寬。也可以用以下四個(gè)屬性來(lái)分別設置DIV的內邊距：

 

9、padding-left:左內邊距。

10、padding-right: 右內邊距。

11、padding-top; 上內邊距。

12、padding-bottom: 下內邊距。

例：

 

 

1 <div style="padding-left:50px;padding-top:50px;width:150px;height:150px;background-color:Black;">
2 
3      <div style="width:140px; height:140px;background-color:White;">
4 
5      </div>
6 
7  </div>
8  

 

 

13、position:設置DIV的定位方式。

例：

 

 

代碼

 1 <div style="width:200px; height:200px;background-color:Black;">
 2 
 3      <div style="position:relative; top:10px;left:10px; width:140px; height:140px;
 4  
 5 background-color:White;">
 6  
 7      </div>
 8 
 9      <div style="position:absolute; top:60px;left:60px; background-color:Silver;
10  
11 width:100px;height:100px;">
12  
13      </div>
14 
15      <div style="position:fixed; top:210px;left:210px; background-color:Navy;
16  
17 width:100px;height:100px;">
18  
19      </div>
20 
21  </div>
22 
23  <div style="position:absolute; top:50px;left:50px; background-color:Blue;
24  
25 width:100px;height:100px;">
26  
27  </div>
28 
29  <div style="position:fixed; top:200px;left:200px; background-color:Navy;
30  
31 width:100px;height:100px;">
32  
33  </div>
34 
35  <div style="position:static; top:200px;left:100px; background-color:Yellow;
36  
37 width:100px;height:100px;">
38 
39 </div>

 

 

說(shuō)明：position的屬性中有static、fixed、relative、absolute四個(gè)屬性。常用relative和absolute。若指定為static時(shí)，DIV遵循HTML規則；若指定為relative時(shí)，可以用top、left、right、bottom來(lái)設置DIV在頁(yè)面中的偏移，但是此時(shí)不可使用層；若指定為absolute時(shí)，可以用top、left、right、bottom對DIV進(jìn)行絕對定位；若指定為fixed時(shí)，在IE7與FF中DIV的位置相對于屏屏固定不變，IE6中沒(méi)有效果(期待高手指點(diǎn)原因)；

14、left:設置對象相對于文檔層次中最近一個(gè)定位對象的左邊界的位置。

15、top:設置對象相對于文檔層次中最近一個(gè)定位對象的上邊界的位置。

16、right:設置對象相對于文檔層次中最近一個(gè)定位對象的右邊界的位置。

17、bottom:設置對象相對于文檔層次中最近一個(gè)定位對象的下邊界的位置。

18、z-index:設置DIV的層疊順序。

例：

 

 

代碼

 1 <div style="position:absolute; top:50px;left:50px; width:100px; height:100px;background-color:black;">
 2 
 3 </div>
 4 
 5 <div style="position:absolute; top:60px;left:60px; width:100px; height:100px; 
 6 
 7 background-color:Blue;z-index:1;">
 8 
 9 </div>
10 
11 <div style="position:absolute; top:70px;left:70px; background-color:Silver;width:100px;height:100px;">
12 
13 </div>
14 

 

 

 

說(shuō)明：上例效果中如果不設z-index屬性藍色DIV應該在中間，而現在的效果藍色在最上面了。還要說(shuō)明的是用z-index屬性時(shí)，position必需要指定為absolute才行。

19、font:指定DIV中文本的樣式，其后可跟文本的多個(gè)樣式。

例：

<div style=" font:bold 14px 宋體;background-color:Yellow">

明月幾時(shí)有？把酒問(wèn)青天。不知天上宮闕、今夕是何年？我欲乘風(fēng)歸去，惟恐瓊樓玉宇，高處不勝寒．起舞弄清影，何似在人間？　　轉朱閣，低綺戶(hù)，照無(wú)眠。不應有恨、何事長(cháng)向別時(shí)圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但愿人長(cháng)久，千里共蟬娟。

</div>

說(shuō)明：font后可以跟文本樣式的多個(gè)屬性，如字體粗細、字體大小、何種字體等等。還可以用以下幾個(gè)屬性分別加以設置：

20、font-family:設置要用的字體名稱(chēng)；

21、font-weight:指定文本的粗細,其值有bold bolder lighter等。

22、font-size:指定文本的大小。

23、font-style:指定文本樣式，其值有italic normal oblique等。

24、color:指定文本顏色。

25、text-align:指定文本水平對齊方式，其值有center(居中) left  right justify。

26、text-decorator:用于文本的修飾。其值有none underline overline line-through和blink的組合。

(在IE中無(wú)閃爍效果，FF中有效果。期待高手指點(diǎn)，)

27、text-indent:設置文本的縮進(jìn)。

28、text-transform:設置文本的字母大小寫(xiě)。其值有lowercase uppercase capitalize(首字母大寫(xiě)) none。

例：

 

代碼

 1 <div style="text-align:left; text-decoration:line-through blink; text-indent:30px;
 2 
 3  text-transform:capitalize;color:Blue; font:bold italic 14px 宋體; background-color:Yellow">
 4 
 5 明月幾時(shí)有？把酒問(wèn)青天。不知天上宮闕、今夕是何年？我欲乘風(fēng)歸去，惟恐瓊樓玉宇，高處不勝寒．起舞弄清影，何似在人間？　　轉朱閣，低綺戶(hù)，照無(wú)眠。不應有恨、何事長(cháng)向別時(shí)圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但愿人長(cháng)久，千里共蟬娟。
 6 
 7 abcdefghijklmnopqRSTUVWXYZ
 8 
 9 </div>
10 

 

 

 

29、overflow:內容溢出控制，其值有scroll(始終顯示滾動(dòng)條)、visible(不顯示滾動(dòng)條，但超出部分可見(jiàn))、

 

auto(內容超出時(shí)顯示滾動(dòng)條)、hidden(超出時(shí)隱藏內容)。

30、direction:內容的流向。其值有ltr(從左至右)、rtl(從右至左)。

31、line-height:指定文本的行高。

32、Word-spacing:字間距。

例：

 

代碼

 1 <div style="font:16px 宋體;width:600px;height:200px; word-spacing:5px; line-height:20px; 
 2 
 3 direction:rtl; overflow:auto;background-color:Yellow">
 4 
 5     明月幾時(shí)有？把酒問(wèn)青天。不知天上宮闕、今夕是何年？我欲乘風(fēng)歸去，惟恐瓊樓玉宇，高處不勝寒．起舞弄清影，何似在人間？　　轉朱閣，低綺戶(hù)，照無(wú)眠。不應有恨、何事長(cháng)向別時(shí)圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但愿人長(cháng)久，千里共蟬娟。<br />
 6 
 7     明月幾時(shí)有？把酒問(wèn)青天。不知天上宮闕、今夕是何年？我欲乘風(fēng)歸去，惟恐瓊樓玉宇，高處不勝寒．起舞弄清影，何似在人間？　　轉朱閣，低綺戶(hù)，照無(wú)眠。不應有恨、何事長(cháng)向別時(shí)圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但愿人長(cháng)久，千里共蟬娟。<br />
 8 
 9     明月幾時(shí)有？把酒問(wèn)青天。不知天上宮闕、今夕是何年？我欲乘風(fēng)歸去，惟恐瓊樓玉宇，高處不勝寒．起舞弄清影，何似在人間？　　轉朱閣，低綺戶(hù)，照無(wú)眠。不應有恨、何事長(cháng)向別時(shí)圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但愿人長(cháng)久，千里共蟬娟。<br />
10 
11     明月幾時(shí)有？把酒問(wèn)青天。不知天上宮闕、今夕是何年？我欲乘風(fēng)歸去，惟恐瓊樓玉宇，高處不勝寒．起舞弄清影，何似在人間？　　轉朱閣，低綺戶(hù)，照無(wú)眠。不應有恨、何事長(cháng)向別時(shí)圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但愿人長(cháng)久，千里共蟬娟。
12 
13 </div>

 

 

 

33、border:設置DIV的邊框樣式。

例：

 

<div style="border:dotted 2px black; background-color:Yellow; width:100px;height:100px;">

</div>

 

 

 

說(shuō)明：border后跟邊框的樣式、寬度、顏色等屬性。還可以用以下屬性分別設置。

34、border-width:設置邊框的寬度。

35、border-color：設置邊框的顏色。

36、border-style:設置邊框的樣式。

例：

 

代碼

 1 <label style="font-size:14px;">選擇樣式：</label>
 2 
 3 <select id="bstyle" onchange="document.getElementById('tdd').style.
 4 
 5 borderStyle=this.options[this.selectedIndex].text;">
 6 
 7 <option selected="selected">none</option>
 8 
 9 <option>dashed</option>
10 
11 <option>dotted</option>
12 
13 <option>groove</option>
14 
15 <option>hidden</option>
16 
17 <option>inset</option>
18 
19 <option>outset</option> 
20 
21 <option>ridge</option>
22 
23 <option>double</option>
24 
25 <option>solid</option>
26 
27 </select>
28 
29 <div id="tdd" style="border-style:none; border-width:5px; border-color:Black; width:100px;height:100px;background-color:Yellow;">
30 
31 </div>

 

 

 

說(shuō)明：border是對四個(gè)邊框同時(shí)進(jìn)行設置。也可以單獨對某一邊或幾個(gè)邊進(jìn)行設置，此時(shí)用以下屬性：

 

border-top:設置上邊框樣式。

37、border-bottom:設置下邊框樣式。

38、border-left:設置左邊框樣式。

39、border-right:設置右邊框樣式。

說(shuō)明：某一邊框的某一樣式也可單獨設置，以上邊框為例可以用：border-top-style、border-top-width、border-top-color來(lái)分別設置，由于使用各border相同，所以不在舉例說(shuō)明。

40、display:設置顯示屬性。其值有block、none。

41、float:設置DIV在頁(yè)面上的流向，其值有left(靠左顯示)、right(靠右顯示)、none。

50、background:設置DIV的背景樣式。

例：

 

1 <div style="width:600px;height:200px; background:yellow url(mw3.jpg) repeat scroll; 
2 
3 overflow:auto">
4 
5 <div style="width:2px;height:1000px;"></div>
6 
7 </div>

 

 

說(shuō)明：background后可直接跟背景的顏色、背景圖片、平鋪方式等樣式。也可以用以下屬性分別設置。

51、background-color:設置背景顏色。

52、background-attachment:背景圖像的附加方式，其值有scroll、fixed。

53、background-image:指定使有的背景圖片。

54、background-repeat:背景圖象的平鋪方式。其值有no-repeat(不平鋪)、repeat(兩個(gè)方向平鋪)、

repeat-x(水平方向平鋪)、repeat-y(垂直方向平鋪)。

55、background-position:在DIV中定位背景位置。其值有top bottom left right的不同組合。也可以以用坐標

指定具體的位置。

例：

 

1 <div style="background-color:Yellow; background-image:url(mw3.jpg); background-position:right bottom; background-attachment:scroll; width:600px;height:200px;">
2 
3 </div>
4 

 

 

 

 

 

二、一些特殊效果：

1、cursor:設置DIV上光標的樣式。

2、clip:設置剪輯矩形。

例：

 

代碼

<div style="font:16px 宋體;width:600px;height:200px; cursor:help; clip:rect(0px 100px 20px 0px); line-height:20px; overflow:auto;background-color:Yellow;position:absolute">

div樣式測式how areyou.

</div>

 

 

說(shuō)明：clip:rect(top right bottom left);設置上下左右的距離,但此時(shí)要把position指定為absolute?？匆陨闲Ч?。

3、filter:濾鏡效果。

例：

 

代碼

<div style="width:450px;height:200px;background-color:Blue;">

     <div id=”tdiv” style="background-color:Yellow; filter:alpha(opacity=50);opacity:0.5;

float:left; width:200px;height:200px;" >

     </div>

     <div style="background-color:Yellow; width:200px;height:200px;float:left;">

     </div>

</div>

 

 

說(shuō)明：設置透明度:opacity：value (FF專(zhuān)用,value的取值為0至1之間的小數)，filter:alpha(opacity=value)(IE專(zhuān)用，value取值：0至100)。

如果要有JavaScript改變DIV的透明度可用下面的方法：

FF中：document.getElementById('tdiv').style.opacity='0.9';

IE中：document.getElementById('tdiv').style.filter='alpha(opacity=90)';

 

* 以下是濾鏡綜合的例子，將以下代碼復制到一個(gè)網(wǎng)頁(yè)文件中就可看到其效果，所以就不要加以說(shuō)明了。

例：

 

<style type="text/css">

       #paneldiv div

       {

          background-Color:yellow;

          height:200px;

          width:200px;

       }

</style>

<div id="paneldiv" style="width:230px;height:2300px;

background-color:Blue;">

    <div style="filter:alpha(opacity=0,finishopacity=80,style=1,

startx=10,starty=10,FinishX=100, FinishY=100);opacity:0.5;">

     alpha效果:<br />

    </div>

    <div style="filter:blur(add=1,direction=100,strength=5);">

              blur效果：<br />

              add為1代表字有陰影，0代表字全部模糊。

              abcdefghijklmnopqrstuvwxyz

    </div>

    <div style="filter:chroma(color='#ff0000')" onclick="this.style.backgroundColor='#ff0000'" ondblclick="this.style.backgroundColor='black';">

       chroma效果：<br />

       原為黃色，單擊變成紅色變成透明，雙擊變成黑色。

    </div>

    <div style="filter:FlipH;">

              fliph效果：<br />

              ABCDEFGH<br />

              IJKLMNOP<br />

              此屬性在設置寬高后有效

    </div>

    <div style="filter:FlipV;">

              flipv效果：<br />

              ABCDEFGH<br />

              IJKLMNOP<br />

              此屬性在設置寬高后有效

    </div>

    <div style="filter:gray;">

         gray效果：<br />

         abcdefghijklmn

    </div>

    <div style="filter:invert; text-transform:uppercase;color:Red;">

               invert效果：<br />

               背景色變成相反顏色，如黑變成白。

    </div>

    <div style="filter:wave(add=0,freq=3,lightstrength=20,phase=3,strength=10)">

               wave效果：<br />

               Add：一般為1，或0。(0表示上下波浪) 

　　           Freq：變形值。(指定多少個(gè)波浪)

　　           LightStrength：變形百分比。(變形后的陰影。)

　　           Phase：角度變形百分比。(彎曲的角度)  Strength：變形強度。(數值越大，DIV變形就越大。)

    </div>

    <div style="filter:Xray">

         xray效果：<br />

         sfasdfasdfasdfsadf

    </div>

<div style="filter: progid:DXImageTransform.Microsoft.Gradient

(GradientType=0, StartColorStr='#B5CCFA', EndColorStr='#ffffff');">

       progid:dximagetransform.microsoft.gradient效果：<br />

       endendendendendendendendendend

    </div>

</div>

<div style="filter:DropShadow(color='#666666',OffX='3',OffY='3',

Positive='1');width:200px;height:200px;">

         dropshadow效果：<br />

         此效果只有在不設置背景色時(shí)有效，這時(shí)Color指定的將成為背景色。此時(shí)背上的字將是清晰的。positive為0時(shí)color將成為背景色，為1時(shí)color只是文本投影的顏色。

    </div>

<div style="filter:Glow(color='#0000ff',strength='3');

width:100px;height:100px;">

         glow效果：<br />

         strength的光的強度0--100；此時(shí)不能設DIV的背景色。

    </div>

<div style="filter:mask(color='ff0000'); width:100px;

height:100px;text-transform:uppercase;color:black; ">

           mask效果：<br />

           沒(méi)有明顯效果,不能設背景色。

   </div>

   <div style="filter:shadow(color='0000ff',direction='100');

width:100px;height:100px;">

               shadow效果：<br />

               abcdefghijklmn

   </div>

   <div style="filter:Xray;width:100px;height:100px;

background-color:red;">

       xray效果：<br />

      sfasdfasdfasdfsadf

   </div>

   <div style="filter: progid:DXImageTransform.Microsoft.Gradient

(GradientType=100, StartColorStr='#B5CCFA', EndColorStr='#ffffff');width:100px;height:100px;">

        漸變效果。

        endendendendendendendendendend

  </div>

  <div style="filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=5);width:100px;height:100px;">

               lsksalsslalalalalalalal

 </div>

 <div style="filter:alpha(opacity=100, finishOpacity=0,style=2);

width:100px; height:100px;background-color:Yellow;">

</div>