CSS頁面布局中HTML結構化
互聯網 發(fā)布時間:2008-10-17 19:24:22 作者:佚名
我要評論

您正在學習WEB標準CSS網頁布局嗎?是不是還不能完全掌握純CSS布局?通常有兩種需要您特別注意:
第一種可能是你還沒有理解CSS處理頁面的原理。
在你考慮你的頁面整體表現效果前,你應當先考慮內容的語義和結構,然后再針對語義、結構添加CSS。這篇文章將
您正在學習WEB標準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結構。
如果你坐下來仔細分析和規(guī)劃你的頁面結構,你可能得到類似這樣的幾塊:
標志和站點名稱
主頁面內容
站點導航(主菜單)
子菜單
搜索框
功能區(qū)(例如購物車、收銀臺)
頁腳(版權和有關法律聲明)
我們通常采用DIV元素來將這些結構定義出來,類似這樣: <div id="header"></div>
<div id="main"></div>
<div id="content"></div>
<div id="nav"></div>
<div id="subnav"></div>
<div id="search"></div>
<div id="footer"></div>
這不是布局,是結構。這是一個對內容塊的語義說明。當你理解了你的結構,就可以加對應的ID在DIV上。DIV容器中可以包含任何內容塊,也可以嵌套另一個DIV。內容塊可以包含任意的HTML元素---標題、段落、圖片、表格、列表等等。
根據上面講述的,你已經知道如何結構化 HTML,現在你可以進行布局和樣式定義了。每一個內容塊都可以放在頁面上任何地方,再指定這個塊的顏色、字體、邊框、背景以及對齊屬性等等。
實踐一下結構化
上面說的只是最基本的結構,實際應用中,你可以根據需要來調整內容塊。常常會出現DIV嵌套的情況,你會看到"container"層中又有其它層,結構類似這樣: <div id="header">
<div id="logo">
<h3>http://chabaoo.cn/</h3>
<ul>a list</ul>
</div>
<div id="nav">
<ul>nav list</ul>
<form>search</form>
</div>
</div>
嵌套的div元素允許你定義更多的CSS規(guī)則來控制表現,例如:你可以給#header一個規(guī)則讓它們都居右,或者居中,再給#logo一個規(guī)則讓它居左,而給#nav的list與form另一個完全不同的表現。
相關文章
- 這幾天一直在研究HTML+CSS布局。并沒有把所有的布局都弄明白,只學了一點常用的css控制屬性,此圖只為說明功能,感興趣的各位可以參考下哈,希望可以幫助到你2013-03-28
html+css布局的三種方式(自然布局/流動布局/定位布局)
html+css布局的三種方式(自然布局/流動布局/定位布局)一些新手朋友會很陌生,接下來為您詳細介紹,感興趣的朋友可以了解下2013-01-06基于display:table的CSS布局讓HTML元素和像table一樣
display:table的CSS聲明能夠讓一個HTML元素和它的子節(jié)點像table元素一樣。使用基于表格的CSS布局,使我們能夠輕松定義一個單元格的邊界、背景等樣式,而不會產生因為使用了2012-12-07HTML+CSS網頁設計與布局從入門到精通 pdf 附隨書源碼
HTML+CSS網頁設計與布局從入門到精通 緊密圍繞網頁設計師在制作網頁過程中的實際需要和應該掌握的技術,全面介紹了使用HTML和CSS進行網頁設計和制作的各方面內容和技巧2012-09-26- 網頁制作Webjx文章簡介:CSS網頁布局學習之Font-size的妙用. 我在做網站項目的時候通常需要定義一個高度為10px以下的div。代碼如下: <!DOCTYPE htm2009-04-02
不要使用的HTML標簽(WEB標準網頁布局)-CSS教程-網頁制作-網頁教學網
CSS網頁布局中不推薦使用的HTML標簽,請盡量不要使用這些HTML標簽。 Do not use these html elements in html pages. Presentational elements should not2008-10-17CSS網頁布局:網頁頁面結構化-CSS教程-網頁制作-網頁教學網
你正在學習CSS布局嗎?是不是還不能完全掌握純CSS布局?通常有兩種情況阻礙你的學習: 第一種可能是你還沒有理解CSS處理頁面的原理。在你考慮你的頁面整體表現效2008-10-17關于DIV CSS和XHTML CSS的理解-CSS教程-網頁制作-網頁教學網
WEB標準是一系列標準的集合,并不是僅“DIV CSS”布局就可以實現。以CSS網頁布局只是標準的基礎之一。“DIV CSS”布局只是一種通俗的稱呼罷了。而2008-10-17- 這篇文章主要介紹了HTML+CSS實現單列布局水平居中布局的相關資料,需要的朋友可以參考下2017-09-06