Shulou(Shulou.com)06/02 Report--

Describe to you the use of CSS+DIV typesetting technology, mainly including vertical arrangement of elements, horizontal arrangement of elements, arrangement of elements with lists and positioning of elements with absolute coordinates, using DIV to define elements as block objects, and using CSS to set the format and position of objects.

Several commonly used CSS+DIV typesetting techniques

Use DIV to define elements as block objects, and use CSS to set the format and location of objects. CSS+DIV typesetting is a widely used typesetting method at present, its use is very flexible, and it can make very complex layout. Here are several common CSS+DIV typesetting techniques.

This kind of CSS+DIV typesetting technology uses tags to define block objects, and because the tag itself has a line feed, the elements are naturally arranged in a row. Use the margin property of CSS to set the distance between objects, and the padding property to adjust the width and height of objects.

For example:

# menu {width:100px;font-size:15px;} .dd {border:1pxdotted#0000FF;padding-top:5px; padding-bottom:5px;padding-left:5px;margin-bottom:3px;} HTML CSS JavaScript

The display effect is as follows:

Arrange elements horizontally

Define block objects with tags and float objects with the float attribute of CSS, which is the horizontal arrangement in CSS+DIV typesetting.

For example:

# box {height:110px;} # b1 {width:120px;height:100px;border:4pxdouble#0000FF; float:left;} # b2 {width:120px;height:100px;border:4pxdouble#0000FF; float:left;clear:none;margin-left:5px;margin-right:5px;} # b3 {width:120px;height:100px;border:4pxdouble#0000FF; float:left;clear:right;}

Arrange elements in a list

Use or tags to make lists, and use CSS to set the effect of list items. This CSS+DIV typesetting technology is mainly used for regularly arranged text blocks, pictures, controls and so on.

For example:

.list1 {height:20px;} .list1ul {list-style-type:none;margin:0px;} .list1li {float:left;margin-right:5px;} [1] [2] [3] [4]

The display effect is as follows:

[1] [2] [3] [4]

The coordinates of the upper left corner of the browser window are (0Power0), the x coordinates are to the right, and the y coordinates are down, which is the absolute coordinate positioning of CSS+DIV typesetting technology. CSS provides several location properties that set the position of the object in the page.

Position: when it is absolute, the object is positioned using absolute coordinates.

Left, top: coordinates of the upper-left corner of the object.

Right, bottom: the coordinates of the lower right corner of the object.

Z-index: the cascading order of objects. The value is an integer.

Objects positioned with absolute coordinates can overlap. If no cascading order is specified, the later defined object is on the upper layer, and if the "z-index" value is specified, the higher value is on the upper layer.

For example:

# m1 {width:120px;height:100px;border:4pxdouble#0000FF; position:absolute;left:50px;top:10px;z-index:1;} # m2 {width:120px;height:100px;border:4pxdouble#0000FF; position:absolute;left:185px;top:10px;z-index:2;} # m3 {width:120px;height:100px;border:4pxdouble#0000FF; position:absolute;left:320px;top:10px;z-index:3;}

We generally do not recommend using this method to make web pages, this kind of web page is very difficult to adjust, only in some special cases.

Locate elements with relative coordinates

The coordinate of the upper-left corner of the parent object is (0d0), and the coordinate of the object is relative to the parent object, which is the relative coordinate positioning of CSS+DIV typesetting technology.

Position: when it is relative, the object is positioned using relative coordinates.

Left, top: coordinates of the upper-left corner of the object.

Right, bottom: the coordinates of the lower right corner of the object.

The above coordinates can also be understood as the distance offset from the upper-left corner of the parent object.

Note: objects positioned with relative coordinates do not allow cascading. The z-index property is not valid at this time.

Using relative coordinates to locate objects has a good effect in realizing some irregular arrangement or splicing.

For example:

# area {width:270px;height:70px;border:1pxsolid#0000FF;} # h2 {position:relative;left:85px;top:10px;} # h3 {position:relative;left:15px;top:32px;} # h4 {position:relative;left:75px;top:40px;} # h5 {position:relative;left:115px;top:25px } the above is how to analyze the usage of commonly used CSS+DIV typesetting technology, and the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.