结合html和css制作页面的布局结构,CSS Div网页布局中的结构与表现
在Web標準中一個很重要的概念就是強調頁面的結構與表現分離。說的通俗一點就是XHTML中應該沒有樣式化的東西，而且Web在瀏覽器中除內容外都應該由CSS表現，這包括布局與其它樣式。一旦一個標準的XHTML代碼寫完之后，那么CSS可以實現其實百變面孔。其實XHTML是一個演員，CSS是編劇，XHTML演什么角色，都由CSS來決定的。
這聽起來似乎有點理想主義，實現起來似乎就沒有那么容易了。不過我還是想通過一個簡單的例子來說問題。
我們在設計頁面的時候遵循的一個原則就是：重要內容首先加載，將要內容稍后加載。因此我們會發現像我的博客一樣，主內容代碼是寫在側邊欄前面的。但是我們卻可以通過CSS使側邊欄位于左側，如果不看代碼只看在頁面中的表現，這和先加載側邊欄沒有什么不同。這就是結構和表現分離的好處。
假設我們有一個三欄的布局，其中兩個是主內容區域，一個是側邊欄的次內容區域。那么按照上面的原則，我們應該把兩個主內容區域的代碼寫在側邊欄次內容區域的前面，這樣瀏覽器才會首先加載他們。那么我們就要構建下面的代碼段：
前面已經說過，結構和表現分離的好處就是我們可以任意地安排這三欄的位置。比如我們要把“sideContent”放在頁面的左側，主內容區位于中間和左側，同時欄與欄之間有10px的間距。我們設定頁面寬度為760px，扣除兩個10px的間隔，那么內容區的共有740px的寬度，我們可以設定請內容區為290px，側邊欄為160px。于是有
#primaryContent {
float:left;
width:290px;
height:300px;
}
#secondaryContent {
float:left;
width:290px;
height:300px;
}
#sideContent {
float:left;
width:160px;
height:300px;
}
注：為了演示方便沒有優化代碼。
float:left為使三個div元素水平對齊的常用方法。這樣我們預覽頁面的時候，三個div便會出現在同一行內。
接下來，我們要移動它們的位置。把primaryContent移動到160 10px的位置(10px)為間距，那么可以設置為
margin-left:170px;
把sendcondary依此向右移動，和primaryContent的距離也是10px，需要
margin-left:10px;
那么這個時sideContent已經被擠出content了，并且其左邊緣正好是content的右邊緣，因此我們要使用負的邊距把它拉回到正常位置：
margin-left:-760px;
這樣位置就正好了。
(自己查看運行效果)
div css布局中的結構和表現分離body { font-size:middle;font-family:Tahoma,Arial, Helvetica, sans-serif,"雅黑","宋體"; background-color:#999;}
div { background-color:#ccc; }
#wrap {
width:760px;
padding:10px;
margin:0 auto;
background-color:#fff;
}
#header {
height:100px;
}
#content {
height:300px;
margin-top:10px;
background-color:#fff;
}
#primaryContent {
float:left;
height:300px;
width:290px;
margin-left:170px;
}
#secondaryContent {
float:left;
height:300px;
width:290px;
margin-left:10px;
}
#sideContent {
float:left;
height:300px;
width:160px;
margin-left:-760px;
}
#footer {
height:100px;
margin-top:10px;
}
pre { font-family:tahoma; }
header主內容區1
這是主內容區，為了增強用戶體驗，使用主要內容首先顯示，它往往在放在其它內容的前面。
#primaryContent {
float:left;
height:300px;
width:290px;
margin-left:170px;
}
主內容區2
這是主內容區，為了增強用戶體驗，使用主要內容首先顯示，它往往在放在其它內容的前面。#secondaryContent {
float:left;
height:300px;
width:290px;
margin-left:10px;
}
次內容區
這是將要內容區域，它往往出現在頁面的后部。#sideContent {
float:left;
height:300px;
width:160px;
margin-left:-760px;
}
footer http://www.dudo.org/(修正bug，請使用Internet Explorer 7、Firefox等瀏覽器查看)
對于兩樣一段XHTML代碼，我們只需要修改CSS樣式就可以實現多種布局：
代碼1(自己查看運行效果)
div css布局中的結構和表現分離body { font-size:middle;font-family:Tahoma,Arial, Helvetica, sans-serif,"雅黑","宋體"; background-color:#999;}
div { background-color:#ccc; }
#wrap {
width:760px;
padding:10px;
margin:0 auto;
background-color:#fff;
}
#header {
height:100px;
}
#content {
height:300px;
margin-top:10px;
background-color:#fff;
}
#primaryContent {
float:left;
height:300px;
width:290px;
}
#secondaryContent {
float:left;
height:300px;
width:290px;
margin-left:180px;
}
#sideContent {
float:left;
height:300px;
width:160px;
margin-left:-460px;
}
#footer {
height:100px;
margin-top:10px;
}
pre { font-family:tahoma; }
header主內容區1
這是主內容區，為了增強用戶體驗，使用主要內容首先顯示，它往往在放在其它內容的前面。
#primaryContent {
float:left;
height:300px;
width:290px;
}
主內容區2
這是主內容區，為了增強用戶體驗，使用主要內容首先顯示，它往往在放在其它內容的前面。#secondaryContent {
float:left;
height:300px;
width:290px;
margin-left:180px;
}
次內容區
這是將要內容區域，它往往出現在頁面的后部。#sideContent {
float:left;
height:300px;
width:160px;
margin-left:-460px;
}
footer http://www.dudo.org/代碼2(自己查看運行效果)
div css布局中的結構和表現分離body { font-size:middle;font-family:Tahoma,Arial, Helvetica, sans-serif,"雅黑","宋體"; background-color:#999;}
div { background-color:#ccc; }
#wrap {
width:760px;
padding:10px;
margin:0 auto;
background-color:#fff;
}
#header {
height:100px;
}
#content {
height:300px;
margin-top:10px;
background-color:#fff;
}
#primaryContent {
float:left;
height:300px;
width:290px;
}
#secondaryContent {
float:left;
height:300px;
width:290px;
margin-left:10px;
}
#sideContent {
float:left;
height:300px;
width:160px;
margin-left:10px;
}
#footer {
height:100px;
margin-top:10px;
}
pre { font-family:tahoma; }
header主內容區1
這是主內容區，為了增強用戶體驗，使用主要內容首先顯示，它往往在放在其它內容的前面。
#primaryContent {
float:left;
height:300px;
width:290px;
}
主內容區2
這是主內容區，為了增強用戶體驗，使用主要內容首先顯示，它往往在放在其它內容的前面。#secondaryContent {
float:left;
height:300px;
width:290px;
margin-left:10px;
}
次內容區
這是將要內容區域，它往往出現在頁面的后部。#sideContent {
float:left;
height:300px;
width:160px;
margin-left:10px;
}
footerhttp://www.dudo.org/
其實還能實現更復雜的布局。我舉這個例子當然不是在講布局的技巧，只是說說為什么一下強調結構與表現分例，光說不練可不好理解它的真諦。
總結
以上是生活随笔為你收集整理的结合html和css制作页面的布局结构,CSS Div网页布局中的结构与表现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML <!DOCTYPE>
- 下一篇： win10如何一键修复网络