Markup language - for
|
Click here to return to the 123WORDPRESS.COM HTML Tutorial section. To view the CSS tutorial, please click here. Above: Markup language – image replacement . Chapter 15 Specifying styles for <body> One of the benefits of separating content from display is flexibility. By controlling the layout of a website with CSS (the method used in Chapter 12), you can control the design elements of the entire website. By changing a few rules, you can dramatically update thousands of pages at once. One of the demonstrations of the convenience of using CSS to control layout is to specify styles for <body>. By adding a class or id to the <body> tag, you can customize any tag on the page. There is no need to worry about repeated definitions. In this chapter, we will explore how to use the same markup structure to switch between two different layout configurations by adding classes to the <body> tag. Two-column or three-column layouts are like when we redesigned the website for Fast Company using CSS layout techniques. One of the challenges is that although all pages share the same navigation and footer area, we also need to create two different layouts. The first layout is the "index page (home page)", see Figure 15-1. This is a page with navigation functions, allowing users to continue to drill down into the directory structure of the website. For these pages, we decided to use a three-column layout.  Figure 15-1 Fast Company's three-column "index page" demonstrates the second page layout, which is the "content page" Figure 15-2. Any page that feels like a destination uses this layout. To improve readability, we decided to omit the left column and leave two columns, that is, one large column for content and the other for advertising.  Figure 15-2 Fast Company's two-column "content page" example. The reason I explain this is not to prove that we have solved a great mystery of page layout, but to demonstrate that adding classes to the <body> tag can adjust the column width and place or omit the third column according to the page form. When creating such an effect, no rules are repeated at all, and no additional style sheets are introduced. Markup and style structure After starting to describe the markup structure shared by the two pages, these descriptions will begin to make sense. In order to achieve a column layout, the absolute positioning method mentioned in Chapter 12 will be used. The simplified markup structure of the content page looks like this:
Use CSS rules to add a right outer patch to #content and #footer that is large enough to fit into #right using absolute positioning. In this example, 190 pixels is just enough.
Index Page For the index page, the markup structure is exactly the same, so there is no need to duplicate the shared CSS rules, but an extra <div> is added to the left of #content as a 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> |
<<: Detailed explanation of the difference between JavaScript onclick and click
>>: TCP performance tuning implementation principle and process analysis
Recommend
MySQL optimization strategy (recommended)
In summary: 1. Consider performance when designin...
CSS realizes the speech bubble effect with sharp corners in the small sharp corner chat dialog box
1. Use CSS to draw a small pointed-corner chat di...
Advanced explanation of javascript functions
Table of contents Function definition method Func...
How to implement remote automatic backup of MongoDB in Linux
Preface After reading the previous article about ...
gbk utf8 How to choose to correctly understand and use GBK and UTF-8 web page encoding
Web page encoding is translated into English as we...
Summary of Linux vi command knowledge points and usage
Detailed explanation of Linux vi command The vi e...
jQuery implements the practice of changing the position and size of div by dragging the mouse
To achieve an effect similar to Windows forms, dr...
The combination and difference between ENTRYPOINT and CMD in dockerfile
In the previous article [Detailed explanation of ...
Application of Hadoop counters and data cleaning
Data cleaning (ETL) Before running the core busin...
CSS to achieve horizontal lines on both sides of the middle text
1. The vertical-align property achieves the follo...
Detailed explanation of CSS3 rotating cube problem
3D coordinate concept When an element rotates, it...
WeChat applet uses canvas to draw clocks
This article shares the specific code of using ca...
How to create a table in mysql and add field comments
Directly post code and examples #Write comments w...
CSS style reset and clear (to make different browsers display the same effect)
In order to make the page display consistent betwe...
iframe multi-layer nesting, unlimited nesting, highly adaptive solution
There are three pages A, B, and C. Page A contains...