Brief discussion on the experience of DIV+CSS's rapid layout for several years

I am engaged in the web design industry, has been two years, the browser to the CSS recognition is to let me the most headache, I have hesitated for a while, and then constantly collect information, continuous research, and finally a little bit of experience to apply to my work. Perhaps this experience is nothing, but I think it is helpful, especially for just contact with the CSS soon, and then still wandering the beginners, I hope to help you and learn from.

1, Div initial layout and the general direction of the CSS planning

* {margin:0; padding:0;word-break:break-all;}
Body {background: #eeeeee URL (... /images/qzzt_head_bg.jpg) top center no-repeat;padding:0; margin:0; Color: #333333; Font-family: "The song Body"; }
A {color: #333333; text-decoration:none;}
a:hover {color: #ba2636; text-decoration:underline;}
UL, Li, span, img{padding:0; margin:0; list-style:none;}
Img{border:none;}
. F12 {font-size:12px;}
. F12 {color: #333333;}
. Red {color: #CC0000;}
a.red {color: #CC0000; text-decoration:none;}
a.red:hover {color: #CC0000; text-decoration:underline;}
/*-------Border --------------* *
. border3 {border:1px solid #e6e6e6;}
. border2 {border-left:1px solid #d78327; border-right:1px solid #d78327; border-bottom:1px solid #d78327;}
. border1 {border-left:1px solid #d8d8d8; border-right:1px solid #d8d8d8; border-bottom:1px solid #d8d8d8;}
/* Universal Style * *
. divline {height:10px; line-height:10px; width:auto; overflow:hidden; clear:both;} /* Split Space folding Line * *
. clearboth {width:auto; height:1px; margin-top:-1px; overflow:hidden; clear:both;} /* Clear float to achieve automatic folding line without height * *

Take this piece of code first, this is a piece of style I have written before.

Page at the beginning of the CSS settings must be related to your later operation in the convenience and error, so the use of this code is to prevent the following possible errors.

"*" This everyone knows, is the wildcard, that is, all the pages defined within the object, will configure this style, the inside of the word-break:break-all is required to be within the limits of the line, so you make the box text will be within the limits of the line. Of course, if you do not break the line, but automatically adapt, there is no need to use this paragraph style.

The definition of the body I don't want to say more, padding,margin,border not special circumstances, are 0.

The overall link style, the general direction, is also the default, you can set a and a:hover, this is your page appears the most color link style.

Ul,li.span,img These are also best to set the value of padding and margin to 0, in addition to the UL and Li list tags set to none, easy to follow up on their own adjustment.

The size of the text, the color of the text, you can use a combination of styles, such as the above F12, representing the 12px font, if I now use the 12px red font, then class= "F12 red."

The border is also set individually, and then combined with the style. Note: When you specify the height and width of the Div, use a combined border, you must consider the frame of 1px.

The key to come, some people may encounter such a problem, is why my page is done in accordance with the block, but two pieces of how to stack together? Instead of a block in order? Then use this to tune, attach the Divline style to a blank div, and then place it in the middle of two blocks, so that the blocks and blocks are not disturbed. If it is seamless, use clearboth this style, it is not highly. This method may be a bit dull, but it works.

OK, I'm done with the above, I don't know if it will help you.

Now let's talk about the div layout

2, grasp the general direction of the layout has skills

Let's take this example first.

It is obviously divided into two parts, the top two is part, the bottom one is small for another part. The layout is simple in two columns. The requirement is to do the outer big box first.

I'll write the CSS in Div, and the order of Div.

Do you understand? This is the first piece of div writing, the same, the second piece is also a two-column layout, Div can also be these, so the purpose is to first take the whole, and then adjust the details, this is the div layout.

This is the CSS we add you want to explicitly div

CSS style should be written to be clear, so as to facilitate the maintenance of easy to find later. and write good notes.

You should all notice that the top of the picture, four blocks of the title style are the same, right? Then write a generic one and use it. This is also one of the general direction of the layout, that is, title general, write a can be common style. Here, I will not write in detail.

Also note that when there is a float:left or float:right in the div style, if it has padding and margin, and the value is not 0, then a display:inline must be added to prevent double distance, If some of the Li inserted in the picture after the President some, add a overflow:hidden, this is to let the overflow of the things hidden.

Well, hehe, I did not do enough preparation today, these are some experiences I think of today, do not know whether it works, take out to share, thank you!

Another day to talk about CSS and div layout

This article by the station cool net - 20664873 original, reprint please retain this information, thanks for cooperation.