Some points to be aware of in CSS layout

A Web page layout, for the user experience and the impact of Baidu rankings is very significant, even if your site content is good, as long as the layout is poor, that is useless, so when we get from the design of the picture is not to casually add to their own web page, only the image analysis, can be very good CSS layout.

Layout in the analysis of a large part, we analyze the Web page artwork is not to analyze whether the picture looks good, but from the CSS layout analysis of the Web page artwork, and CSS layout analysis directly affect the future of the CSS to reconstruct HTML page is a good step to write.

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 to explain the CSS layout analysis, we analyze the CSS layout with DIVCSS5 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 HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
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.



About CSS layout _div CSS layout importance is so much that I hope to help you. The above case unknown hope you do more practice, only practice can be practiced good technology.

Related reading:

Ultra-lightweight web flow layout js Plugin macy.js

CSS3 in the Flex layout

Layout tags and list tags in HTML text