What are the techniques of CSS layout?

How does CSS need to be laid out? What do you need to be aware of when CSS is laid out? What are the tips for CSS layout? Today we will give you a summary. How to have a good CSS layout.

We all know that from the graphic designers to the PS (image) to the CSS refactoring, the need for Web page art image analysis, only a good analysis to have CSS layout.

So div CSS layout in the analysis of a large part, we analyze the Web page artwork is not to analyze the picture is good, but from the CSS layout analysis of the Web page art, and CSS layout analysis directly affects the future CSS refactoring HTML page is a good writing step.

Layout knowledge:

DIV+CSS layout, CSS layout is a generic term for Web page HTML that is developed by the use of DIV tag +css style sheet code (HTML).

DIV+CSS Layout Benefits: Easy to maintain, favorable SEO (Google will open the speed of Web pages as a ranking factor and SEO factors), Web page open faster, in line with web standards.

Before making DIV+CSS Web page think layout:

First we get a web art picture we will think from top to bottom, upper and lower, left and right, Kaminaka (including left and right) under the layout framework.

Below is an example of the CSS layout analysis, we analyze the CSS layout on the list page:

First we can analyze the div CSS Layout refactoring This page structure framework, we can see is the upper, middle and lower structure, including the left and right structure.

Thus we will write this page CSS and HTML when the first from the top to bottom from the outside to the internal principle of writing CSS and HTML.

We first build a Web folder and the new HTML page in this folder is named Index.html, and the CSS file is named Index.css. Here is the trick is that you can import templates to build CSS and HTML initial page, and then reference the CSS file to HTML, that is, I introduced in the template CSS template, and then on the basis of CSS template and then add CSS.

The following is the HTML code for index.html:

The following is the referenced content:

<! DOCTYPE "> 
The CSS code for index. CSS is as follows:

The following is the referenced content:

Body, Div, address, blockquote, IFRAME, UL, OL, DL, DT, DD, Li, DL, H1, H2, H3, H4, H5, H6, p, Pre, table, caption, TH, TD , form, legend, fieldset, Input, button, select, textarea {margin:0; padding:0; font-weight:normal;font-style:normal;fon t-size:100%; Font-family:inherit;}  OL, UL, Li{list-style:none;} img {border:0;} body {color: #000; background: #FFF; text-align:center; font:12px/1.5 Arial, Helvetica, Sans-serif;} . clearfix:after {clear:both; Content: "."; display:block; height:0pt; visibility:hidden; overflow:hidden;}. clear{ clear:both;height:1px; margin-top:-1px; width:100%;} . Dis{display:block,}. Undis{display:none;}/* This above code is the initial CSS template, the following is the new write CSS Layout framework code */#header, #centers, #footer {width:100%; margin:0 Auto; clear:both;font-size:18px; line-height:68px; Font-weight:bold;} #header {height:68px; border:1px solid #CCCCCC;} #centers {padding:8px 0;} #footer {border-top:1px solid #CCCCCC; Backgro und: #F2F2F2;} #centers. c_left{float:left; width:230px; border:1px solid #00CC66; backgrOund: #F7F7F7; margin-right:5px; } #centers. c_right{float:left; width:500px;border:1px solid #00CC66; background: #F7F7F7}
You can test out these two pieces of code to create a new test, we will lay out the above Art page CSS and HTML framework, and then continue to add CSS and HTML source code according to each content.

The CSS layout is important and the explanation is believed that everybody already understood. More exciting please focus on the PHP Chinese web other related articles!

Related reading:

Table styles for HTML

How to use Min-height and max-height in CSS

How to display a circular picture in CSS3