CSS + Div Layout

I used CSS + Div to do two small projects in the past. I felt that it was not very smooth. I felt that it was necessary to make up the course in this regard. Recently I used CSS + Div to copy a few interfaces. It is a good practice, now we have a lot of ideas to share with you.

 

I. why CSS + Div layout? What are the points?

First, the CSS + Div layout is friendly to search engines. Why? It is because the CSS + Div layout code is simple, improving spider crawling efficiency, and crawling a complete page in a short period of time, which is good for the indexing quality. The real website optimization is not only for indexing, but also for a good user experience. The code is simple and will naturally have a good response speed, which is helpful for improving the user experience.

 

For example, using CSS and XHTML to create a navigation menu saves code much more than using JavaScript or images to achieve the same effect (CSS can be used with some images to create a navigation with a small amount of code, the amount of Navigation Code for full use of images is also large ),

In addition, if we try our best to pass W3C verification, the ranking of websites using XTML architecture is better than that of websites with common tables.

 

Secondly, the content and style are separated, and the modification design efficiency is high. Find the corresponding ID or class in CSS or mark the attribute value to modify, which makes it easier to modify the page and does not damage the layout style of other parts of the page. In addition, you can switch the entire page style with one click.

 

In addition, in the visual aspect, the nested table creation method in the past makes the display effect between the page and the page or area and the area slightly different. In contrast, the DIV + CSS component method is used, the CSS file is used to control all pages or all areas to avoid the effect deviation of different areas or pages. Designing navigation menus with CSS does not limit your design. As a matter of fact, CSS provides a more flexible navigation design that can achieve a variety of visual effects when you use CSS to set the background image.

 

Ii. Use CSS + Div layout to start from.

 

When you get a sketch of a page from the artist (if there is no artist, we will talk about it later) and want to use CSS + Div to implement the page, you generally need to follow these three steps:

Analysis Architecture, module splitting, and overall adjustment.

 

Step 1. Analysis Architecture

 

For example, analyze the following page

We should ignore the content and extract the skeleton of the page, that is, the layout structure of the page. See.

Other commonly used la s are probably the following. You can check them on the Internet. They are almost the same.

Step 2: module splitting

 

What are the main elements in the analysis framework. It is convenient for us to implement Div blocks.

 

We can also easily see that this page has four main parts: navigation and top banner, left-side list, content area, and footer (saved in the sketch, too long)

 

After the DIV part ends, add the CSS style to the content.

 

Step 3: overall adjustment

This is nothing more than a grasp of the corner of the entire page. Some final work.

 

 

3. Some small suggestions are also some tips for using CSS + Div for pages.

 

1. If no artist provides you with a sketch of the interface. I do not have the foundation or lack of inspiration. I suggest you find a similar interface on the Internet and implement high imitation (or find a free template ), of course, do not always start with an interface (careful infringement ). This is highly efficient, and the page effect will not be too bad. You may not be able to see it if it is too bad. Or, you don't want to design a part of the page from the ground up, such as navigation menus, so there are a lot of free resources to use.

 

Although tailism is good, I do not advocate it because it will use the same style as other websites. However, some menus can be customized to suit your website style.

 

2. If you want to make a full-browser compatible website, you must develop and check the browser compatibility. Why? If you have developed an interface or even all interfaces in a browser, you can test it in another browser. If the problem is not solved, if the problem is location or other problems, you will find that it will disrupt the layout of your entire page, that is, you have to check again from the beginning, a little change, I tried, the trouble is dying.

 

No way. This is the main drawback of CSS: not all CSS elements are compatible with all browsers. Because of this, we must write some custom CSS to solve the problem. This is also one of the main differences between it and table layout.

 

3. Development tools provided by Firefox and Google, such as firebug, must be used to study others' pages or maintain their own pages, it will bring twice the result with half the effort for your development.

 

4. Do a good job of accumulation. The tips, special effects, or browser-compatible methods used in the development process must be recorded and actively shared, which is advantageous to others.

 

5. To make your page as light as possible, you can use a thumbnail instead of a large image. You can use a thumbnail repeat-X instead of a whole large image. As for the benefits of simplified code, we have mentioned above.