Example analysis of Sina Weibo CSS layout

Recently I have been learning CSS page layout design, the learning process has also done a few examples. For the layout of the Web page analysis of ideas is also a certain understanding.

This article does not talk about technology, only a CSS page layout of the production of ideas.

CSS page layout to do first have a clear idea, followed by superb technology, only the idea is correct, starting point right. To make the desired web effect.

Sina Weibo everyone knows that there should be a lot of friends like me in the use of Sina Weibo. Today in this article we will use the interface layout of Sina Weibo as an example to do a CSS Web layout production ideas.

First look at the overall layout of Sina Weibo page effect.

Then we conduct a preliminary decomposition analysis. In terms of overall layout, it is easy to classify the three main areas of the microblog as the header area, the Content section, the footer footer section. The following figure:

From the above picture can also be seen, Sina Weibo interface layout is also very good, there is no particularly many tricks. From the Content section, we can clearly see that Sina Weibo is used in the layout of the Web page is very commonly used in the two-column layout, is the left side of the content area "right" and the sidebar information area.

On the whole, the way Sina Weibo is arranged is this, very concise. Of course, if we want to make the overall layout of Sina Weibo effect we still have to continue to analyze each of the areas of the area of the subdivision.

Take footer For example, look at the picture below

As we can see from the diagram, the footer footer section also divides two large areas, which are the "link" connection section above and the Copyright information section below. The "Link" connection section is divided into 5 different connection modules.

Through our division of the Sina Weibo layout, now should have a very clear idea of production. Then we first write the div code for the module layout. I'll just write it down here.

　

<div id= "Container" > <div id= "Header" > <div **************></div> <div **************></div> ..................... </div> <div id= "Content" > <div id= "Left" > <div **************></div> <div **************></div> .................... </div> <div id= "Right" > <div **************></div> <div **************></div> ....................... </div> </div> <div id= "Footer" > <div id= "link" > <div **************></div> <div **************></div> ....................... </div> <div id= "Copyright" ></div> </div> </div>

The above is the entire Sina Weibo page layout of part of the Div code, I only wrote the approximate framework, the others also need to add reader.

After writing out the entire layout structure, the rest is to start adding CSS style code. CSS style also depends on personal preferences and their design inspiration too added, here do not do too much explanation.

All right, here's the explanation.

Take a break,!~.

Original source: Fly Brother Tour-Shijiazhuang SEO

Original address: http://www.feige123.com/css/css-page-layout-case-study.html