Home > Developer > JavaScript
Css layout for ultra-full CSS solutions and css solution Layout
1. Fixed-width center layout
First, we will discuss the common fixed-width center layout, which should be the most widely used in practice.
Then we can consider whether to apply a large background in two ways: one is to allow a large background as a whole, the other is the header, and a full screen background can be tiled in the middle and bottom. Next we will discuss three situations from the presence or absence of sidebar: one is left or right sidebar, the other is no sidebar, and the last is the existence of both the left and right sidebar.
The layout scheme we discussed here draws on the subject of drupal. Therefore, if you have learned the drupal cms, you should be familiar with it.
2.html Structure DescriptionWe use html5 labels, so it is necessary to import html5.js for ie6-8. Then, we set all the structures to be included in a div whose class is page. In this div, we also need to add the layout class, aside-left, aside-right, two-sides and no-side correspond to the left-side column, right-side column, left-side column, and no sidebar layout. Here we take the two-column layout as an example. There are five areas in total, they are header, left, content, right, and footer fields. In each region, we add a div with class as inner, which is mainly used to assist our layout, by default, we set 10px for each bit on the left and right of the margin, which can be overwritten as needed.
3. Why use inner?We have said that this is used to assist our layout. In many cases, we have to consider border, left and right margin, padding, and so on during the layout. Now we are completely putting this behind our minds, this is done by our inner. For example, the entire width is PX, and the left and right sides are respectively PX, while the content is PX. Our previous thought should be about 200px, and the intermediate content is 580px (margin is 10px) or 560px (margin is 20px), so if we need to change it to 980px, we have to change several other values. If we want to add a border to the left and right sides and change it to 202px, or set the left and right width to 198px, How tangled this is. Now we introduce inner. When we directly calculate the width, we don't need to consider border, margin, padding or anything, and then re-override the inner in each area. Isn't that all done. The html code in the left and right columns is provided for reference. For details, see the demo below.
1 <!DOCTYPE HTML> 2If you need to design a full-screen background for each header, iner, and footer, the above will definitely not work. We can add a layer of wrap to the three Divs, and this wrap is full screen.
Demo: left sidebar layout right sidebar layout left and right sidebar layout no sidebar Layout
Ps: original article from www.w3cplus.com
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
