Getting started with div+css layout_CSS/HTML
May 16, 2016 pm 12:11 PM你正在學習CSS佈局嗎?是不是還不能完全掌握純CSS佈局?通常有兩種情況阻礙你的學習:
第一種可能是你還沒理解CSS處理頁面的原理。在你考慮你的頁面整體表現效果前,你應先考慮內容的語意和結構,然後再針對語意、結構添加CSS。這篇文章將告訴你應該如何把HTML結構化。
另一個原因是你對那些非常熟悉的表現層屬性(例如:cellpadding,、hspace、align="left"等等)束手無策,不知道該轉換成對應的什麼CSS語句。當你解決了第一個問題,知道如何結構化你的HTML,我再給出一個列表,詳細列出原來的表現屬性用什麼CSS來代替。
結構化HTML
我們剛學習網頁製作時,總是先考慮怎麼設計,考慮那些圖片、字體、顏色、以及版面方案。然後我們用Photoshop或Fireworks畫出來、切割成小圖。最後再透過編輯HTML將所有設計還原表現在頁面上。
如果你希望你的HTML頁面用CSS佈局(是CSS-friendly的),你需要回頭重來,先不考慮“外觀”,要先思考你的頁面內容的語義和結構。
外觀並不是最重要的。一個結構良好的HTML頁面可以以任何外觀表現出來,CSS Zen Garden就是一個典型的例子。 CSS Zen Garden幫助我們最終認識到CSS的強大力量。
HTML不只在電腦螢幕上閱讀。你用photoshop精心設計的畫面可能無法顯示在PDA、行動電話和螢幕閱讀機上。但是一個結構良好的HTML頁面可以透過CSS的不同定義,顯示在任何地方,任何網路設備上。
開始思考
首先要學習什麼是"結構",有些作家也稱之為"語意"。這個術語的意思是你需要分析你的內容區塊,以及每個內容服務的目的,然後再根據這些內容目的建立起對應的HTML結構。
如果你坐下來仔細分析和規劃你的頁面結構,你可能得到類似這樣的幾塊:
標誌和站點名稱
主頁內容
站點導航(主選單)
子選單
搜尋框
功能區(例如購物車、收銀台)
頁腳(版權及相關法律聲明)
我們通常採用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.
Using selectors is a wonderful thing
The name of the id is a means of controlling a certain content block. By surrounding this content block with a DIV and adding a unique id, you can use CSS to select it. Converter to precisely define the appearance of each page element, including titles, lists, pictures, links or paragraphs, etc. For example, if you write a CSS rule for #header, it can be completely different from the image rule in #content.
Another example is: you can define link styles in different content blocks through different rules. Something like this: #globalnav a:link or #subnav a:link or #content a:link. You can also define different styles for the same element in different content blocks. For example, define the styles of p in #content and #footer respectively through #content p and #footer p. Structurally speaking, your page is composed of pictures, links, lists, paragraphs, etc. These elements themselves do not affect which network device they are displayed on (PDA, mobile phone or Internet TV). They can be defined as Any performance appearance.
A carefully structured HTML page is very simple, and every element is used for structural purposes. When you want to indent a paragraph, you don't need to use the blockquote tag. Just use the p tag and add a CSS margin rule to p to achieve the indentation purpose. p is a structured tag and margin is a presentation attribute. The former belongs to HTML and the latter belongs to CSS. (This is the separation of structure and presentation.)
There are almost no presentation attribute tags in a well-structured HTML page. The code is very clean and concise. For example, the original code

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Adding Box Shadows to WordPress Blocks and Elements

Create a JavaScript Contact Form With the Smart Forms Framework

Create an Inline Text Editor With the contentEditable Attribute

Making Your First Custom Svelte Transition

Demystifying Screen Readers: Accessible Forms & Best Practices

Comparing the 5 Best PHP Form Builders (And 3 Free Scripts)

File Upload With Multer in Node.js and Express
