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
Use auto.js to realize the automatic daily check-in function
Use auto.js to automate daily check-in Due to the...
Using js to achieve waterfall effect
This article example shares the specific code of ...
HTML table tag tutorial (17): table title vertical alignment attribute VALIGN
The table caption can be placed above or below th...
A simple way to clear the CSS, JavaScript and background image cache in the browser
In the actual project development process, the pag...
JavaScript to achieve a simple countdown effect
This article example shares the specific code of ...
VUE implements token login verification
This article example shares the specific code of ...
Detailed explanation of how Angular handles unexpected exception errors
Written in front No matter how well the code is w...
HTML blockquote tag usage and beautification
Blockquote Definition and Usage The <blockquot...
CSS achieves highly adaptive full screen
When writing my own demo, I want to use display:f...
Detailed explanation of the pitfalls of DTS caused by the timestamp and datetime time zone issues in MySQL
Table of contents How to represent the current ti...
The whole process record of Vue export Excel function
Table of contents 1. Front-end leading process: 2...
JavaScript Basics: Scope
Table of contents Scope Global Scope Function Sco...
Vue encapsulation component upload picture component
This article example shares the specific code of ...
Some details about semicolons in JavaScript
Preface Semicolons in JavaScript are optional, an...
How to configure redis sentinel mode in Docker (on multiple servers)
Table of contents Preface condition Install Docke...