DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS+Div網頁布局中的結構與表現
CSS+Div網頁布局中的結構與表現
編輯:CSS詳解     

在Web標准中一個很重要的概念就是強調頁面的結構與表現分離。說的通俗一點就是XHTML中應該沒有樣式化的東西,而且Web在浏覽器中除內容外都應該由CSS表現,這包括布局與其它樣式。一旦一個標准的XHTML代碼寫完之後,那麼CSS可以實現其實百變面孔。其實XHTML是一個演員,CSS是編劇,XHtml演什麼角色,都由CSS來決定的。

    這聽起來似乎有點理想主義,實現起來似乎就沒有那麼容易了。不過我還是想通過一個簡單的例子來說問題。

    我們在設計頁面的時候遵循的一個原則就是:重要內容首先加載,將要內容稍後加載。因此我們會發現像我的博客一樣,主內容代碼是寫在側邊欄前面的。但是我們卻可以通過CSS使側邊欄位於左側,如果不看代碼只看在頁面中的表現,這和先加載側邊欄沒有什麼不同。這就是結構和表現分離的好處。

    假設我們有一個三欄的布局,其中兩個是主內容區域,一個是側邊欄的次內容區域。那麼按照上面的原則,我們應該把兩個主內容區域的代碼寫在側邊欄次內容區域的前面,這樣浏覽器才會首先加載他們。那麼我們就要構建下面的代碼段:

<div id="content">  
  <div id="primaryContent"></div>  
   <div id="secondaryContent"></div>  
 <div id="sideContent"></div>  
</div> 

前面已經說過,結構和表現分離的好處就是我們可以任意地安排這三欄的位置。比如我們要把“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;

這樣位置就正好了。

(自己查看運行效果)

<!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布局中的結構和表現分離 </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>主內容區1</h3>
   這是主內容區,為了增強用戶體驗,使用主要內容首先顯示,它往往在放在其它內容的前面。
<pre>
 #primaryContent {
  float:left;
  height:300px;
  width:290px;
  margin-left:170px;
 }</pre>
   </div>
   <div id="secondaryContent"><h3>主內容區2</h3>這是主內容區,為了增強用戶體驗,使用主要內容首先顯示,它往往在放在其它內容的前面。
<pre>
 #secondaryContent {
  float:left;
  height:300px;
  width:290px;
  margin-left:10px;
 }</pre>
   </div>
   <div id="sideContent"><h4>次內容區</h4>這是將要內容區域,它往往出現在頁面的後部。
<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樣式就可以實現多種布局:

代碼1(自己查看運行效果)

<!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布局中的結構和表現分離 </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>主內容區1</h3>
   這是主內容區,為了增強用戶體驗,使用主要內容首先顯示,它往往在放在其它內容的前面。
<pre>
 #primaryContent {
  float:left;
  height:300px;
  width:290px;
 }</pre>
   </div>
   <div id="secondaryContent"><h3>主內容區2</h3>這是主內容區,為了增強用戶體驗,使用主要內容首先顯示,它往往在放在其它內容的前面。
<pre>
 #secondaryContent {
  float:left;
  height:300px;
  width:290px;
  margin-left:180px;
 }</pre>
   </div>
   <div id="sideContent"><h4>次內容區</h4>這是將要內容區域,它往往出現在頁面的後部。
<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(自己查看運行效果)

<!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布局中的結構和表現分離 </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>主內容區1</h3>
   這是主內容區,為了增強用戶體驗,使用主要內容首先顯示,它往往在放在其它內容的前面。
<pre>
 #primaryContent {
  float:left;
  height:300px;
  width:290px;
 }</pre>
   </div>
   <div id="secondaryContent"><h3>主內容區2</h3>這是主內容區,為了增強用戶體驗,使用主要內容首先顯示,它往往在放在其它內容的前面。
<pre>
 #secondaryContent {
  float:left;
  height:300px;
  width:290px;
  margin-left:10px;
 }</pre>
   </div>
   <div id="sideContent"><h4>次內容區</h4>這是將要內容區域,它往往出現在頁面的後部。
<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>

    其實還能實現更復雜的布局。我舉這個例子當然不是在講布局的技巧,只是說說為什麼一下強調結構與表現分例,光說不練可不好理解它的真谛。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved