CSS+Div網(wǎng)頁布局中的結(jié)構(gòu)與表現(xiàn)

2024-07-11 08:21:09

字體：大中小

供稿：網(wǎng)友

在web標(biāo)準(zhǔn)中一個(gè)很重要的概念就是強(qiáng)調(diào)頁面的結(jié)構(gòu)與表現(xiàn)分離。說的通俗一點(diǎn)就是xhtml中應(yīng)該沒有樣式化的東西，而且web在瀏覽器中除內(nèi)容外都應(yīng)該由css表現(xiàn)，這包括布局與其它樣式。一旦一個(gè)標(biāo)準(zhǔn)的xhtml代碼寫完之后，那么css可以實(shí)現(xiàn)其實(shí)百變面孔。其實(shí)xhtml是一個(gè)演員，css是編劇，xhtml演什么角色，都由css來決定的。

這聽起來似乎有點(diǎn)理想主義，實(shí)現(xiàn)起來似乎就沒有那么容易了。不過我還是想通過一個(gè)簡(jiǎn)單的例子來說問題。

我們?cè)谠O(shè)計(jì)頁面的時(shí)候遵循的一個(gè)原則就是：重要內(nèi)容首先加載，將要內(nèi)容稍后加載。因此我們會(huì)發(fā)現(xiàn)像我的博客一樣，主內(nèi)容代碼是寫在側(cè)邊欄前面的。但是我們卻可以通過css使側(cè)邊欄位于左側(cè)，如果不看代碼只看在頁面中的表現(xiàn)，這和先加載側(cè)邊欄沒有什么不同。這就是結(jié)構(gòu)和表現(xiàn)分離的好處。

假設(shè)我們有一個(gè)三欄的布局，其中兩個(gè)是主內(nèi)容區(qū)域，一個(gè)是側(cè)邊欄的次內(nèi)容區(qū)域。那么按照上面的原則，我們應(yīng)該把兩個(gè)主內(nèi)容區(qū)域的代碼寫在側(cè)邊欄次內(nèi)容區(qū)域的前面，這樣瀏覽器才會(huì)首先加載他們。那么我們就要構(gòu)建下面的代碼段：

前面已經(jīng)說過，結(jié)構(gòu)和表現(xiàn)分離的好處就是我們可以任意地安排這三欄的位置。比如我們要把“sidecontent”放在頁面的左側(cè)，主內(nèi)容區(qū)位于中間和左側(cè)，同時(shí)欄與欄之間有10px的間距。我們?cè)O(shè)定頁面寬度為760px，扣除兩個(gè)10px的間隔，那么內(nèi)容區(qū)的共有740px的寬度，我們可以設(shè)定請(qǐng)內(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為使三個(gè)div元素水平對(duì)齊的常用方法。這樣我們預(yù)覽頁面的時(shí)候，三個(gè)div便會(huì)出現(xiàn)在同一行內(nèi)。

接下來，我們要移動(dòng)它們的位置。把primarycontent移動(dòng)到160+10px的位置（10px）為間距，那么可以設(shè)置為

margin-left:170px;

把sendcondary依此向右移動(dòng)，和primarycontent的距離也是10px，需要

margin-left:10px;

那么這個(gè)時(shí)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，請(qǐng)使用internet explorer 7、firefox等瀏覽器查看）

對(duì)于兩樣一段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>