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:

<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>

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.

#content, #footer {
margin: 10px 190px 10px 10px;
}

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>

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.
But the left outer patch has been set to 10 pixels to match the default content page layout with only two columns.
Wow, we are stuck, how do we proceed? Please continue reading.
Previous Page 1 2 3 Next Page Read More

<<: Detailed explanation of the difference between JavaScript onclick and click

>>: TCP performance tuning implementation principle and process analysis

10 key differences between HTML5 and HTML4

Markup language - for

10 key differences between HTML5 and HTML4

Node implements search box for fuzzy query

Detailed tutorial for installing mysql5.7.21 under Windows

Website Building Tutorial for Beginners: Learn to Build a Website in Ten Days

MySQL join buffer principle

New interactive experience of online advertising in website production (graphic tutorial)

JavaScript implements simple calculator function

Summary of shell's method for determining whether a variable is empty

A brief discussion on the perfect adaptation solution for Vue mobile terminal

Installation and use of Apache stress testing tools

Recommend

win10 mysql 5.6.35 winx64 free installation version configuration tutorial

Windows Server 2008 Tutorial on Monitoring Server Performance

js to implement web calculator

Detailed explanation of MySQL monitoring tool mysql-monitor

Detailed explanation of nginx-naxsi whitelist rules

MySQL 8.0.15 installation and configuration tutorial under Win10

MySQL 8.0.20 compressed version installation tutorial with pictures and text

How to change the host name in Linux

Newbies quickly learn the steps to create website icons

Form submission refresh page does not jump source code design

MySQL high availability cluster deployment and failover implementation

Use MySQL to open/modify port 3306 and open access permissions in Ubuntu/Linux environment

vue front-end HbuliderEslint real-time verification automatic repair settings

Eight hook functions in the Vue life cycle camera

jQuery achieves breathing carousel effect