Shulou(Shulou.com)06/01 Report--

This article mainly introduces "the method of DIV CSS layout". In the daily operation, I believe that many people have doubts about the method of DIV CSS layout. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts of "DIV CSS layout method"! Next, please follow the editor to study!

Layout knowledge:

DIV+CSS layout, CSS layout is the general name of (html) web page developed by html through div tag + css style sheet code.

Div+css layout benefits: easy to maintain, beneficial to seo (Google uses web page opening speed as a ranking factor and SEO factor), web page opening speed is faster, in line with web standards, etc.

Think about the layout before making a div+css page:

First of all, we get a picture of web art and we will think about it from the top, top, middle, left and right, top and middle (including left and right) layout frame.

Let's explain the CSS layout analysis through an example, and we analyze the css layout with the DIVCSS5 list page:

First of all, we can analyze our DIV CSS layout to reconstruct this page structure framework, we can see that it is the upper, middle and lower structure, including the left and right structure.

Therefore, when we write this page CSS and html, we will first write css and html from top to bottom, from outside to inside.

We first create a folder for web and create a new html page in this folder named index.html, and the css file named index.css. Here is a trick is to import the template to build css and html initial page, and then reference the css file to html, that is, I introduced the css template in the template, and then write and add css on the basis of the CSS template.

The following is the html code for index.html:

The following is the referenced content:

Css layout case Lab Page-www..com.cn

I am the head (top)

I am the left in the middle.

I'm the right in the middle.

I am the bottom (bottom)

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, H2, h3, h4, h5, h6, h7, p, pre, table, caption, th, td, form, legend, fieldset, input, button, select, textarea {margin:0; padding:0; font-weight: normal;font-style: normal;font-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;}

/ * the above code is the initial CSS template, and the following is the newly written 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; background:#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 try to create a new one with these two pieces of code, 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.

At this point, the study of "the method of DIV CSS layout" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.