DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 徹底弄懂CSS盒子模式(DIV布局快速入門)第1
徹底弄懂CSS盒子模式(DIV布局快速入門)第1
編輯:CSS詳解     

由“盒子”堆出來的網頁版面

 



現在對CSS盒子模式理解多少了,如果還不夠透徹,繼續往下看,我會在後面舉例,並延用盒子的概念來解釋它。
轉變我們的思路
  傳統的前台網頁設計是這樣進行的:根據要求,先考慮好主色調,要用什麼類型的圖片,用什麼字體、顏色等等,然後再用Photoshop這類軟件自由的畫出來,最後再切成小圖,再不自由的通過設計HTML生成頁面,改用CSS排版後,我們要轉變這個思想,此時我們主要考慮的是頁面內容的語義和結構,因為一個強CSS控制的網頁,等做好網頁後,你還可以輕松的調你想要的網頁風格,況且CSS排版的另外一個目的是讓代碼易讀,區塊分明,強化代碼重用,所以結構很重要。如果你想說我的網頁設計的很復雜,到後來能不能實現那樣的效果?我要告訴你的是,如果用CSS實現不了的效果,一般用表格也是很難實現的,因為CSS的控制能力實在是太強大了,順便說一點的是用CSS排版有一個很實用的好處是,如果你是接單做網站的,如果你用了CSS排版網頁,做到後來客戶有什麼不滿意,特別是色調的話,那麼改起來就相當容易,甚至你還可以定制幾種風格的CSS文件供客戶選擇,又或者寫一個程序實現動態調用,讓網站具有動態改變風格的功能。
實現結構與表現分離
  在真正開始布局實踐之前,再來認識一件事——結構和表現相分離,這也用CSS布局的特色所在,結構與表現分離後,代碼才簡潔,更新才方便,這不正是我們學習CSS的目的所在嗎?舉個例來說P是結構化標簽,有P標簽的地方表示這是一個段落區塊,margin是表現屬性,我要讓一個段落右縮進2字高,有些人會想到加空格,然後不斷地加空格,但現在可以給P標簽指定一個CSS樣式:P {text-indent: 2em;},這樣結果body內容部分就如下,這沒有外加任何表現控制的標簽:

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved