How CSS needs to be laid out

The layout of the CSS is simple and simple, said complex is complex, we give you a few columns, for everyone to explain in detail the absolute positioning of the layout and relative positioning layout and page layout.

Encountering the above irregular case layout, if using float, padding and other floating implementation is more troublesome, but using position absolute positioning can be very simple to implement. Next, we introduce the position absolute positioning method layout above small case.

Use CSS styles and HTML tags and explain them accordingly

1, to use the CSS style words and explanations

Position: Absolute positioning style implements Div positioning layout with its set values absolute and relative applications

Width: widths, setting object width

Height: altitude, setting object height

Line-height: line height, set text line height

Left: Sets the Div object's distance

Right: Sets the Div object's left distance

Top: Sets the Div object's left distance

Bottom: Set div object left distance

Background: background, setting background picture and color

Color: Set the font color

Font-size: Setting the font size

Font-weight: Set Font Bold

2. Use HTML tags and explanations

div Tags: for layout structure framework

UL li tags: for layout list type data list

H3 Tags: for layout column headings

Absolute positioning practical case Layout thinking explanation introduction

The hidden text after the entire image as the outermost large box div background picture, named Bg.jpg.

Hidden text after the picture material, you can directly save the use

Hidden text after the picture material, you can directly save the use

This outermost div, set the width height, background picture, and set the position:relative. In this box, the layout of 3 small div box, respectively set the width height, and set position:absolute absolute positioning and then use left, right, top, bottom these several styles to locate the 3 box position.

Through the above layout can be laid out three div box, and then separate layout column title and content can be achieved.

Absolute positioning case Important code

The following is the outermost div box and the CSS code and the contents of the 3 Small box layout code.

1. HTML code

<! DOCTYPE html> 
From the beginning to see the layout structure. On the basis of the above, respectively, the layout of the column headings and corresponding content can be completed.

1. Full CSS Code

@charset "Utf-8"; Body, Div, UL, li,h3{margin:0; padding:0;font-style:normal;font:12px/22px "\5b8b\4f53", Arial, Helvetica, Sans-serif}/ * \5b8b\4f53 represents the song body, more Chinese font to Unicode http://www.php.com/jiqiao/j325.shtml */OL, UL, Li{list-style:none} img {border:0; ver Tical-align:middle} body{color: #FFF; background: #FFF; Text-align:center} a{color: #FFF; Text-decoration:none} a:hover {color: #BA2636; text-decoration:underline}/* Set hyperlink font with no hyperlink font shown as white */#wrapper {margin:0 auto;position:relative, based on this instance; Width:610px;height:559px;background:url (bg.jpg) No-repeat}//position:relative is absolute positioning key, parent setting */. box1{Position: Absolute width:147px; height:140px; left:198px; TOP:14PX}. box2{position:absolute; width:141px; height:186px; left:31px; bottom:17px}. Box3{position:absolute; width : 132px; height:188px; right:28px; BOTTOM:67PX}/* Position:absolute is the absolute key, the child setting lef right top bottom with the use of */h3.title{height:32px; line-height:32px; font -size:14px; Font-weight:bold; Text-align:left}/* Title Unified Settings */ul.list{Text-alIgn:left; width:100%; PADDING-TOP:8PX} ul.list li{width:100%; text-align:left; Height:22px;overflow:hidden}/* Added overflow: Hidden prevent excessive content after wrapping to hide out of content */
 2, full HTML code: 
 

<! DOCTYPE html> 
The layout of the CSS on the case of the explanation is so much, the need for friends can be saved, but also please continue to pay attention to the other updates of the site.

Related reading:

How to learn the div and CSS



How to use CSS position



css Min-width and max-width how to set