Click here to return to the Wulin.com HTML tutorial column. If you want to browse the CSS tutorial, please click here.
Above: Markup Language - Picture Replacement . Chapter 15 Specify a style for <body>
One of the benefits of setting content and display effects separately is flexibility. By using CSS to control the layout of the website (the method used in Chapter 12), you can control the design elements of the entire website, change a few rules, and immediately dramatically update thousands of pages.
One of the convenience examples of using CSS to control layout is to specify a style for <body>, and by adding class or id to <body> tags, you can customize any tags on the page. There is no trouble of repeated definitions at all.
In this chapter, we will explore how to use a tag structure to switch two different layout configurations by adding class to the <body> tag. Two-column or three-column layouts.
Just like when redesigning a website for Fast Company using CSS layout technology, one of the challenges is: although all pages share the same navigation and end of the page, two different layouts are also required.
The first layout is the index page (home page), see Figure 15-1. This is a page with navigation function, allowing users to continue to penetrate the directory structure of the website. We decided to use a three-column layout for these pages.
Figure 15-1 Fast Company's three-column index page demonstration
The second page layout is the internal page Figure 15-2. Any page that feels like the destination uses this layout layout. In order to improve readability, we decided to omit the left column and leave two columns, that is, one large column places content and the other puts advertisements.
Figure 15-2 Fast Company’s two-column text page demonstration.
The reason I explain this is not to prove that we have cracked the great mystery of a certain layout, but to demonstrate that adding class to the <body> tag can adjust the width of the column, and place or omit the third column according to the page shape. When creating such an effect, no rules are repeated at all, and no additional style sheets are introduced. Marks and style structures are added.
After starting to describe the marking structure shared by the two pages, these narratives will begin to make sense. In order to achieve the column layout, the absolute positioning method mentioned in Chapter 12 will be used.
The simplified tag structure of the text page looks like this:
<div id=header>
...header info here...
</div>
<div id=content>
...content here...
</div>
<div id=right>
...right column info...
</div>
<div id=footer>
...footer info...
</div>
Using the CSS rules as #content and #footer plus a right-right patch that is sufficient to use absolute positioning method to put into #right. In this example, 190 pixels are just enough.
#content, #footer {
margin: 10px 190px 10px 10px;
}
For index pages, the markup structure is exactly the same, so there is no need to copy a shared CSS rule, but an extra <div> is added to the left of #content as the third column (#left).
<div id=header>
...header info here...
</div>
<div id=content>
...content here...
</div>
<div id=left> ...left column info... </div> <div id=right> ...right column info... </div><div id=footer>
...footer info...
</div>
For this three-column structure, not only should we set the right outer patch for #content and #footer to accommodate the right column, but we should also set the left outer patch to accommodate the newly added left column.
However, the left outer patch has been set to 10 pixels to match the preset text page layout that only has double columns.
Wow, we are stuck, how should we continue? Please continue reading.
Previous page 1 2 3 Next page Read the full text