div style常用属性
一、常用属性：
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
>
说明：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
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
说明：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;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
>
说明：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
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
说明：上例效果中如果不设z-index属性蓝色DIV应该在中间，而现在的效果蓝色在最上面了。还要说明的是用z-index属性时，position必需要指定为absolute才行。
19、font:指定DIV中文本的样式，其后可跟文本的多个样式。
例：
<div style=" font:bold 14px 宋体;background-color:Yellow">
明月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？ 转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。
</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
3
text
-
transform:capitalize;color:Blue; font:bold italic 14px 宋体; background
-
color:Yellow
"
>
4
5
明月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？ 转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。
6
7
abcdefghijklmnopqRSTUVWXYZ
8
9
</
div
>
10
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
3
direction:rtl; overflow:auto;background
-
color:Yellow
"
>
4
5
明月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？ 转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。
<
br
/>
6
7
明月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？ 转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。
<
br
/>
8
9
明月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？ 转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。
<
br
/>
10
11
明月几时有？把酒问青天。不知天上宫阙、今夕是何年？我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人间？ 转朱阁，低绮户，照无眠。不应有恨、何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共蝉娟。
12
13
</
div
>
33、border:设置DIV的边框样式。
例：
<
div style
=
"
border:dotted 2px black; background-color:Yellow; width:100px;height:100px;
"
>
</
div
>
说明：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
>
说明：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
3
overflow:auto
"
>
4
5
<
div style
=
"
width:2px;height:1000px;
"
></
div
>
6
7
</
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
<
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
>
说明：clip:rect(top right bottom left);设置上下左右的距离,但此时要把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
>
说明：设置透明度: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)';
* 以下是滤镜综合的例子，将以下代码复制到一个网页文件中就可看到其效果，所以就不要加以说明了。
例：
<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')" οnclick="this.style.backgroundColor='#ff0000'" οndblclick="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：变形值。(指定多少个波浪)
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 />
此效果只有在不设置背景色时有效，这时Color指定的将成为背景色。此时背上的字将是清晰的。positive为0时color将成为背景色，为1时color只是文本投影的颜色。
</div>
<div style="filter:Glow(color='#0000ff',strength='3');
width:100px;height:100px;">
glow效果：<br />
strength的光的强度0--100；此时不能设DIV的背景色。
</div>
<div style="filter:mask(color='ff0000'); width:100px;
height:100px;text-transform:uppercase;color:black; ">
mask效果：<br />
没有明显效果,不能设背景色。
</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>
附加：avaScript的Table表格对象
Table对象:表示HTML文档中的表，对于文档中每个<table>标记，浏览器都创建一个Table对象.
---------Table对象集合---------
集合 描述
cells[] 获取包含表格中所有单元格的数组
rows[] 获取包含表格中所有行的数组
tBodies[] 获取包含表格中所有tbody的数组
---------Table对象属性 ---------
border 设置或获取表格边框
caption 设置或获取表格标题
cellPadding 设置或获取每个单元格边框与内容的宽度
cellSpacing 设置或获取表格中单元格的间距
frame 设置或获取表格具有哪些边框
rules 设置或获取表格中的内部边框
summary 设置或获取表格的描述
tFoot 获取表格的tFoot对象
tHead 获取表格的tHead对象
width 设置或获取表格宽度
---------Table对象方法 ---------
createCaption() 为表格创建一个空的标题元素
createTFoot() 为表格创建一个空的tFoot元素
createTHead() 为表格创建一个空的tHead元素
deleteCaption() 删除表格的标题元素
deleteRow() 删除指定的表格行
deleteTFoot() 删除表格的tFoot元素
deleteTHead() 删除表格的tHead元素
insertRow() 向表格中插入新行
TableCell对象:表示HTML文档中表的单元格，对于文档中每个<td>标记，浏览器都创建一个TableCell对象.
TableCell对象属性
属性 描述
abbr 设置或获取单元格的摘要
align 设置或获取单元格中文字的水平对齐方向
axis 设置或获取以逗号分隔的相关单元格组成的列表
cellIndex 获取行单元格集合中某单元格的位置
ch 设置或获取单元格的对齐特征
chOff 设置或获取单元格的对齐偏移特征
colSpan 设置或获取单元格跨越的表格列数
headers 设置或获取以空格分表头单元格的id列表
height 设置或获取单元格的高度
innerHTML 设置或获取单元格标记间的HTML文本
noWrap 设置或获取单元格是否自动换行
rowSpan 设置或获取单元格跨越的表格行数
scope 设置或获取与标题相关联的数据列
vAlign 设置或获取单元格文字的垂直对齐方向
width 设置或获取单元格的宽度
TableRow对象:表示HTML文档中表的行，对于文档中每个<tr>标记，浏览器都创建一个TableRow对象.
Table对象集合
集合 描述
cells[] 获取表格行中所有列组成的数组
Table对象属性
accessKey 设置或获取该对象的快捷键
align 设置或获取表格行中单元格中文字的水平对齐方向
chOff 设置或获取单元格的对齐偏移特征
colSpan 设置或获取单元格跨越的表格列数
height 设置或获取表格行的高度
innerHTML 设置或获取表格行标记间的HTML文本
innerText 设置或获取表格行标记间的文本
rowIndex 获取表格行对象在表格行集合中的位置
sectionRowIndex 获取tBody，tHead或tFoot中，表格行对象在行集合中的位置
tabIndex 设置或获取表格行的Tab顺序索引
vAlign 设置或获取表格行中文字的垂直对齐方向
width 设置或获取表格行的宽度
Table对象方法
blur() 取消该对象的激活状态
click() 模拟鼠标单击该对象
deleteCell([i]) 删除表格行中的指定的单元格
focus() 将焦点移至表格行
insertCell() 在表格行中插入新单元格
443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
