如今web2.0炒的很厲害,先不去管它web2.0究竟是什麼東西,反正div+css好像是火的不行了.各大知名站點都趕時髦似的把原來的**布局翻新成了div+css,並美其名曰"本站符合w3c標準",以便讓別人覺得他們的**用的是最先進的技術.div布局真有那麼先進麼?這個問題仍在爭論之中.在這裡咱們不參與這種無聊的爭論,學會它自己感覺一下不就清楚了麼?
實際上div布局並不是什麼高深的東西,如果你知道一點css就變得更簡單了.首先我要說明幾點:
1.這裡的div並不是我們所說的層,雖然他們的標籤都是,在這裡你可以把div理
解成乙個容器,它可以放文字,,**等等.
2.用div布局必須對頁面的結構進行準確的分析,當然用table也要分析頁面結構.用div要分清上下,左右,實際上div布局也只有上下,左右.分析結構要先整體再部分,先分析整體的頁面布局,例如我們一般的頁面是上(banner和導航),中(頁面主體內容,新聞等等),下(版權資訊塊)結構.
+------------------------------------+
| |
| header |
| |
|------------------------------------|
| |
| |
| midbody |
| |
| |
| |
| |
| |
|------------------------------------|
| |
| foot |
| |
+------------------------------------+
於是我們可以把整個頁面放在乙個大div內,於是我們可以這樣來寫結構:
/*大容器放全部內容*/
/*上*/
/*中*/
/*下*/
解釋下上面的id是什麼東西,id後面的內容是當前div以及div內部的東西用的css,這個css可
以規定div的寬度,大小,位置以及內部文字的大小、樣式、顏色等等。
下面看下這幾個css的**：
/*頁面主容器樣式*/
#container
/*頁面頭*/
#header
/*頁面中間*/
#midbody
/*頁面底部*/
#foot
看完整體就要研究部分了，對於部分來說無非就是上下或左右結構了，例如下面的中間又分
為左右。
+------------------------------------+
| |
| header |
| |
|------------------------------------|
| | |
| | midbody |
| | |
|leftside| rightside |
| | |
| | |
| | |
| | |
|------------------------------------|
| |
| foot |
| |
+------------------------------------+
於是div結構可寫成：
midbody中的leftside和rightside的css為：
#leftside
#rightside
如果是這樣的結構：
+------------------------------------+
| |
| header |
| |
|------------------------------------|
| | rightside |
| | rtop |
| | |
|leftside|---------------------------|
| | |rbottom |
| | left | right |
| | | |
| | | |
|------------------------------------|
| |
| foot |
| |
+------------------------------------+
則div結構為：
posted on
2009-07-23 21:11
...)
編輯收藏
如何用div css布局頁面 轉
如今web2.0炒的很厲害,先不去管它web2.0究竟是什麼東西,反正div css好像是火的不行了.各大知名站點都趕時髦似的把原來的 布局翻新成了div css,並美其名曰 本站符合w3c標準 以便讓別人覺得他們的 用的是最先進的技術.div布局真有那麼先進麼?這個問題仍在爭論之中.在這裡咱們不參...
如何用div css布局頁面
如今web2.0炒的很厲害,先不去管它web2.0究竟是什麼東西,反正div css好像是火的不行了.各大知名站點都趕時髦似的把原來的 布局翻新成了div css,並美其名曰 本站符合web2.0標準 以便讓別人覺得他們的 用的是最先進的技術.div布局真有那麼先進麼?這個問題仍在爭論之中.在這裡咱...
如何用div css布局頁面
如今web2.0炒的很厲害,先不去管它web2.0究竟是什麼東西,反正div css好像是火的不行了.各大知名站點都趕時髦似的把原來的 布局翻新成了div css,並美其名曰 本站符合web2.0標準 以便讓別人覺得他們的 用的是最先進的技術.div布局真有那麼先進麼?這個問題仍在爭論之中.在這裡咱...