Master the pure CSS layout of web pages in one article

The content this article brings to you is about pure CSS layout web pages. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The first possibility is that you haven’t understood the principle of CSS processing pages. Before you consider the overall performance of your page, you should first consider the semantics and structure of the content, and then add CSS for the semantics and structure. This article will tell you how to structure HTML.

Another reason is that you are at a loss for those very familiar presentation layer attributes (such as: cellpadding, hspace, align="left", etc.) and don't know what CSS statement to convert them into. Once you have solved the first problem and know how to structure your HTML, I will give you a list detailing what CSS to use to replace the original presentation attributes.

Structured HTML

When we first learn to make web pages, we always consider how to design them first, considering the pictures, fonts, colors, and layout plans. Then we use Photoshop or Fireworks to draw it and cut it into small pictures. Finally, edit the HTML to restore all the designs to the page.

If you want your HTML page to be laid out with CSS (it is CSS-friendly), you need to go back and start over. Don't think about "appearance" first, but first think about the semantics and structure of your page content.

Appearance is not the most important thing. A well-structured HTML page can be presented in any appearance, and CSS Zen Garden is a classic example. CSS Zen Garden helps us finally realize the power of CSS.

HTML is not just for reading on a computer screen. Your carefully designed images in Photoshop may not be displayed on PDAs, mobile phones, and screen readers. But a well-structured HTML page can be displayed anywhere and on any network device through different definitions of CSS.

The first thing to learn is what "structure" is, which some writers also call "semantics". What this term means is that you need to analyze your content blocks and the purpose each piece of content serves, and then build the corresponding HTML structure based on these content purposes.

If you sit down and carefully analyze and plan your page structure, you may end up with a few pieces like this:

Logo and site name

Main page content

Site navigation (main menu)

Submenu

Search box

Ritual area (e.g. shopping cart, checkout)

Footer (copyright and related legal notices)

We usually use DIV elements to define these structures, similar to this:

＜div id="header"＞＜/div＞
＜div id="content"＞＜/div＞
＜div id="globalnav"＞＜/div＞
＜div id="subnav"＞＜/div＞
＜div id="search"＞＜/div＞
＜div id="shop"＞＜/div＞
＜div id="footer"＞＜/div＞

This is not a layout, but a structure. This is a semantic description of content blocks. When you understand your structure, you can add the corresponding ID to the DIV. Any content block can be contained within a DIV container, and another DIV can be nested within it. Content blocks can contain any HTML element --- titles, paragraphs, images, tables, lists, etc.

According to the above, you already know how to structure HTML, and now you can define layout and style. Each content block can be placed anywhere on the page, and the color, font, border, background, alignment properties, etc. of the block can be specified.

The above is the complete introduction to pure CSS layout web pages. If you want to know more about CSS tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of Master the pure CSS layout of web pages in one article. For more information, please follow other related articles on the PHP Chinese website!