div经常使用属性.docx

6 

说明：

padding的格式和margin的格式一样，能够对照学习。

能够看黑色DIV与白色DIV的边距来体会此属性的成效。

这是还需要注意的是padding设置的距离不包括在本身的width和height内（在IE7和FF中），比如一个DIV的width设置了100px,而padding-left设置了50px,那么那个DIV在页面上显示的将是150px宽。

也能够用以下四个属性来别离设置DIV的内边距：

九、padding-left:

左内边距。

10、padding-right:

 右内边距。

1一、padding-top; 上内边距。

1二、padding-bottom:

 下内边距。

例：

1

50px;padding-top:

50px;width:

150px;height:

150px;background-color:

Black;">

2

3

140px;height:

140px;background-color:

White;">

4

5

6

7 

8 

13、position:

设置DIV的定位方式。

例：

代码

1

200px;height:

200px;background-color:

Black;">

2

3

relative;top:

10px;left:

10px;width:

140px;height:

140px;

4 

5background-color:

White;">

6 

7

8

9

absolute;top:

60px;left:

60px;background-color:

Silver;

10 

11width:

100px;height:

100px;">

12 

13

14

15

fixed;top:

210px;left:

210px;background-color:

Navy;

16 

17width:

100px;height:

100px;">

18 

19

20

21 

22

23 

absolute;top:

50px;left:

50px;background-color:

Blue;

24 

25width:

100px;height:

100px;">

26 

27 

28

29 

fixed;top:

200px;left:

200px;background-color:

Navy;

30 

31width:

100px;height:

100px;">

32 

33 

34

35 

static;top:

200px;left:

100px;background-color:

Yellow;

36 

37width:

100px;height:

100px;">

38

39

说明：

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:

设置对象相关于文档层次中最近一个定位对象的左侧界的位置。

1五、top:

设置对象相关于文档层次中最近一个定位对象的上边界的位置。

1六、right:

设置对象相关于文档层次中最近一个定位对象的右边界的位置。

17、bottom:

设置对象相关于文档层次中最近一个定位对象的下边界的位置。

1八、z-index:

设置DIV的层叠顺序。

例：

代码

1

absolute;top:

50px;left:

50px;width:

100px;height:

100px;background-color:

black;">

2

3

4

5

absolute;top:

60px;left:

60px;width:

100px;height:

100px;

6

7background-color:

Blue;z-index:

1;">

8

9

10

11

absolute;top:

70px;left:

70px;background-color:

Silver;width:

100px;height:

100px;">

12

13

14

说明：

上例成效中若是不设z-index属性蓝色DIV应该在中间，而此刻的成效蓝色在最上面了。

还要说明的是用z-index属性时，position必需要指定为absolute才行。

1九、font:

指定DIV中文本的样式，其后可跟文本的多个样式。

例：

bold 14px 宋体;background-color:

Yellow">

明月几时有？

把酒问青天。

不知天上宫阙、今夕是何年？

我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人世？

　　转朱阁，低绮户，照无眠。

不该有恨、何事长向别时圆？

人有悲欢聚散，月有阴晴圆缺，此事古难全。

希望人长久，千里共蝉娟。

说明：

font后能够跟文本样式的多个属性，如字体粗细、字体大小、何种字体等等。

还能够用以下几个属性别离加以设置：

20、font-family:

设置要用的字体名称；

2一、font-weight:

指定文本的粗细,其值有boldbolderlighter等。

2二、font-size:

指定文本的大小。

23、font-style:

指定文本样式，其值有italicnormaloblique等。

24、color:

指定文本颜色。

2五、text-align:

指定文本水平对齐方式，其值有center（居中）left rightjustify。

2六、text-decorator:

用于文本的修饰。

其值有noneunderlineoverlineline-through和blink的组合。

（在IE中无闪烁成效，FF中有成效。

期待高手指点，）

27、text-indent:

设置文本的缩进。

2八、text-transform:

设置文本的字母大小写。

其值有lowercaseuppercasecapitalize（首字母大写）none。

例：

代码

1

left;text-decoration:

line-throughblink;text-indent:

30px;

2

3text-transform:

capitalize;color:

Blue;font:

bolditalic14px宋体;background-color:

Yellow">

4

5明月几时有？

把酒问青天。

不知天上宫阙、今夕是何年？

我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人世？

　　转朱阁，低绮户，照无眠。

不该有恨、何事长向别时圆？

人有悲欢聚散，月有阴晴圆缺，此事古难全。

希望人长久，千里共蝉娟。

6

7abcdefghijklmnopqRSTUVWXYZ

8

9

10

2九、overflow:

内容溢出操纵，其值有scroll（始终显示转动条）、visible（不显示转动条，但超出部份可见）、

auto（内容超出时显示转动条）、hidden（超出时隐藏内容）。

30、direction:

内容的流向。

其值有ltr（从左至右）、rtl（从右至左）。

3一、line-height:

指定文本的行高。

3二、Word-spacing:

字间距。

例：

代码

1

16px宋体;width:

600px;height:

200px;word-spacing:

5px;line-height:

20px;

2

3direction:

rtl;overflow:

auto;background-color:

Yellow">

4

5明月几时有？

把酒问青天。

不知天上宫阙、今夕是何年？

我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人世？

　　转朱阁，低绮户，照无眠。

不该有恨、何事长向别时圆？

人有悲欢聚散，月有阴晴圆缺，此事古难全。

希望人长久，千里共蝉娟。

6

7明月几时有？

把酒问青天。

不知天上宫阙、今夕是何年？

我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人世？

　　转朱阁，低绮户，照无眠。

不该有恨、何事长向别时圆？

人有悲欢聚散，月有阴晴圆缺，此事古难全。

希望人长久，千里共蝉娟。

8

9明月几时有？

把酒问青天。

不知天上宫阙、今夕是何年？

我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人世？

　　转朱阁，低绮户，照无眠。

不该有恨、何事长向别时圆？

人有悲欢聚散，月有阴晴圆缺，此事古难全。

希望人长久，千里共蝉娟。

10

11明月几时有？

把酒问青天。

不知天上宫阙、今夕是何年？

我欲乘风归去，惟恐琼楼玉宇，高处不胜寒．起舞弄清影，何似在人世？

　　转朱阁，低绮户，照无眠。

不该有恨、何事长向别时圆？

人有悲欢聚散，月有阴晴圆缺，此事古难全。

希望人长久，千里共蝉娟。

12

13

33、border:

设置DIV的边框样式。

例：

dotted2pxblack;background-color:

Yellow;width:

100px;height:

100px;">

说明：

border后跟边框的样式、宽度、颜色等属性。

还能够用以下属性别离设置。

34、border-width:

设置边框的宽度。

3五、border-color：

设置边框的颜色。

3六、border-style:

设置边框的样式。

例：

代码

1

14px;">选择样式：

2

3

4

5borderStyle=[].text;">

6

7none

8

9dashed

10

11dotted

12

13groove

14

15hidden

16

17inset

18

19outset

20

21ridge

22

23double

24

25solid

26

27

28

29

none;border-width:

5px;border-color:

Black;width:

100px;height:

100px;background-color:

Yellow;">

30

31

说明：

border是对四个边框同时进行设置。

也能够单独对某一边或几个边进行设置，现在用以下属性：

border-top:

设置上边框样式。

37、border-bottom:

设置下边框样式。

3八、border-left:

设置左侧框样式。

3九、border-right:

设置右边框样式。

说明：

某一边框的某一样式也可单独设置，以上边框为例能够用：

border-top-style、border-top-width、border-top-color来别离设置，由于利用各border相同，因此不在举例说明。

40、display:

设置显示属性。

其值有block、none。

4一、float:

设置DIV在页面上的流向，其值有left（靠左显示）、right（靠右显示）、none。

50、background:

设置DIV的背景样式。

例：

1

600px;height:

200px;background:

yellowurlrepeatscroll;

2

3overflow:

auto">

4

5

2px;height:

1000px;">

6

7

说明：

background后可直接跟背景的颜色、背景图片、平铺方式等样式。

也能够用以下属性别离设置。

5一、background-color:

设置背景颜色。

5二、background-attachment:

背景图像的附加方式，其值有scroll、fixed。

53、background-image:

指定使有的背景图片。

54、background-repeat:

背景图象的平铺方式。

其值有no-repeat（不平铺）、repeat（两个方向平铺）、

repeat-x（水平方向平铺）、repeat-y（垂直方向平铺）。

5五、background-position:

在DIV中定位背景位置。

其值有topbottomleftright的不同组合。

也能够以用坐标

指定具体的位置。

例：

1

Yellow;background-image:

url;background-position:

rightbottom;background-attachment:

scroll;width:

600px;height:

200px;">

2

3

4

二、一些特殊成效：

一、cursor:

设置DIV上光标的样式。

二、clip:

设置剪辑矩形。

例：

代码

16px宋体;width:

600px;height:

200px;cursor:

help;clip:

rect（0px100px20px0px）;line-height:

20px;overflow:

auto;background-color:

Yellow;position:

absolute">

div样式测式howareyou.

说明：

clip:

rect（toprightbottomleft）;设置上下左右的距离,但现在要把position指定为absolute。

看以上成效。

3、filter:

滤镜成效。

例：

代码

450px;height:

200px;background-color:

Blue;">

Yellow;filter:

alpha（opacity=50）;opacity:

;

float:

left;width:

200px;height:

200px;">

Yellow;width:

200px;height:

200px;float:

left;">

说明：

设置透明度:

opacity：

value（FF专用,value的取值为0至1之间的小数），filter:

alpha（opacity=value）（IE专用，value取值：

0至100）。

若是要有JavaScript改变DIV的透明度可用下面的方式：

FF中：

（'tdiv'）.='';

IE中：

（'tdiv'）.='alpha（opacity=90）';

* 以下是滤镜综合的例子，将以下代码复制到一个网页文件中就可看到其成效，因此就不要加以说明了。

例：

       #paneldiv div

       {

          background-Color:

yellow;

          height:

200px;

          width:

200px;

       }

230px;height:

2300px;

background-color:

Blue;">

alpha（opacity=0,finishopacity=80,style=1,

startx=10,starty=10,FinishX=100, FinishY=100）;opacity:

;">

     alpha成效:

blur（add=1,direction=100,strength=5）;">

              blur成效：

              add为1代表字有阴影，0代表字全数模糊。

              abcdefghijklmnopqrstuvwxyz

chroma（color='#ff0000'）" onclick="'#ff0000'" ondblclick="'black';">

       chroma成效：

       原为黄色，单击变成红色变成透明，双击变成黑色。

FlipH;">

              fliph成效：

              ABCDEFGH

              IJKLMNOP

              此属性在设置宽高后有效

FlipV;">

              flipv成效：

              ABCDEFGH

              IJKLMNOP

              此属性在设置宽高后有效

gray;">

         gray成效：

         abcdefghijklmn

invert; text-transform:

uppercase;color:

Red;">

               invert成效：

               背景色变成相反颜色，如黑

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

div 经常 使用 属性

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。