(turn) Div+css layout experience-simplest = least deformed (original technique)

Station cool years have been suffering from its grace is particularly grateful has been trying to give something but suffer from the level of struggle today calm down for everyone to dedicate their DIV+CSS experience, the following views only represent the deep sea personal position hope for beginners to provide a "shortcut". Hope that the vast number of netizens to put forward valuable advice and do not want to be a beginner you into the state of being possessed!

1:CSS (cascading style sheet):

Beginners can download a CSS 2.0 manual for about 48 hours to finish the test. As for how long the words (attributes and values) on the style book can be memorized depending on your effort and the basics of English, please note that whether it is a div or CSS or html XHTML, in fact if your English is good enough to do web and chat no difference:

Example 1:

<style type= "Text/css" >
. style1{width:500px; height:100px; float:left;}
</style>

You are telling HTML that you have developed such a style width of 500 pixels height 100 pixels left floating (if you do not understand what is floating please believe into left alignment);

. style-style names why use curly braces? Because a sentence of 2 words do not understand the enclosed means that he belongs to a certain group;

Colon: The preceding teaching attribute is just like your own height and weight! Writing a style is like introducing:

Deep sea: {height: 170cm; Weight: 60kg;}

2 Div (Division):

The English meaning of the div is to differentiate, not to add the style of the case it and P Mark no big difference.

3 Div+css

Set the style of the div their composition is a powerful combination of the HTML world;

Why use Div + css Someone says it implements the separation of content and presentation. If you learn the style you will reject such a statement;

Because TABLE+CSS can!

Some people say that div+css naturally optimizes the search engine, why???

Because the same layout div requires only one layer of structure and the table requires 3 layers

Cases:

<table width= "border=" 0 "cellspacing=" 0 "cellpadding=" 0 ">
<tr>
<td> content </td>
</tr>
</table>

<div> content </div>

Save up to 4 lines of code if there are N table on the page so you can save N*4 line code, I think this is the only thing that Div can show off, and even we believe that the inner layer with P mark can also be layout (don't believe you give the P mark plus style try)

So we're going to say div+css is not a beginner. Don't be surprised by his boredom and repetition.

4 The biggest cries!! No deformation!!!!!!

There are many articles on the web that say div variants (different effects under different browsers)

Beginners you are not afraid of Firefox is afraid of IE 6????

The simplest way to solve the problem:

Where to get back to!!!!!!!!!!!!

Do not use what if to judge the browser of the world browser kind not as you imagine encounter so little!!!!

You need to know you're from table, and you come back to table!!

Not to ask you to use table is how to layout the table!!!! Table has what important value table Why do you want to make alignment!

Div +css never deform rule:

1> Remember 3 value width height alignment always remember!

2> page deformation is because you do not use the DIV+CSS layout!!!

Do you think I'm kidding? Look at the following code

<div class= "Style1" >
Content 1
</div>

<div class= "Style2" >
Content 2
</div>

I believe in a section of the page you will appear type such code please note you foul your layout way called Div+image+css

3> only rectangles and rectangles to layout!!!

All the outer structures in the HTML are rectangles. Even if the picture is drawn on a circle you can open the picture and see if he is a rectangle!!!

Find a way to convert elements into rectangles and make the alignment cannot be converted to rectangles (text) using a rectangular wrap! Then the layout never deforms for all kinds of browsers!!!

What elements are rectangles?

Table P H1-marquee Embed Center ..... ..... ............... Common HTML tags are rectangles!!

Who is not a rectangle???

Text! Do you have a feeling that the text and picture layout are hard to get good results

Who doesn't start with a rectangle but can convert it to a rectangle?

A link would have been a text when you make a style for display:block it becomes a rectangle!!

****************************************************

4> as long as it is a rectangle there are 3 properties that must be: width height alignment Please don't forget them as long as you remember div+css not deformed secrets you have mastered 90%, the picture also has the alignment of the way Oh!!

Be sure to master when the alignment is different is the layout of the problem!

Left and right-can it not deform?

The default is to break the line OH

The center alignment of the DIV+CSS is conditional oh (all when the alignment of the sibling elements is center aligned)

5> some of the markings are the default spacing!!! (Inner spacing padding outside margin)

Body-Outside spacing

Ul-ie under the outside distance Firefox interior spacing

P-Inner Spacing

So once you use them, remember to format them first! Operation Method (inner spacing padding:0px; Outer pitch margin:0px;)

6> Firefox when height is auto is not adaptive solution (Overfollow:hidden)

7> please give up before you have fully mastered the positioning. I firmly believe that the general HTML is not used to locate the layout can be completely, because TALBE no positioning!!!!! Can be layout very good and stable. div and table have no real difference just save code!!

8> again 3 values are always remembered: width height alignment (the only secret that never deforms) + only rectangles have such 3 values!

Div +css confidence comes from more practice doing more static the more I study div total time is 48 hours. It takes more than hundreds of hours.

Now have the confidence to deal with all browsers if you want to learn div now, open the great Dreamweaver and start your journey.

Have a nice day!

Personal humble opinion welcome criticism!

This article turns from station cool, because feels very good, is suitable for css+div beginner, therefore saves down, prepares for a rainy future!

(turn) Div+css layout experience-simplest = least deformed (original technique)