CSS Div網(wǎng)頁布局中的結(jié)構(gòu)與表現(xiàn)
2024-07-11 08:42:50
供稿：網(wǎng)友
在Web標(biāo)準(zhǔn)中一個很重要的概念就是強(qiáng)調(diào)頁面的結(jié)構(gòu)與表現(xiàn)分離。說的通俗一點(diǎn)就是XHTML中應(yīng)該沒有樣式化的東西，而且Web在瀏覽器中除內(nèi)容外都應(yīng)該由CSS表現(xiàn)，這包括布局與其它樣式。一旦一個標(biāo)準(zhǔn)的XHTML代碼寫完之后，那么CSS可以實(shí)現(xiàn)其實(shí)百變面孔。其實(shí)XHTML是一個演員，CSS是編劇，XHTML演什么角色，都由CSS來決定的。
這聽起來似乎有點(diǎn)理想主義，實(shí)現(xiàn)起來似乎就沒有那么容易了。不過我還是想通過一個簡單的例子來說問題。
我們在設(shè)計(jì)頁面的時候遵循的一個原則就是：重要內(nèi)容首先加載，將要內(nèi)容稍后加載。因此我們會發(fā)現(xiàn)像我的博客一樣，主內(nèi)容代碼是寫在側(cè)邊欄前面的。但是我們卻可以通過CSS使側(cè)邊欄位于左側(cè)，如果不看代碼只看在頁面中的表現(xiàn)，這和先加載側(cè)邊欄沒有什么不同。這就是結(jié)構(gòu)和表現(xiàn)分離的好處。
假設(shè)我們有一個三欄的布局，其中兩個是主內(nèi)容區(qū)域，一個是側(cè)邊欄的次內(nèi)容區(qū)域。那么按照上面的原則，我們應(yīng)該把兩個主內(nèi)容區(qū)域的代碼寫在側(cè)邊欄次內(nèi)容區(qū)域的前面，這樣瀏覽器才會首先加載他們。那么我們就要構(gòu)建下面的代碼段：
<div id="content">
<div id="primaryContent"></div>
<div id="secondaryContent"></div>
<div id="sideContent"></div>
</div>
前面已經(jīng)說過，結(jié)構(gòu)和表現(xiàn)分離的好處就是我們可以任意地安排這三欄的位置。比如我們要把“sideContent”放在頁面的左側(cè)，主內(nèi)容區(qū)位于中間和左側(cè)，同時欄與欄之間有10px的間距。我們設(shè)定頁面寬度為760px，扣除兩個10px的間隔，那么內(nèi)容區(qū)的共有740px的寬度，我們可以設(shè)定請內(nèi)容區(qū)為290px，側(cè)邊欄為160px。于是有
#primaryContent {
float:left;
width:290px;
height:300px;
}
#secondaryContent {
float:left;
width:290px;
height:300px;
}
#sideContent {
float:left;
width:160px;
height:300px;
}
注：為了演示方便沒有優(yōu)化代碼。
float:left為使三個div元素水平對齊的常用方法。這樣我們預(yù)覽頁面的時候，三個div便會出現(xiàn)在同一行內(nèi)。
接下來，我們要移動它們的位置。把primaryContent移動到160 10px的位置（10px）為間距，那么可以設(shè)置為
margin-left:170px;
把sendcondary依此向右移動，和primaryContent的距離也是10px，需要
margin-left:10px;
那么這個時sideContent已經(jīng)被擠出content了，并且其左邊緣正好是content的右邊緣，因此我們要使用負(fù)的邊距把它拉回到正常位置：
margin-left:-760px;
這樣位置就正好了。
（自己查看運(yùn)行效果）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> div css布局中的結(jié)構(gòu)和表現(xiàn)分離 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/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; }
</style>
</head>
<body>
<div id="wrap">
<div id="header">header
</div>
<div id="content">
<div id="primaryContent"><h3>主內(nèi)容區(qū)1</h3>
這是主內(nèi)容區(qū)，為了增強(qiáng)用戶體驗(yàn)，使用主要內(nèi)容首先顯示，它往往在放在其它內(nèi)容的前面。
<pre>
#primaryContent {
float:left;
height:300px;
width:290px;
margin-left:170px;
}</pre>
</div>
<div id="secondaryContent"><h3>主內(nèi)容區(qū)2</h3>這是主內(nèi)容區(qū)，為了增強(qiáng)用戶體驗(yàn)，使用主要內(nèi)容首先顯示，它往往在放在其它內(nèi)容的前面。
<pre>
#secondaryContent {
float:left;
height:300px;
width:290px;
margin-left:10px;
}</pre>
</div>
<div id="sideContent"><h4>次內(nèi)容區(qū)</h4>這是將要內(nèi)容區(qū)域，它往往出現(xiàn)在頁面的后部。
<pre>
#sideContent {
float:left;
height:300px;
width:160px;
margin-left:-760px;
}
</pre>
</div>
</div>
<div id="footer">footer <br/><a href="http://www.dudo.org/" style="color:#000;text-decoration:none;">http://www.dudo.org/</a>
</div>
</div>
</body>
</html>
（修正bug，請使用Internet Explorer 7、Firefox等瀏覽器查看）
對于兩樣一段XHTML代碼，我們只需要修改CSS樣式就可以實(shí)現(xiàn)多種布局：
代碼1（自己查看運(yùn)行效果）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> div css布局中的結(jié)構(gòu)和表現(xiàn)分離 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/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; }
</style>
</head>
<body>
<div id="wrap">
<div id="header">header
</div>
<div id="content">
<div id="primaryContent"><h3>主內(nèi)容區(qū)1</h3>
這是主內(nèi)容區(qū)，為了增強(qiáng)用戶體驗(yàn)，使用主要內(nèi)容首先顯示，它往往在放在其它內(nèi)容的前面。
<pre>
#primaryContent {
float:left;
height:300px;
width:290px;
}</pre>
</div>
<div id="secondaryContent"><h3>主內(nèi)容區(qū)2</h3>這是主內(nèi)容區(qū)，為了增強(qiáng)用戶體驗(yàn)，使用主要內(nèi)容首先顯示，它往往在放在其它內(nèi)容的前面。
<pre>
#secondaryContent {
float:left;
height:300px;
width:290px;
margin-left:180px;
}</pre>
</div>
<div id="sideContent"><h4>次內(nèi)容區(qū)</h4>這是將要內(nèi)容區(qū)域，它往往出現(xiàn)在頁面的后部。
<pre>
#sideContent {
float:left;
height:300px;
width:160px;
margin-left:-460px;
}
</pre>
</div>
</div>
<div id="footer">footer <br/><a href="http://www.dudo.org/" style="color:#000;text-decoration:none;">http://www.dudo.org/</a>
</div>
</div>
</body>
</html>
代碼2（自己查看運(yùn)行效果）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> div css布局中的結(jié)構(gòu)和表現(xiàn)分離 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/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; }
</style>
</head>
<body>
<div id="wrap">
<div id="header">header
</div>
<div id="content">
<div id="primaryContent"><h3>主內(nèi)容區(qū)1</h3>
這是主內(nèi)容區(qū)，為了增強(qiáng)用戶體驗(yàn)，使用主要內(nèi)容首先顯示，它往往在放在其它內(nèi)容的前面。
<pre>
#primaryContent {
float:left;
height:300px;
width:290px;
}</pre>
</div>
<div id="secondaryContent"><h3>主內(nèi)容區(qū)2</h3>這是主內(nèi)容區(qū)，為了增強(qiáng)用戶體驗(yàn)，使用主要內(nèi)容首先顯示，它往往在放在其它內(nèi)容的前面。
<pre>
#secondaryContent {
float:left;
height:300px;
width:290px;
margin-left:10px;
}</pre>
</div>
<div id="sideContent"><h4>次內(nèi)容區(qū)</h4>這是將要內(nèi)容區(qū)域，它往往出現(xiàn)在頁面的后部。
<pre>
#sideContent {
float:left;
height:300px;
width:160px;
margin-left:10px;
}
</pre>
</div>
</div>
<div id="footer">footer<br/>
<a href="http://www.dudo.org/" style="color:#000">http://www.dudo.org/</a>
</div>
</div>
</body>
</html>
其實(shí)還能實(shí)現(xiàn)更復(fù)雜的布局。我舉這個例子當(dāng)然不是在講布局的技巧，只是說說為什么一下強(qiáng)調(diào)結(jié)構(gòu)與表現(xiàn)分例，光說不練可不好理解它的真諦。
