常用CSSDIV排版技术用法剖析

1、本文向大家描述一下CSS+DIV排版技术的使用，主要包括纵向排列元素，横向排列元素，用列表排列元素和用绝对坐标定位元素等内容，用 DIV 把元素定义为块对象，用 CSS 设置对象的格式和位置。几种常用 CSS+DIV 排版技术用 DIV 把元素定义为块对象，用CSS 设置对象的格式和位置。CSS+DIV 排版方式是目前应用很广的排版方式，它的使用非常灵活，可制作非常复杂的版面。以下是几种常用的CSS+DIV 排版技术。纵向排列元素此类 CSS+DIV 排版技术用自然排成一列。用 CSS 的<div> 标签定义块对象，由于<div> 标签本身有换行作用，各元素margin

2、 属性设置对象间的距离，用padding 属性调整对象的宽度和高度。举例：<styletypestyletype="text/css">#menuwidth:100px 。 font-size:15px 。.ddborder:1pxdotted#0000FF 。 padding-top:5px 。padding-bottom:5px 。 padding-left:5px 。 margin-bottom:3px 。</style><dividdivid="menu"><divclassdivclass="

3、dd">HTML</div><divclassdivclass="dd">CSS</div><divclassdivclass="dd">JavaScript</div></div>显示效果为：横向排列元素用<div> 标签定义块对象，用CSS 的 float 属性设置对象的浮动，此为CSS+DIV 排版中的横向排列。举例：<styletypestyletype="text/css">#boxheight:110px 。#b

4、1width:120px 。 height:100px 。 border:4pxdouble#0000FF 。float:left 。#b2width:120px 。 height:100px 。 border:4pxdouble#0000FF 。float:left 。clear:none。 margin-left:5px 。 margin-right:5px 。#b3width:120px 。 height:100px 。 border:4pxdouble#0000FF 。float:left 。clear:right 。</style><dividdivid="

5、;box"><dividdivid="b1"></div><dividdivid="b2"></div><dividdivid="b3"></div></div>显示效果为：用列表排列元素用<ul> 或 <ol> 标签制作列表，用 CSS 设置列表工程的效果。这种 CSS+DIV 排版技术主要用于规则排列的文本块、图片、控件等。举例：<styletypestyletype="text/css&qu

6、ot;>.list1height:20px 。.list1ullist-style-type:none 。 margin:0px 。.list1lifloat:left 。 margin-right:5px 。</style><divclassdivclass="list1"><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div>显示效果为：1234用绝对坐标

7、定位元素浏览器窗口的左上角坐标为 (0,0)， x 坐标向右， y 坐标向下，此为 CSS+DIV 排版技术之绝对坐标定位。 CSS 提供了几个位置属性，可以设置对象在页面中的位置。position ：当它取值为absolute 时，表示对象使用绝对坐标定位。left 、 top：对象的左上角坐标。right 、 bottom ：对象的右下角坐标。z-index ：对象的层叠顺序。取值为一个整数。用绝对坐标定位的对象是可以发生重叠的，如果没有指定层叠顺序，则后定义的对象位于上层，如果指定了 “z-index ”值，则值大的位于上层。举例：<styletypestyletype="

8、;text/css">#m1width:120px 。 height:100px 。 border:4pxdouble#0000FF 。position:absolute 。 left:50px 。 top:10px 。z-index:1 。#m2width:120px 。 height:100px 。 border:4pxdouble#0000FF 。position:absolute 。 left:185px 。 top:10px。 z-index:2 。#m3width:120px 。 height:100px 。 border:4pxdouble#0000FF 。pos

9、ition:absolute 。 left:320px 。 top:10px。 z-index:3 。</style><dividdivid="m1"></div><dividdivid="m2"></div><dividdivid="m3"></div>我们一般不推荐使用这种方法制作网页，这种网页调整起来非常困难，只是在一些特殊情况下使用。用相对坐标定位元素父对象的左上角坐标为 (0,0)，对象的坐标是相对于父对象的，这是 CSS+DIV 排版技术之

10、相对坐标定位。position ：当它取值为relative 时，表示对象使用相对坐标定位。left 、 top：对象的左上角坐标。right 、 bottom ：对象的右下角坐标。以上坐标也可理解为相对于父对象的左上角偏移的距离。注意：用相对坐标定位的对象不允许层叠。此时z-index 属性无效。用相对坐标定位对象在实现一些不规则的排列或拼接时有很好的效果。举例：<styletypestyletype="text/css">#areawidth:270px 。 height:70px 。 border:1pxsolid#0000FF 。#h1position:

11、relative 。 left:85px 。top:10px 。#h2position:relative 。 left:15px 。top:32px 。#h3position:relative 。 left:75px 。top:40px 。#h4position:relative 。 left:115px 。 top:25px 。</style><dividdivid="area"><imgidimgid="h1"src="./image/face19.gif"/><imgidimgid="h2"src="./i