亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

div style常用屬性介紹及使用示例

  發(fā)布時(shí)間：2013-07-30 17:09:59   作者：佚名   我要評(píng)論
在div+css布局中經(jīng)常被用到的就是div了，幾乎所有的css屬性都可以用到它的身上，本文整理了一些在頁面布局中常用的屬性的使用示例，有想學(xué)習(xí)css布局的朋友可以參考下
一、常用屬性：
1、Height:設(shè)置DIV的高度。
2、Width:設(shè)置DIV的寬度。
例：

復(fù)制代碼
代碼如下:

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

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

復(fù)制代碼
代碼如下:

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

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

復(fù)制代碼
代碼如下:

<div style="width:500px;height:500px;background-color:Black;">
<div style="margin-left:50px; margin-top:50px; width:200px; height:200px;
background- color:White;">
</div>
</div>

8、padding:用于設(shè)置DIV的內(nèi)邊距。
例：

復(fù)制代碼
代碼如下:

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

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

復(fù)制代碼
代碼如下:

<div style="padding-left:50px;padding-top:50px;width:150px;height:150px;background-color:Black;">
<div style="width:140px; height:140px;background-color:White;">
</div>
</div>

13、position:設(shè)置DIV的定位方式。
例：

復(fù)制代碼
代碼如下:

<div style="width:200px; height:200px;background-color:Black;">
<div style="position:relative; top:10px;left:10px; width:140px; height:140px;
background-color:White;">
</div>
<div style="position:absolute; top:60px;left:60px; background-color:Silver;
width:100px;height:100px;">
</div>
<div style="position:fixed; top:210px;left:210px; background-color:Navy;
width:100px;height:100px;">
</div>
</div>
<div style="position:absolute; top:50px;left:50px; background-color:Blue;
width:100px;height:100px;">
</div>
<div style="position:fixed; top:200px;left:200px; background-color:Navy;
width:100px;height:100px;">
</div>
<div style="position:static; top:200px;left:100px; background-color:Yellow;
width:100px;height:100px;">
</div>

說明：position的屬性中有static、fixed、relative、absolute四個(gè)屬性。常用relative和absolute。若指定為static時(shí)，DIV遵循HTML規(guī)則；若指定為relative時(shí)，可以用top、left、right、bottom來設(shè)置DIV在頁面中的偏移，但是此時(shí)不可使用層；若指定為absolute時(shí)，可以用top、left、right、bottom對DIV進(jìn)行絕對定位；若指定為fixed時(shí)，在IE7與FF中DIV的位置相對于屏屏固定不變，IE6中沒有效果(期待高手指點(diǎn)原因)；
14、left:設(shè)置對象相對于文檔層次中最近一個(gè)定位對象的左邊界的位置。
15、top:設(shè)置對象相對于文檔層次中最近一個(gè)定位對象的上邊界的位置。
16、right:設(shè)置對象相對于文檔層次中最近一個(gè)定位對象的右邊界的位置。
17、bottom:設(shè)置對象相對于文檔層次中最近一個(gè)定位對象的下邊界的位置。
18、z-index:設(shè)置DIV的層疊順序。
例：

復(fù)制代碼
代碼如下:

<div style="position:absolute; top:50px;left:50px; width:100px; height:100px;background-color:black;">
</div>
<div style="position:absolute; top:60px;left:60px; width:100px; height:100px;
background-color:Blue;z-index:1;">
</div>
<div style="position:absolute; top:70px;left:70px; background-color:Silver;width:100px;height:100px;">
</div>

說明：上例效果中如果不設(shè)z-index屬性藍(lán)色DIV應(yīng)該在中間，而現(xiàn)在的效果藍(lán)色在最上面了。還要說明的是用z-index屬性時(shí)，position必需要指定為absolute才行。
19、font:指定DIV中文本的樣式，其后可跟文本的多個(gè)樣式。
例：
<div style=" font:bold 14px 宋體;background-color:Yellow">
明月幾時(shí)有？把酒問青天。不知天上宮闕、今夕是何年？我欲乘風(fēng)歸去，惟恐瓊樓玉宇，高處不勝寒．起舞弄清影，何似在人間？　　轉(zhuǎn)朱閣，低綺戶，照無眠。不應(yīng)有恨、何事長向別時(shí)圓？人有悲歡離合，月有陰晴圓缺，此事古難全。但愿人長久，千里共蟬娟。
</div>
說明：font后可以跟文本樣式的多個(gè)屬性，如字體粗細(xì)、字體大小、何種字體等等。還可以用以下幾個(gè)屬性分別加以設(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-align:指定文本水平對齊方式，其值有center(居中) left right justify。
26、text-decorator:用于文本的修飾。其值有none underline overline line-through和blink的組合。
(在IE中無閃爍效果，F(xiàn)F中有效果。期待高手指點(diǎn)，)
27、text-indent:設(shè)置文本的縮進(jìn)。
28、text-transform:設(shè)置文本的字母大小寫。其值有l(wèi)owercase uppercase capitalize(首字母大寫) none。
例：

復(fù)制代碼
代碼如下:

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

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:字間距。
例：

復(fù)制代碼
代碼如下:

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

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

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

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

33、border:設(shè)置DIV的邊框樣式。
例：

復(fù)制代碼
代碼如下:

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

說明：border后跟邊框的樣式、寬度、顏色等屬性。還可以用以下屬性分別設(shè)置。
34、border-width:設(shè)置邊框的寬度。
35、border-color：設(shè)置邊框的顏色。
36、border-style:設(shè)置邊框的樣式。
例：

復(fù)制代碼
代碼如下:

<label style="font-size:14px;">選擇樣式：</label>
<select id="bstyle" onchange="document.getElementById('tdd').style.
borderStyle=this.options[this.selectedIndex].text;">
<option selected="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>
<div id="tdd" style="border-style:none; border-width:5px; border-color:Black; width:100px;height:100px;background-color:Yellow;">
</div>

說明：border是對四個(gè)邊框同時(shí)進(jìn)行設(shè)置。也可以單獨(dú)對某一邊或幾個(gè)邊進(jìn)行設(shè)置，此時(shí)用以下屬性：
border-top:設(shè)置上邊框樣式。
37、border-bottom:設(shè)置下邊框樣式。
38、border-left:設(shè)置左邊框樣式。
39、border-right:設(shè)置右邊框樣式。
說明：某一邊框的某一樣式也可單獨(dú)設(shè)置，以上邊框?yàn)槔梢杂茫篵order-top-style、border-top-width、border-top-color來分別設(shè)置，由于使用各border相同，所以不在舉例說明。
40、display:設(shè)置顯示屬性。其值有block、none。
41、float:設(shè)置DIV在頁面上的流向，其值有l(wèi)eft(靠左顯示)、right(靠右顯示)、none。
50、background:設(shè)置DIV的背景樣式。
例：

復(fù)制代碼
代碼如下:

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

說明：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中定位背景位置。其值有top bottom left right的不同組合。也可以以用坐標(biāo)
指定具體的位置。
例：

復(fù)制代碼
代碼如下:

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:設(shè)置DIV上光標(biāo)的樣式。
2、clip:設(shè)置剪輯矩形。
例：

復(fù)制代碼
代碼如下:

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

說明：clip:rect(top right bottom left);設(shè)置上下左右的距離,但此時(shí)要把position指定為absolute?？匆陨闲Ч?。
3、filter:濾鏡效果。
例：

復(fù)制代碼
代碼如下:

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

說明：設(shè)置透明度:opacity：value (FF專用,value的取值為0至1之間的小數(shù))，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)';
* 以下是濾鏡綜合的例子，將以下代碼復(fù)制到一個(gè)網(wǎng)頁文件中就可看到其效果，所以就不要加以說明了。
例：

復(fù)制代碼
代碼如下:

<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效果:

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

add為1代表字有陰影，0代表字全部模糊。
abcdefghijklmnopqrstuvwxyz
</div>
<div style="filter:chroma(color='#ff0000')" onclick="this.style.backgroundColor='#ff0000'" ondblclick="this.style.backgroundColor='black';">
chroma效果：

原為黃色，單擊變成紅色變成透明，雙擊變成黑色。
</div>
<div style="filter:FlipH;">
fliph效果：

ABCDEFGH

IJKLMNOP

此屬性在設(shè)置寬高后有效
</div>
<div style="filter:FlipV;">
flipv效果：

ABCDEFGH

IJKLMNOP

此屬性在設(shè)置寬高后有效
</div>
<div style="filter:gray;">
gray效果：

abcdefghijklmn
</div>
<div style="filter:invert; text-transform:uppercase;color:Red;">
invert效果：

背景色變成相反顏色，如黑變成白。
</div>
<div style="filter:wave(add=0,freq=3,lightstrength=20,phase=3,strength=10)">
wave效果：

Add：一般為1，或0。(0表示上下波浪)
　　 Freq：變形值。(指定多少個(gè)波浪)
　　 LightStrength：變形百分比。(變形后的陰影。)
　　 Phase：角度變形百分比。(彎曲的角度) Strength：變形強(qiáng)度。(數(shù)值越大，DIV變形就越大。)
</div>
<div style="filter:Xray">
xray效果：

sfasdfasdfasdfsadf
</div>
<div style="filter: progid:DXImageTransform.Microsoft.Gradient
(GradientType=0, StartColorStr='#B5CCFA', EndColorStr='#ffffff');">
progid:dximagetransform.microsoft.gradient效果：

endendendendendendendendendend
</div>
</div>
<div style="filter:DropShadow(color='#666666',OffX='3',OffY='3',
Positive='1');width:200px;height:200px;">
dropshadow效果：

此效果只有在不設(shè)置背景色時(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效果：

strength的光的強(qiáng)度0--100；此時(shí)不能設(shè)DIV的背景色。
</div>
<div style="filter:mask(color='ff0000'); width:100px;
height:100px;text-transform:uppercase;color:black; ">
mask效果：

沒有明顯效果,不能設(shè)背景色。
</div>
<div style="filter:shadow(color='0000ff',direction='100');
width:100px;height:100px;">
shadow效果：

abcdefghijklmn
</div>
<div style="filter:Xray;width:100px;height:100px;
background-color:red;">
xray效果：

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>

相關(guān)文章

  • table表格的一些常用屬性介紹

    table表格屬性在使用過程中很常見，本文整理了一些常用屬性，在此與大家分享下，希望對大家有所幫助
    2013-08-20

  • frameset(劃分框窗)常用屬性整理

    框架是網(wǎng)頁畫面分成幾個(gè)框窗同時(shí)取得多個(gè)src的地址，F(xiàn)RAMESET是用來劃分框窗，每一窗框由一個(gè)FRAME標(biāo)記所標(biāo)示，F(xiàn)RAME必須在FRAMESET范圍中使用，本文整理了一些frameset常
    2013-06-28

  • CSS的部分常用屬性整理

    在網(wǎng)頁布局中會(huì)經(jīng)常用到一些css屬性，比如：CSS背景、CSS文本、CSS字體、CSS列表、CSS表格、CSS邊框等常用屬性，本文整理了一些，感興趣的朋友可以參考下哈
    2013-06-24

  • DHTML 對象(各種 HTML 對象常用屬性)

    下面列出了由動(dòng)態(tài) HTML 定義的對象。點(diǎn)擊鏈接即可前往對象的定義，其中包含了該對象的所有成員集
    2013-03-15

  • css 細(xì)線表格 css制作table細(xì)線表格常用屬性

    優(yōu)化表格的過程中當(dāng)然是卻漂亮越好啊，所以css優(yōu)化表格的屬性就派上用場了，接下來介紹css優(yōu)化細(xì)線表格注意的一些細(xì)節(jié)，需要的朋友可以了解下
    2012-12-19

  • CSS常用屬性縮寫實(shí)例-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)

    　　CSS代碼簡化在工作中是非常有益的，也是必要的。在編寫CSS代碼時(shí)，經(jīng)常會(huì)出現(xiàn)冗余的代碼，為了提高代碼的質(zhì)量及文件壓縮到最小，使代碼具有可讀性，不得不把CSS代碼簡
    2008-10-31

  • CSS常用屬性的代碼簡化實(shí)例-CSS教程-網(wǎng)頁制作-網(wǎng)頁教學(xué)網(wǎng)

    　　CSS代碼簡化在工作中是非常有益的，也是必要的。在編寫CSS代碼時(shí)，經(jīng)常會(huì)出現(xiàn)冗余的代碼，為了提高代碼的質(zhì)量及文件壓縮到最小，使代碼具有可讀性，不得不把CSS代碼簡
    2008-10-17

  • DIV常用屬性大全自己整理

    div布局過程中會(huì)經(jīng)常用到一些屬性，本文整理了一些常用的和布局相關(guān)的屬性，有需要的朋友可以參考下，希望對大家熟悉div常用屬性有所幫助
    2013-09-08

最新評(píng)論