日韩电影不卡一区,麻豆网站在线免费观看,中文在线а√在线

黑咖啡

孩兒立志出鄉關，學不成名誓不還。風華正茂乾坤地，人生無處不青山。光陰如同流水去，珍惜時光最寶貴。鵬程萬里靠自己，飛黃騰達青少年。

Div樣式總結

1

<div?style="position:absolute;?top:50px;left:50px;?width:100px;?height:100px;background-color:black;">
2

</div>
3

<div?style="position:absolute;?top:60px;left:60px;?width:100px;?height:100px;?
4

background-color:Blue;z-index:1;">
5

</div>
6

<div?style="position:absolute;?top:70px;left:70px;?background-color:Silver;width:100px;height:100px;">
7

</div>
8

一、常用屬性：

1、Height:設置DIV的高度。

2、Width:設置DIV的寬度。

例：

1

?
2

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

</div>
4

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

?

?????? 例：

1

<div?style="background-color:Black;width:500px;height:500px;">
2

?????<div?style="margin:5px?10px?20px?30px;width:200px;?height:200px;background-color:White;">
3

?????</div>
4

</div>
5

6

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

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

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

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

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

例：

1

<div?style="width:500px;height:500px;background-color:Black;">
2

??????<div?style="margin-left:50px;?margin-top:50px;?width:200px;?height:200px;
3

??????????background-?color:White;">
4

????????????</div>
5

</div>
6

?

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

例：

1

<div?style="padding:5px?10px?20px?30px;background-color:Black;width:500px;height:500px;">
2

?????<div?style="width:200px;?height:200px;background-color:White;"></div>
3

</div>
4

?

說明：padding的格式和margin的格式一樣，可以對照學習。可以看黑色DIV與白色DIV的邊距來體會此屬性的效果。這是還需要注意的是padding設置的距離不包括在本身的width和height內(在IE7和FF中)，比如一個DIV的width設置了100px,而padding-left設置了50px,那么這個DIV在頁面上顯示的將是150px寬。也可以用以下四個屬性來分別設置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;
2

background-color:Black;">
3

?????<div?style="width:140px;?height:140px;background-color:White;">
4

?????</div>
5

</div>
6

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

例：

?1

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

?????<div?style="position:relative;?top:10px;left:10px;?width:140px;?height:140px;
?3

background-color:White;">
?4

?????</div>
?5

?????<div?style="position:absolute;?top:60px;left:60px;?background-color:Silver;
?6

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

?????</div>
?8

?????<div?style="position:fixed;?top:210px;left:210px;?background-color:Navy;
?9

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

?????</div>
11

</div>
12

<div?style="position:absolute;?top:50px;left:50px;?background-color:Blue;
13

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

</div>
15

<div?style="position:fixed;?top:200px;left:200px;?background-color:Navy;
16

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

</div>
18

<div?style="position:static;?top:200px;left:100px;?background-color:Yellow;
19

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

</div>

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

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

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

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

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

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

例：

1

<div?style="position:absolute;?top:50px;left:50px;?width:100px;?height:100px;background-color:black;">
2

</div>
3

<div?style="position:absolute;?top:60px;left:60px;?width:100px;?height:100px;?
4

background-color:Blue;z-index:1;">
5

</div>
6

<div?style="position:absolute;?top:70px;left:70px;?background-color:Silver;width:100px;height:100px;">
7

</div>

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

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

例：

1

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

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

</div>

?

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

20、font-family:設置要用的字體名稱；

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中無閃爍效果，FF中有效果。期待高手指點，)

27、text-indent:設置文本的縮進。

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

例：

1

<div?style="text-align:left;?text-decoration:line-through?blink;?text-indent:30px;
2

?text-transform:capitalize;color:Blue;?font:bold?italic?14px?宋體;?background-color:Yellow">
3

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

abcdefghijklmnopqRSTUVWXYZ
5

</div>

?

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

?

auto(內容超出時顯示滾動條)、hidden(超出時隱藏內容)。

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

direction:rtl;?overflow:auto;background-color:Yellow">
3

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

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

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

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

</div>
8

?

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

例：

1

2

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

</div>
4

?

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

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

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

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

例：

?1

<label?style="font-size:14px;">選擇樣式：</label>
?2

<select?id="bstyle"?onchange="document.getElementById('tdd').style.
?3

borderStyle=this.options[this.selectedIndex].text;">
?4

<option?selected="selected">none</option>
?5

<option>dashed</option>
?6

<option>dotted</option>
?7

<option>groove</option>
?8

<option>hidden</option>
?9

<option>inset</option>
10

<option>outset</option>?
11

<option>ridge</option>
12

<option>double</option>
13

<option>solid</option>
14

</select>
15

<div?id="tdd"?style="border-style:none;?border-width:5px;?border-color:Black;?width:100px;height:100px;background-color:Yellow;">
16

</div>
17

?

說明：border是對四個邊框同時進行設置。也可以單獨對某一邊或幾個邊進行設置，此時用以下屬性：

?

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

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

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

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

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

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

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

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

例：

1

<div?style="width:600px;height:200px;?background:yellow?url(mw3.jpg)?repeat?scroll;?
2

overflow:auto">
3

<div?style="width:2px;height:1000px;"></div>
4

</div>

?

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

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

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

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

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

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

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

指定具體的位置。

例：

1

2

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

</div>
4

?

二、一些特殊效果：

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

2、clip:設置剪輯矩形。

例：

1

<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">
2

div樣式測式how?areyou.
3

</div>

說明：clip:rect(top right bottom left);設置上下左右的距離,但此時要把position指定為absolute。看以上效果。

3、filter:濾鏡效果。

例：

1

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

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

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

?????</div>
5

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

?????</div>
7

</div>

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

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

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

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

?

*?以下是濾鏡綜合的例子，將以下代碼復制到一個網頁文件中就可看到其效果，所以就不要加以說明了。

例：

?1

?2

???????#paneldiv?div
?4

???????{
?5

??????????background-Color:yellow;
?6

??????????height:200px;
?7

??????????width:200px;
?8

???????}
?9

</style>
10

11

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

background-color:Blue;">
13

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

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

?????alpha效果:<br?/>
16

????</div>
17

18

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

??????????????blur效果：<br?/>
20

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

??????????????abcdefghijklmnopqrstuvwxyz
22

????</div>
23

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

???????chroma效果：<br?/>
25

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

????</div>
27

????<div?style="filter:FlipH;">
28

??????????????fliph效果：<br?/>
29

??????????????ABCDEFGH<br?/>
30

??????????????IJKLMNOP<br?/>
31

??????????????此屬性在設置寬高后有效
32

????</div>
33

????<div?style="filter:FlipV;">
34

??????????????flipv效果：<br?/>
35

??????????????ABCDEFGH<br?/>
36

??????????????IJKLMNOP<br?/>
37

??????????????此屬性在設置寬高后有效
38

????</div>
39

????<div?style="filter:gray;">
40

?????????gray效果：<br?/>
41

?????????abcdefghijklmn
42

????</div>
43

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

???????????????invert效果：<br?/>
45

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

????</div>
47

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

???????????????wave效果：<br?/>
49

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

　　???????????Freq：變形值。(指定多少個波浪)
51

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

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

????</div>
54

????<div?style="filter:Xray">
55

?????????xray效果：<br?/>
56

?????????sfasdfasdfasdfsadf
57

????</div>
58

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

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

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

???????endendendendendendendendendend
62

????</div>
63

</div>
64

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

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

?????????dropshadow效果：<br?/>
67

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

????</div>
69

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

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

?????????glow效果：<br?/>
72

?????????strength的光的強度0--100；此時不能設DIV的背景色。
73

????</div>
74

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

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

???????????mask效果：<br?/>
77

???????????沒有明顯效果,不能設背景色。
78

???</div>
79

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

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

???????????????shadow效果：<br?/>
82

???????????????abcdefghijklmn
83

???</div>
84

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

background-color:red;">
86

???????xray效果：<br?/>
87

??????sfasdfasdfasdfsadf
88

???</div>
89

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

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

????????漸變效果。
92

????????endendendendendendendendendend
93

??</div>
94

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

???????????????lsksalsslalalalalalalal
96

?</div>
97

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

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

</div>

?

此上濾鏡效果主要參考：

http://www.lao8.org/html/8/2008-1-21/2008121182204.html

http://ce.sysu.edu.cn/hope/Education/ShowArticle.asp?ArticleID=2117

posted on 2010-03-19 09:48 飛熊閱讀(255) 評論(0) 編輯收藏所屬分類: javaScript

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理
相關文章: JavaScript跨瀏覽器的添加刪除事件綁定函數實現JavaScript跨瀏覽器 setCapture和releaseCapture的小應用 call、apply、caller、callee使用方法 Div樣式總結 Opener，parent，top，self等窗體屬性的比較 js常用代碼 JS注意事項 javaScript常用例子 javascript定義二維數組的方法