Div+CSS 佈局大全

《Div+CSS 佈局大全》

整理者：Jesse Zhao

網站：http://JesseZhao.cnblogs.co m

第 1 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

div＋css 布局入門 ................................................................................................................................. 4

XHTML 下 css+div 布局總結..................................................................................................................... 6 網頁設計 DIV+CSS——第 1 天:選擇什麼樣的 DOCTYPE ........................................................................... 9 第一天 ............................................................................................................................................. 9

什麼是 DOCTYPE.............................................................................................................................. 10 我們選擇什麼樣的 DOCTYPE ........................................................................................................... 10 補充............................................................................................................................................... 10 網頁設計 DIV+CSS——第 2 天:什麼是名字空間 ................................................................................... 10 網頁設計 DIV+CSS——第 3 天:定義語言編碼....................................................................................... 11 網頁設計 DIV+CSS——第 4 天:調用樣式表........................................................................................... 11 外部調用樣式表............................................................................................................................. 11 雙表法調用樣式表......................................................................................................................... 12 網頁設計 DIV+CSS——第 5 天:head 區的其他設置............................................................................... 12 收藏夾小圖標 ................................................................................................................................ 12 爲搜索引擎準備的內容.................................................................................................................. 12 網頁設計 DIV+CSS——第 6 天:XHTML 代碼規範 .................................................................................... 12

1.所有的標記都必須要有一個相應的結束標記............................................................................. 13

2.所有標籤的元素和屬性的名字都必須使用小寫 ......................................................................... 13

3.所有的 XML 標記都必須合理嵌套 ............................................................................................... 13

4.所有的屬性必須用引號""括起來 ............................................................................................... 13

5.把所有<和&特殊符號用編碼表示 ............................................................................................... 13

6.給所有屬性賦一個值.................................................................................................................. 13

7.不要在注釋內容中使“--”....................................................................................................... 13

網頁設計 DIV+CSS——第 7 天:CSS 入門 ............................................................................................... 14

1.基本語法規範............................................................................................................................. 14

2.顏色值........................................................................................................................................ 14

3.定義字體.................................................................................................................................... 14

第 2 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

4.羣選擇器.................................................................................................................................... 14

5.派生選擇器 ................................................................................................................................ 14

6.id 選擇器................................................................................................................................... 14

6.類別選擇器 ................................................................................................................................ 15

7.定義鏈接的樣式......................................................................................................................... 15

網頁設計 DIV+CSS——第 8 天:CSS 布局入門........................................................................................ 15

1.定義 DIV..................................................................................................................................... 15

2.CSS2 盒模型 ............................................................................................................................... 16

3.輔助圖片一律用背景處理 .......................................................................................................... 17

網頁設計 DIV+CSS——第 9 天:第一個 CSS 布局實例............................................................................ 17

1.確定布局.................................................................................................................................... 18

2.定義 body 樣式........................................................................................................................... 18

3.定義主要的 div.......................................................................................................................... 18

4.100%自適應高度?....................................................................................................................... 20 網頁設計 DIV+CSS——第 10 天:自適應高度......................................................................................... 20 網頁設計 DIV+CSS——第 11 天:不用表格的菜單.................................................................................. 21

1.不用表格的菜單(縱向).............................................................................................................. 21

2.不用表格的菜單(橫向).............................................................................................................. 22

網頁設計 DIV+CSS——第 12 天:校驗及常見錯誤.................................................................................. 24

1.XHTML 校驗 ................................................................................................................................. 24

2.CSS2 校驗................................................................................................................................... 25

CSS 的十八般技巧................................................................................................................................. 25

WEB 打印實例教程................................................................................................................................. 30

Div+CSS 布局入門教程........................................................................................................................... 37

第 3 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

div＋css 布局入門

你正在學習 CSS 佈局嗎？是不是還不能完全掌握純 CSS 佈局？通常有兩種情況阻礙你的學習：

第一種可能是你還沒有理解 CSS 處理頁面的原理。在你考慮你的頁面整體表現效果前，你應當先考慮內容的語義和結構，然後再針對語義、結構添加 CSS。這篇文章將告訴你應該怎樣把 HTML 結構化。

另一種原因是你對那些非常熟悉的表現層屬性(例如：cellpadding,、hspace[x1] 、align="left"等等)束手無策，不知道該轉換成對應的什麼 CSS 語句。當你解決了第一種問題，知道了如何結構化你的 HTML，我再給出一個列表，詳細列出原來的表現屬性用什麼 CSS 來代替。

結構化 HTML

我們在剛學習網頁製作時，總是先考慮怎麼設計，考慮那些圖片、字體、顏色、以及佈局方案。然後我們用 Photoshop

或者 Fireworks 畫出來、切割成小圖。最後再通過編輯 HTML 將所有設計還原表現在頁面上。

如果你希望你的 HTML 頁面用 CSS 佈局(是 CSS-friendly 的)，你需要回頭重來，先不考慮“外觀”，要先思考你的頁面內容的語義和結構。

外觀並不是最重要的。一個結構良好的 HTML 頁面可以以任何外觀表現出來，CSS Zen Garden 是一個典型的例子。CSS Zen

Garden 幫助我們最終認識到 CSS 的強大力量。

HTML 不僅僅只在電腦屏幕上閱讀。你用 photoshop 精心設計的畫面可能不能顯示在 PDA、移動電話和屏幕閱讀機上。但是一個結構良好的 HTML 頁面可以通過 CSS 的不同定義，顯示在任何地方，任何網絡設備上。

開始思考首先要學習什麼是"結構"，一些作家也稱之爲"語義"。這個術語的意思是你需要分析你的內容塊，以及每塊內容服務的

目的，然後再根據這些內容目的建立起相應的 HTML 結構。如果你坐下來仔細分析和規劃你的頁面結構，你可能得到類似這樣的幾塊：

標誌和站點名稱主頁面內容站點導航(主菜單) 子菜單

搜索框功能區(例如購物車、收銀臺) 頁腳(版權和有關法律聲明)

我們通常採用 DIV 元素來將這些結構定義出來，類似這樣：

這不是佈局，是結構。這是一個對內容塊的語義說明。當你理解了你的結構，就可以加對應的 ID 在 DIV 上。DIV 容器中可以包含任何內容塊，也可以嵌套另一個 DIV。內容塊可以包含任意的 HTML 元素---標題、段落、圖片、表格、列表等等。根據上面講述的，你已經知道如何結構化 HTML，現在你可以進行佈局和樣式定義了。每一個內容塊都可以放在頁面上任

何地方，再指定這個塊的顏色、字體、邊框、背景以及對齊屬性等等。使用選擇器是件美妙的事

id 的名稱是控制某一內容塊的手段,通過給這個內容塊套上 DIV 並加上唯一的 id,你就可以用 CSS 選擇器來精確定義每一

個頁面元素的外觀表現,包括標題、列表、圖片、鏈接或者段落等等。例如你爲#header 寫一個 CSS 規則，就可以完全不同於

#content 裏的圖片規則。

第 4 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

另外一個例子是：你可以通過不同規則來定義不同內容塊裏的鏈接樣式。類似這樣：#globalnav a:link 或者 #subnav

a:link 或者#content a:link。你也可以定義不同內容塊中相同元素的樣式不一樣。例如，通過#content p 和#footer p 分別定義#content 和#footer 中 p 的樣式。從結構上講，你的頁面是由圖片、鏈接、列表、段落等組成的，這些元素本身並不會對顯示在什麼網絡設備中(PDA 還是手機或者網絡電視)有影響，它們可以被定義爲任何的表現外觀。

一個仔細結構化的 HTML 頁面非常簡單，每一個元素都被用於結構目的。當你想縮進一個段落，不需要使用 blockquote 標籤，只要使用 p 標籤，並對 p 加一個 CSS 的 margin 規則就可以實現縮進目的。p 是結構化標籤，margin 是表現屬性，前者屬於 HTML，後者屬於 CSS。(這就是結構於表現的相分離.)

良好結構的 HTML 頁面內幾乎沒有表現屬性的標籤。代碼非常乾淨簡潔。例如，原先的代碼<table width="80%" cellpadding="3" border="2" align="left">，現在可以只在 HTML 中寫<table>，所有控制表現的東西都寫到 CSS 中去，在結構化的 HTML 中，table 就是表格，而不是其他什麼(比如被用來佈局和定位)。

親自實踐一下結構化

上面說的只是最基本的結構，實際應用中，你可以根據需要來調整內容塊。常常會出現 DIV 嵌套的情況，你會看到

"container"層中又有其它層，結構類似這樣：

</div>

<ul>another list</ul>

</div>

嵌套的 div 元素允許你定義更多的 CSS 規則來控制表現，例如：你可以給#navcontainer 一個規則讓列表居右，再給

#globalnav 一個規則讓列表居左，而給#subnav 的 list 另一個完全不同的表現。用 CSS 替換傳統方法

下面的列表將幫助你用 CSS 替換傳統方法：

HTML 屬性以及相對應的 CSS 方法

HTML 屬性 CSS 方法說明

align="left"

align="right" float: left;

float: right; 使用 CSS 可以浮動任何元素:圖片、段落、div、標題、表格、列表等等當你使用 float 屬性，必須給這個浮動元素定義一個寬度。

marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; 使用 CSS, margin 可以設置在任何元

素上, 不僅僅是 body 元素.更重要的，你可以分別指定元素的 top, right, bottom 和 left 的 margin 值。

vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;

a:visited: #339; a:hover: #999; a:active: #00f;

在 HTML 中，鏈接的顏色作爲 body 的一個屬性值定義。整個頁面的鏈接風格都一樣。使用 CSS 的選擇器，頁面不同部分

的鏈接樣式可以不一樣。

bgcolor="#FFFFFF" background-color: #fff; 在 CSS 中，任何元素都可以定義背景顏色，不僅僅侷限於 body 和 table

元素。

bordercolor="#FFFFFF" border-color: #fff; 任何元素都可以設置邊框(boeder)，你可以分別定義 top, right, bottom

和 left border="3"

第 5 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

cellspacing="3" border-width: 3px; 用 CSS，你可以定義 table 的邊框爲統一樣式，也可以分別定義 top, right, bottom

and left 邊框的顏色、尺寸和樣式。

你可以使用 table, td or th 這些選擇器.

如果你需要設置無邊框效果，可以使用 CSS 定義： border-collapse: collapse;

<br clear="all"> clear: left; clear: right; clear: both;

許多 2 列或者 3 列布局都使用 float 屬性來定位。如果你在浮動層中定義了背景顏色或者背景圖片，你可以使用 clear

屬性. cellpadding="3" vspace="3"

hspace="3" padding: 3px; 用 CSS，任何元素都可以設定 padding 屬性，同樣，padding 可以分別設置 top, right, bottom

and left。padding 是透明的。 align="center" text-align: center; margin-right: auto; margin-left: auto;

Text-align 只適用於文本.

象 div，p 這樣的塊級怨毒可以通過 margin-right: auto; 和 margin-left: auto;來水平居中一些令人遺憾的技巧和工作環境

由於瀏覽器對 CSS 支持的不完善，我們有時候不得不採取一些技巧(hacks)或建立一種環境(Workarounds)來讓 CSS 實現傳統方法同樣的效果。例如塊級元素有時侯需要使用水平居中的技巧，盒模型 bug 的技巧等等。所有這些技巧都在 Molly Holzschlag 的文章《Integrated Web Design: Strategies for Long-Term CSS Hack Management》中有詳細說明。

另外一個關於 CSS 技巧的資源站點是 Big John 和 Holly Bergevin 的“Position is Everything”。

XHTML 下 css+div 布局總結

xml(extensible Markup Language)的出現，結構化文檔和數據有了一個通用的、科適應的格式，不僅僅應用在 web 上，也可以應用在任何地方。標準稱爲可能。

XHTML 是 The Extensible HyperText Markup Language 可擴展標識語言的縮寫。在 HTML4.0 的基礎上，用 XML 的規則對其進行擴展，得到了 XHTML。它實現 HTML 向 XML 的過渡。

CSS 是 Cascading Style Sheets 層疊樣式表的縮寫。純 CSS 佈局與結構式 XHTML 相結合能幫助設計師分離外觀與結構，使站點的訪問及維護更加容易。

1)爲頁面添加正確的 DOCTYPE

DOCTYPE 是 document type 的簡寫。主要用來說明你用的 XHTML 或者 HTML 是什麼版本。瀏覽器根據你 DOCTYPE 定義的

DTD(文檔類型定義)來解釋頁面代碼。

XHTML1.0 提供了三種 DOCTYPE 可選擇：

(1)過渡型（Transitional ）--使用非常普遍。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(2)嚴格型（Strict ）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd">

第 6 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

(3)框架型（Frameset ）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

2)設定一個名字空間（Namespace）

直接在 DOCTYPE 聲明後面添加如下代碼：

一個 namespace 是收集元素類型和屬性名字的一個詳細的 DTD，namespace 聲明允許你通過一個在線地址指向來識別你的

namespace。只要照樣輸入代碼就可以。

3)聲明你的編碼語言

爲了被瀏覽器正確解釋和通過標識校驗，所有的 XHTML 文檔都必須聲明它們所使用的編碼語言。代碼如下：

這裏聲明的編碼語言是簡體中文 GB2312，你如果需要製作繁體內容，可以定義爲 BIG5。

4)用小寫字母書寫所有的標籤

XML 對大小寫是敏感的，所以，XHTML 也是大小寫有區別的。所有的 XHTML 元素和屬性的名字都必須使用小寫。否則你的文檔將被 W3C 校驗認爲是無效的。例如下面的代碼是不正確的：

5)爲圖片添加 alt 屬性

爲所有圖片添加 alt 屬性。alt 屬性指定了當圖片不能顯示的時候就顯示供替換文本，這樣做對正常用戶可有可無，但對純文本瀏覽器和使用屏幕閱讀機的用戶來說是至關重要的。只有添加了 alt 屬性，代碼才會被 W3C 正確性校驗通過。注意的是我們要添加有意義的 alt 屬性，象下面這樣的寫法毫無意義：

正確的寫法：

6)給所有屬性值加引號

在 HTML 中，你可以不需要給屬性值加引號，但是在 XHTML 中，它們必須被加引號。還必須用空格分開屬性。例：<hr width="75%"size="7"/> 這也是不正確的

7)關閉所有的標籤

在 XHTML 中，每一個打開的標籤都必須關閉。空標籤也要關閉，在標籤尾部使用一個正斜槓 "/"來關閉它們自己。例如：

<br />

8)收藏夾小圖標

例如：首先製作一個 16x16 的 icon 圖標，命名爲 favicon.ico，放在根目錄下。然後將下面的代碼嵌入 head 區：

9)用 CSS 定義元素外觀

用 css 佈局的一個好處是可以批量對頁面進行修改，它能將文檔結構和表現層分離開來，減輕工作量和服務器的負荷，增加站點的擴展能力和應用。

css 是不區別空格和大小寫的，下面是一些基礎的歸納

(1)顏色值

第 7 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

顏色值可以用 RGB 值寫，例如：color : rgb(255,0,0)，也可以用十六進制寫，就象上面例子 color:#FF0000。如果十

六進制值是成對重複的可以簡寫，效果一樣。例如:#FF0000 可以寫成#F00。但如果不重複就不可以簡寫，例如#FC1A1B 必須寫滿六位。

(2)定義字體

web 標準推薦如下字體定義方法：

body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif; }

字體按照所列出的順序選用。如果用戶的計算機含有 Lucida Grande 字體，文檔將被指定爲 Lucida Grande。沒有的話，就被指定爲 Verdana 字體，如果也沒有 Verdana，就指定爲 Lucida 字體，依此類推，；

Lucida Grande 字體適合 Mac OS X；

Verdana 字體適合所有的 Windows 系統；

Lucida 適合 UNIX 用戶

"宋體"適合中文簡體用戶;

如果所列出的字體都不能用，則默認的 sans-serif 字體能保證調用;

(3)羣選擇器當幾個元素樣式屬性一樣時，可以共同調用一個聲明，元素之間用逗號分隔，：

p, td, li { font-size : 12px ; }

(4)派生選擇器可以使用派生選擇器給一個元素裏的子元素定義樣式，例如這樣：

li strong { font-style : italic; font-weight : normal；}

就是給 li 下面的子元素 strong 定義一個斜體不加粗的樣式。

(5)id 選擇器

用 CSS 佈局主要用層"div"來實現，而 div 的樣式通過"id 選擇器"來定義。例如我們首先定義一個層

然後在樣式表裏這樣定義：

#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

其中"menubar"是你自己定義的 id 名稱。注意在前面加"#"號。

id 選擇器也同樣支持派生，例如：

#menubar p { text-align : right; margin-top : 10px; }

這個方法主要用來定義層和那些比較複雜，有多個派生的元素。

(6)類別選擇器

在 CSS 裏用一個點開頭表示類別選擇器定義，例如：

.14px {color : #f60 ;font-size:14px ;}

在頁面中，用 class= "類別名"的方法調用：

<span class="14px">14px 大小的字體</span>

這個方法比較簡單靈活，可以隨時根據頁面需要新建和刪除。

(7)定義鏈接的樣式

CSS 中用四個僞類來定義鏈接的樣式，分別是：a:link、a:visited、a:hover 和 a : active，例如：

a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;} a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;} a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;} a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}

以上語句分別定義了 "鏈接、已訪問過的鏈接、鼠標停在上方時、點下鼠標時"的樣式。注意，必須按以上順序寫，否則

顯示可能和你預想的不一樣。記住它們的順序是“LVHA”。

第 8 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

(8)組合使用選擇器創造精緻的設計效果

用漂亮的圖案代替普通無序列表前沉悶的黑點。站點 http://marine.happycog.com/

先用 css 規則告訴類別屬性 inventory 的無序列表。

ul.inventory{

list-style:disc url(/images/common/lister2.gig) inside;}

它的調用標記:

<li><a href="/angelfish">Angelfish</a>(67 items)</li>

<li><a href="/angeld">Angels/Frogfish</a>(35 items)</li>

<li><a href="/anthias">Angelfish</a>(5526 items)</li>

<li><a href="/basslets">Angelfish</a>(15 items)</li>

<ul>

(9)縮寫是按照順時針的順序

margin:25px 0 25px 0;

(10)行高

line-height:150% 說明行距爲正常的 150%

10)結構化代碼 div(division)、id、class

用它們來書寫緊湊的 xhtml，更明智的使用 css.

(1)結構化 id 標籤，與 class 的有區別：

如果你的屬性頁面包含了一個 div，它的 id 爲"content",它就不可能有另外一個 div 或者其他元素擁有相同的名字。相反，

class 屬性可以在意個頁面中一次又一次地使用。

(2)id 的規則

一個 id 值必須用一個字母或者下劃線開頭，它不能用一個數字進行開頭，然後跟隨字母、數字和下劃線。空格和連字

符-都是不允許的。

11）製作好的網站可以到 w3c 進行標準校正 http:validator.w3.org http://jigsaw.w3.org/css-validator/

網頁設計 DIV+CSS——第 1 天:選擇什麼樣的 DOCTYPE

前言

大家好！這個系列文章是按阿捷自己製作這個站點的過程編寫的。之前阿捷也一直沒有製作過一個真正符合 web 標準的網站。現在邊參考國外資料邊製作，同時把過程中的心得和經驗記錄下來，希望對大家有點幫助。好了，讓我們開始吧

第一天

開始製作符合標準的站點，第一件事情就是聲明符合自己需要的 DOCTYPE。查看本站首頁原代碼，可以看到第一行就是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

打開一些符合標準的站點，例如著名 web 設計軟件開發商 Macromedia，設計大師 Zeldman 的個人網站，會發現同樣的代碼。而另一些符合標準的站點(例如 k10k.net)的代碼則如下：

第 9 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

那麼這些代碼有什麼含義？一定要放置嗎？

什麼是 DOCTYPE

上面這些代碼我們稱做 DOCTYPE 聲明。DOCTYPE 是 document type(文檔類型)的簡寫，用來說明你用的 XHTML 或者 HTML 是什麼版本。

其中的 DTD(例如上例中的 xhtml1-transitional.dtd)叫文檔類型定義，裏面包含了文檔的規則，瀏覽器就根據你定義的 DTD

來解釋你頁面的標識，並展現出來。

要建立符合標準的網頁，DOCTYPE 聲明是必不可少的關鍵組成部分；除非你的 XHTML 確定了一個正確的 DOCTYPE，否則你的標識和 CSS 都不會生效。

XHTML 1.0 提供了三種 DTD 聲明可供選擇：

· 過渡的(Transitional):要求非常寬鬆的 DTD，它允許你繼續使用 HTML4.01 的標識(但是要符合 xhtml 的寫法)。完整代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

· 嚴格的(Strict):要求嚴格的 DTD，你不能使用任何表現層的標識和屬性，例如<br>。完整代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

· 框架的(Frameset):專門針對框架頁面設計使用的 DTD，如果你的頁面中包含有框架，需要採用這種 DTD。完整代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

我們選擇什麼樣的 DOCTYPE

理想情況當然是嚴格的 DTD，但對於我們大多數剛接觸 web 標準的設計師來說，過渡的 DTD(XHTML 1.0 Transitional)是目前理想選擇(包括本站，使用的也是過渡型 DTD)。因爲這種 DTD 還允許我們使用表現層的標識、元素和屬性，也比較容易通過

W3C 的代碼校驗。

注：上面說的"表現層的標識、屬性"是指那些純粹用來控制表現的 tag，例如用於排版的表格、背景顏色標識等。在 XHTML 中標識是用來表示結構的，而不是用來實現表現形式，我們過渡的目的是最終實現數據和表現相分離。打個比方：人體模特換衣服。模特就好比數據，衣服則是表現形式，模特和衣服是分離的，這樣你就可以隨意換衣服。而原

來 HTML4 中，數據和表現是混雜在一起的，要一次性換個表現形式非常困難。呵呵，有點抽象了，這個概念需要我們在應用過程中逐步領會。

補充

DOCTYPE 聲明必須放在每一個 XHTML 文檔最頂部，在所有代碼和標識之上。

網頁設計 DIV+CSS——第 2 天:什麼是名字空間

DOCTYPE 聲明好以後，接下來的代碼是：

通常我們 HTML4.0 的代碼只是<html>，這裏的"xmlns"是什麼呢？

這個"xmlns"是 XHTML namespace 的縮寫，叫做"名字空間"聲明。名字空間是什麼作用呢？阿捷自己的理解是：

第 10 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

由於 xml 允許你自己定義自己的標識，你定義的標識和其他人定義的標識有可能相同，但表示不同的意義。當文件交換或者

共享的時候就容易產生錯誤。爲了避免這種錯誤發生，XML 採用名字空間聲明，允許你通過一個網址指向來識別你的標識。例如：

小王和小李都定義了一個 <book> 標識，如果小王的名字空間是 "http://www.xiaowang.com" ，小李的名字空間是

"http://www.xiaoli.com"，那麼當兩個文檔交換數據時，也不會混淆<book>標識，因爲它屬於不同的名字空間。更通俗的解釋是：名字空間就是給文檔做一個標記，告訴別人，這個文檔是屬於誰的。只不過這個"誰"用了一個網址來代替。 XHTML 是 HTML 向 XML 過渡的標識語言，它需要符合 XML 文檔規則，因此也需要定義名字空間。又因爲 XHTML1.0 不能自定義標識，所以它的名字空間都相同，就是"http://www.w3.org/1999/xhtml"。如果你還不太理解也不要緊，目前階段我們只要照抄代碼就可以了。

後面的 lang="gb2312",指定你的文檔用簡體中文。

網頁設計 DIV+CSS——第 3 天:定義語言編碼

第三步是定義你的語言編碼，類似這樣：

爲了被瀏覽器正確解釋和通過 W3C 代碼校驗，所有的 XHTML 文檔都必須聲明它們所使用的編碼語言，我們一般使用 gb2312(簡體中文)，製作多國語言頁面也有可能用 Unicode、ISO-8859-1 等，根據你的需要定義。通常這樣定義就可以了。但是要補充說明的是，XML 文檔並不是這樣定義語言編碼的，XML 的定義方式如下：

<?xml version="1.0" encoding="gb2312"?>

你在 Macromedia.com 的首頁代碼第一行就可以看見類似的語句，這也是 W3C 推薦使用的定義方法。那爲什麼我們不直接採用這種方法呢？原因是一些瀏覽器對標準的支持不完善，不能正確理解這樣的定義方法，比如 IE6/windows。所以在目前過渡方案下，我們依然推薦使用 meta 方式。當然，你可以兩種方法都寫。

看本站源代碼，你會發現語言編碼定義的地方還多一句：

網頁設計 DIV+CSS——第 4 天:調用樣式表

用 web 標準設計網站，過渡的方法主要是採用 XHTML+CSS，css 樣式表是必不可少的。這就要求所有網頁設計師必須熟練掌握 CSS，如果你以前不常用，那麼現在就開始學習吧。要製作符合 web 標準的網站，不懂 CSS 是設計不出漂亮的頁面的。事實上，所有表現的地方都需要用 CSS 來實現。我們以前都習慣用 table 來定位和佈局，現在要改用 DIV 來定位和佈局。這是思維方式的變化，一開始有些不習慣。呵呵，任何變革都會有阻力的，爲了享受標準帶來的"益處"，放棄一些老的傳統做法是值得的。

外部調用樣式表

在以前，我們通常採用 2 種方法使用樣式表：

· 頁面內嵌法：就是將樣式表直接寫在頁面代碼的 head 區。類似這樣：

· 外部調用法：將樣式表寫在一個獨立的.css 文件中，然後在頁面 head 區用類似以下代碼調用。

第 11 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

在符合 web 標準的設計中，我們使用外部調用法，好處不言而喻，你可以不修改頁面只修改.css 文件而改變頁面的樣式。如

果所有頁面都調用同一個樣式表文件，那麼改一個樣式表文件，可以改變所有文件的樣式。雙表法調用樣式表查看某些符合標準站點的原代碼，你可能看到，在調用樣式表的地方有如下 2 句：

爲什麼要寫兩次呢？

實際上一般情況下用外聯法調用(就是第一句)就足夠了。我這裏使用雙表調用只是一種示例。其中的"@import"命令用於輸入樣式表。而"@import"命令在 netscape 4.0 版本瀏覽器是無效的。也就是說，當你希望某些效果在 netscape 4.0 瀏覽器中隱藏，在 4.0 以上或其它瀏覽器中又顯示的時候，你可以採用"@import"命令方法調用樣式表。

網頁設計 DIV+CSS——第 5 天:head 區的其他設置

這些技巧主要講 meta 標籤設置的，其實與符合 web 標準關係不大，只要注意在最後加"/"關閉標籤就可以，但是既然是入門教程，就寫得詳細一點吧。

收藏夾小圖標

如果你將本站加入收藏夾，可以看到在收藏夾網址之前的 IE 圖標變成了本站特別的圖標。要實現這樣效果很簡單，首先製作一個 16x16 的 icon 圖標，命名爲 favicon.ico，放在根目錄下。然後將下面的代碼嵌入 head 區：

· 允許搜索機器人搜索站內所有鏈接。如果你想某些頁面不被搜索，推薦採用 robots.txt 方法

· 設置站點作者信息

· 設置站點版權信息

· 站點的簡要介紹(推薦)

· 站點的關鍵詞(推薦)

先介紹這麼多。補充說明，前面花了 5 節都是講 head 區的代碼，實際頁面內容還一字未提，呵呵，不要急，其實 head 區是

非常重要的，看一個頁面的 head 的代碼就可以知道設計師是否夠專業。

網頁設計 DIV+CSS——第 6 天:XHTML 代碼規範

在開始正式內容製作之前，我們必須先了解一下 web 標準有關代碼的規範。瞭解這些規範可以幫助你少走彎路,儘快通過代碼校驗。

第 12 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

1.所有的標記都必須要有一個相應的結束標記

以前在 HTML 中，你可以打開許多標籤，例如<p>和<li>而不一定寫對應的</p>和</li>來關閉它們。但在 XHTML 中這是不合法的。XHTML 要求有嚴謹的結構，所有標籤必須關閉。如果是單獨不成對的標籤，在標籤最後加一個"/"來關閉它。例如:

2.所有標籤的元素和屬性的名字都必須使用小寫

與 HTML 不一樣，XHTML 對大小寫是敏感的，<title>和<TITLE>是不同的標籤。XHTML 要求所有的標籤和屬性的名字都必須使用小寫。例如：<BODY>必須寫成<body> 。大小寫夾雜也是不被認可的，通常 dreamweaver 自動生成的屬性名字"onMouseOver" 也必須修改成"onmouseover"。

3.所有的 XML 標記都必須合理嵌套

同樣因爲 XHTML 要求有嚴謹的結構，因此所有的嵌套都必須按順序，以前我們這樣寫的代碼：

必須修改爲：

就是說，一層一層的嵌套必須是嚴格對稱。

4.所有的屬性必須用引號""括起來

在 HTML 中，你可以不需要給屬性值加引號，但是在 XHTML 中，它們必須被加引號。例如:

<height=80>

必須修改爲：

<height="80">

特殊情況，你需要在屬性值裏使用雙引號，你可以用"，單引號可以使用'，例如：

<alt="say'hello'">

5.把所有<和&特殊符號用編碼表示

· 任何小於號（<），不是標籤的一部分，都必須被編碼爲& l t ;

· 任何大於號（>），不是標籤的一部分，都必須被編碼爲& g t ;

· 任何與號（&），不是實體的一部分的，都必須被編碼爲& a m p;

注：以上字符之間無空格。

6.給所有屬性賦一個值

XHTML 規定所有屬性都必須有一個值，沒有值的就重複本身。例如：

必須修改爲：

7.不要在注釋內容中使“--”

“--”只能發生在 XHTML 註釋的開頭和結束，也就是說，在內容中它們不再有效。例如下面的代碼是無效的:

用等號或者空格替換內部的虛線。

以上這些規範有的看上去比較奇怪，但這一切都是爲了使我們的代碼有一個統一、唯一的標準，便於以後的數據再利用。

第 13 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

網頁設計 DIV+CSS——第 7 天:CSS 入門

在瞭解 XHTML 代碼規範後，我們就要進行 CSS 佈局。首先先介紹一些 CSS 的入門知識。如果你已經很熟悉了，可以跳過這一節，直接進入下一節。

CSS 是 Cascading Style Sheets(層疊樣式表)的縮寫。是一種對 web 文檔添加樣式的簡單機制，屬於表現層的佈局語言。

1.基本語法規範

分析一個典型 CSS 的語句：

p {COLOR:#FF0000;BACKGROUND:#FFFFFF}

· 其中"p"我們稱爲"選擇器"(selectors)，指明我們要給"p"定義樣式；

· 樣式聲明寫在一對大括號"{}"中；

· COLOR 和 BACKGROUND 稱爲"屬性"(property)，不同屬性之間用分號";"分隔；

· "#FF0000"和"#FFFFFF"是屬性的值(value)。

2.顏色值

顏色值可以用 RGB 值寫，例如：color : rgb(255,0,0)，也可以用十六進制寫，就象上面例子 color:#FF0000。如果十六進制值是成對重複的可以簡寫，效果一樣。例如:#FF0000 可以寫成#F00。但如果不重複就不可以簡寫，例如#FC1A1B 必須寫滿六位。

3.定義字體

web 標準推薦如下字體定義方法：

body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif; }

· 字體按照所列出的順序選用。如果用戶的計算機含有 Lucida Grande 字體，文檔將被指定爲 Lucida Grande。沒有的話，就被指定爲 Verdana 字體，如果也沒有 Verdana，就指定爲 Lucida 字體，依此類推，；

· Lucida Grande 字體適合 Mac OS X；

· Verdana 字體適合所有的 Windows 系統；

· Lucida 適合 UNIX 用戶

· "宋體"適合中文簡體用戶;

· 如果所列出的字體都不能用，則默認的 sans-serif 字體能保證調用;

4.羣選擇器

當幾個元素樣式屬性一樣時，可以共同調用一個聲明，元素之間用逗號分隔，： p, td, li { font-size : 12px ; }

5.派生選擇器可以使用派生選擇器給一個元素裏的子元素定義樣式，例如這樣： li strong { font-style : italic; font-weight : normal；} 就是給 li 下面的子元素 strong 定義一個斜體不加粗的樣式。

6.id 選擇器

用 CSS 佈局主要用層"div"來實現，而 div 的樣式通過"id 選擇器"來定義。例如我們首先定義一個層

然後在樣式表裏這樣定義：

#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

其中"menubar"是你自己定義的 id 名稱。注意在前面加"#"號。

第 14 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

id 選擇器也同樣支持派生，例如：

#menubar p { text-align : right; margin-top : 10px; }

這個方法主要用來定義層和那些比較複雜，有多個派生的元素。

6.類別選擇器

在 CSS 裏用一個點開頭表示類別選擇器定義，例如：

.14px {color : #f60 ;font-size:14px ;}

在頁面中，用 class="類別名"的方法調用：

<span class="14px">14px 大小的字體</span>

這個方法比較簡單靈活，可以隨時根據頁面需要新建和刪除。

7.定義鏈接的樣式

CSS 中用四個僞類來定義鏈接的樣式，分別是：a:link、a:visited、a:hover 和 a : active，例如：

以上語句分別定義了"鏈接、已訪問過的鏈接、鼠標停在上方時、點下鼠標時"的樣式。注意，必須按以上順序寫，否則顯示

可能和你預想的不一樣。記住它們的順序是“LVHA”。

呵呵，看了這麼多，有點頭暈吧，實際上 CSS 的語法規範還有很多，這裏列的只是一些常用的，畢竟我們是循序漸進，不可能一口吃成胖子:)

網頁設計 DIV+CSS——第 8 天:CSS 佈局入門

CSS 佈局與傳統表格(table)佈局最大的區別在於：原來的定位都是採用表格，通過表格的間距或者用無色透明的 GIF 圖片來控制文佈局版塊的間距；而現在則採用層(div)來定位，通過層的 margin,padding,border 等屬性來控制版塊的間距。

1.定義 DIV

分析一個典型的定義 div 例子：

#sample{ MARGIN: 10px 10px 10px 10px; PADDING:20px 10px 10px 20px;

BORDER-TOP: #CCC 2px solid;

BORDER-RIGHT: #CCC 2px solid; BORDER-BOTTOM: #CCC 2px solid; BORDER-LEFT: #CCC 2px solid;

BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom; COLOR: #666;

TEXT-ALIGN: center;

LINE-HEIGHT: 150%; WIDTH:60%; }

說明如下：

· 層的名稱爲 sample，在頁面中用就可以調用這個樣式。

· MARGIN 是指層的邊框以外留的空白，用於頁邊距或者與其它層製造一個間距。"10px 10px 10px 10px"分別代表"上右下左"(順時針方向)四個邊距，如果都一樣，可以縮寫成"MARGIN: 10px;"。如果邊距爲零，要寫成"MARGIN: 0px;"。

第 15 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

注意：當值是零時，除了 RGB 顏色值 0%必須跟百分號，其他情況後面可以不跟單位"px"。MARGIN 是透明元素，不能

定義顏色。

· PADDING 是指層的邊框到層的內容之間的空白。和 margin 一樣，分別指定上右下左邊框到內容的距離。如果都一樣，可以縮寫成"PADDING:0px"。單獨指定左邊可以寫成"PADDING-LEFT: 0px;"。PADDING 是透明元素，不能定義顏色。

· BORDER 是指層的邊框，"BORDER-RIGHT: #CCC 2px solid;"是定義層的右邊框顏色爲"#CCC"，寬度爲"2px"，樣式爲

"solid"直線。如果要虛線樣式可以用"dotted"。

· BACKGROUND 是定義層的背景。分 2 級定義，先定義圖片背景，採用"url(../images/bg_logo.gif)"來指定背景圖片路徑；其次定義背景色"#FEFEFE"。"no-repeat"指背景圖片不需要重複，如果需要橫向重複用"repeat-x",縱向重複用"repeat-y",重複鋪滿整個背景用"repeat"。後面的"right bottom;"是指背景圖片從右下角開始。如果沒有背景

圖片可以只定義背景色 BACKGROUND: #FEFEFE

· COLOR 用於定義字體顏色，上一節已經介紹過。

· TEXT-ALIGN 用來定義層中的內容排列方式，center 居中,left 居左,right 居右。

· LINE-HEIGHT 定義行高，150%是指高度爲標準高度的 150%，也可以寫作：LINE-HEIGHT:1.5 或者 LINE-HEIGHT:1.5em，都是一樣的意思。

· WIDTH 是定義層的寬度，可以採用固定值，例如 500px，也可以採用百分比，象這裏的"60%"。要注意的是:這個寬度僅僅指你內容的寬度，不包含 margin,border 和 padding。但在有些瀏覽器中不是這麼定義的，需要你多試試。

下面是這個層的實際表現: 這裏是演示內容，這裏是演示內容，這裏是演示內容，這裏是演示內容，這裏是演示內容，這裏是演示內容，這裏是演示內容，這裏是演示內容，

這裏是演示內容，這裏是演示內容，這裏是演示內容，這裏是演示內容，這裏是演示內容...

我們可以看到邊框是 2px 的灰色，背景圖片在右下沒有重複，內容距離上和左邊框 20px，內容居中，一切和預想的一樣。hoho，雖然不好看，但它是最基本的，掌握了它，你就已經學會一半的 CSS 佈局技術了。就是這樣，不算難吧！(另一半是什麼？另一半是層與層之間的定位。我會在後面逐步講解。)

2.CSS2 盒模型

自從 1996 年 CSS1 的推出，W3C 組織就建議把所有網頁上的對像都放在一個盒(box)中，設計師可以通過創建定義來控制這個盒的屬性，這些對像包括段落、列表、標題、圖片以及層

。盒模型主要定義四個區域：內容(content)、邊框距(padding)、邊界(border)和邊距(margin)。上面我們講的 sample 層就是一個典型的盒。對於初學者，經常會搞不清楚 margin，background-color，background-image，padding，content，border 之間的層次、關係和相互影響。這裏提供一張盒模型的 3D 示意圖，希望便於你的理解和記憶。

第 16 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

3.輔助圖片一律用背景處理

用 XHTML+CSS 佈局，有一個技術一開始讓你不習慣，應該說是一種思維方式與傳統表格佈局不一樣，那就是：所有輔助圖片都用背景來實現。類似這樣：

BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;

儘管可以用直接插在內容中，但這是不推薦的。這裏的"輔助圖片"是指那些不是作爲頁面要表達的內容的一部分，而僅僅用於修飾、間隔、提醒的圖片。例如：相冊中的圖片、圖片新聞中的圖片，上面的 3d 盒模型圖片都屬於內容的一部分，

它們可以用元素直接插在頁面裏，而其它的類似 logo，標題圖片，列表前綴圖片都必須採用背景方式或者其他 CSS 方式顯示。

這樣做的原因有 2 點：

· 將表現與結構徹底相分離(參考閱讀另一篇文章：《理解表現與結構相分離》)，用 CSS 控制所有的外觀表現，便於改版。

· 使頁面更具有易用性，更有親和力。例如：盲人使用屏幕閱讀機，用背景技術實現的圖片就不會被朗讀出來。

網頁設計 DIV+CSS——第 9 天:第一個 CSS 布局實例

接下來開始要真正設計佈局了。和傳統的方法一樣，你首先要在腦海裏有大致的輪廓構想，然後用 photoshop 把它畫出來。你可能看到有關 web 標準的站點大都很樸素，因爲 web 標準更關注結構和內容，實際上它與網頁的美觀沒有根本衝突，你想怎麼設計就怎麼設計，用傳統表格方法實現的佈局，用 DIV 也可以實現。技術有一個成熟的過程，把 DIV 看成和 TABLE 一樣的工具，如何運用就看你的想象力了。

第 17 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

注：在實際應用過程中，DIV 在有些地方的確不如表格方便，比如背景色的定義。但任何事情都有得有失，取捨在於你的價

值判斷。好，不羅嗦了，我們開始：

1.確定佈局

w3cn 的最初設計草圖如下：

局

樣

用表格的設計方法的話，一般都是上中下三行布。用 DIV 的話，我考慮使用三列來布局,成爲這。

2.定義 body 樣式先定義整個頁面的 body 的樣式,代碼如下： body { MARGIN: 0px;

PADDING: 0px;

BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat right bottom;

FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','宋體','新宋體',arial,verdana,sans-serif; COLOR: #666;

FONT-SIZE:12px;

LINE-HEIGHT:150%; }

以上代碼的作用在上一天的教程有詳細說明，大家應該一看就明白。定義了邊框邊距爲 0；背景顏色爲#FEFEFE，背景圖片爲

bg_logo.gif，圖片位於頁面右下角，不重複；定義了字體尺寸爲 12px；字體顏色爲#666;行高 150%。

3.定義主要的 div

初次使用 CSS 佈局，我決定採用固定寬度的三列布局(比自適應分辨率的設計簡單,hoho，別說我偷懶，先實現簡單的，增加點信心嘛！)。分別定義左中右的寬度爲 200:300:280，在 CSS 中如下定義:

/*定義頁面左列樣式*/

#left{ WIDTH:200px; MARGIN: 0px; PADDING: 0px;

BACKGROUND: #CDCDCD;

}

/*定義頁面中列樣式*/

#middle{ POSITION: absolute; LEFT:200px;

第 18 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

TOP:0px;

WIDTH:300px; MARGIN: 0px; PADDING: 0px;

BACKGROUND: #DADADA;

}

/*定義頁面右列樣式*/

#right{ POSITION: absolute; LEFT:500px;

TOP:0px; WIDTH:280px; MARGIN: 0px; PADDING: 0px;

BACKGROUND: #FFF; }

注意：定義中列和右列 div 我都採用了 POSITION: absolute;，然後分別定義了 LEFT:200px;TOP:0px;和 LEFT:500px;TOP:0px;

這是這個佈局的關鍵，我採用了層的絕對定位。定義中間列距離頁面左邊框 200px，距離頂部 0px；定義右列距離頁面左邊框

500px，距離頂部 0px；。這時候整個頁面的代碼是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>歡迎進入新《網頁設計師》:web 標準教程及推廣</title>

</head>

<body>

</body>

</html>

這時候頁面的效果僅僅可以看到三個並列的灰色矩形，和一個背景圖。但是我希望高度是滿屏的，怎麼辦呢？

第 19 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

4.100%自適應高度?

爲了保持三列有同樣的高度，我嘗試在#left、#middle 和#right 中設置"height:100%;"，但發現完全沒有預想的自適應高度效果。經過一番嘗試後，我只好給每個 div 一個絕對高度:"height:1000px;"，並且隨着內容的增加，需要不斷修正這個值。難道沒有辦法自適應高度了嗎？隨着阿捷自己學習的深入，發現一個變通的解決辦法，實際上根本不需要設置 100%，我們已經被 table 思維禁錮太深了，這個辦法在下一節的學習中詳細介紹。

網頁設計 DIV+CSS——第 10 天:自適應高度

如果我們想在 3 列布局的最後加一行頁腳，放版權之類的信息。就遇到必須對齊 3 列底部的問題。在 table 佈局中，我們用大表格嵌套小表格的方法，可以很方便對齊三列；而用 div 佈局，三列獨立分散，內容高低不同，就很難對齊。其實我們完全可以嵌套 div，把三列放進一個 DIV 中，就做到了底部對齊。下面是實現例子(白色背景框模擬一個頁面)：

Body

這裏是#header{ MARGIN: 0px; BORDER: 0px; BACKGROUND: #ccd2de; WIDTH: 580px; HEIGHT: 60px;}

這裏是#mainbox { MARGIN: 0px; WIDTH: 580px; BACKGROUND: #FFF; }包含了#menu,#sidebar 和#content

這裏是#menu{ FLOAT: right; MARGIN: 2px 0px 2px 0px; PADDING:0px 0px 0px 0px; WIDTH: 400px; BACKGROUND: #ccd2de; }

這裏是#sidebar{ FLOAT: left; MARGIN: 2px 2px 0px 0px; PADDING: 0px; BACKGROUND: #F2F3F7; WIDTH: 170px; }，背

景顏色用的是#main 的背景色

這裏是#content{ FLOAT: right; MARGIN: 1px 0px 2px 0px; PADDING:0px; WIDTH: 400px; BACKGROUND: #E0EFDE;}

這裏是主要內容，根據內容自動適應高度

這裏是#footer{ CLEAR: both; MARGIN: 0px 0px 0px 0px; PADDING: 5px 0px 5px 0px; BACKGROUND: #ccd2de; HEIGHT: 40px;

WIDTH: 580px; }。這個例子的頁面主要代碼如下：

</div>

具體樣式表都寫在相應版塊裏了。重點在於#mainbox 層嵌套了#menu,#sidebar 和#content 三個層。當#content 的內容增加，

#content 的高度就會增高，同時#mainbox 的高度也會撐開，#footer 層就自動下移。這樣就實現了高度的自適應。另外值得注意的是：#menu 和#content 都是浮動在頁面右面"FLOAT: right;",#sidebar 是浮動在#menu 層的左面"FLOAT: left;"，這是浮動法定位，還可以採用絕對定位來實現這樣的效果。

這個方法存在另一個問題，就是側列#sidebar 的背景無法百分之百。一般的解決辦法就是用 body 的背景色來填充滿。(不能使用#mainbox 的背景色，因爲在 Mozilla 等瀏覽器中#mainbox 的背景色失效。) 好了，主要的框架已經搭建完畢,剩下的工作只是往裏面添磚加瓦。如果你希望嘗試其他佈局，推薦看看以下文章:

· CSS 佈局 16 例

· onestab:三欄複合佈局演示

· onestab:自由伸展的三欄式版面

Tips:[onestab 的"P.I.E"專題] 還有更多精彩介紹，推薦去看看。

第 20 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

網頁設計 DIV+CSS——第 11 天:不用表格的菜單

佈局初步搭建起來，我開始填充裏面的內容。首先是定義 logo 圖片：樣式表：#logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}

頁面代碼：<div id="logo"><a title="網頁設計師" href="http://www.w3cn.org/" ><img height="80" alt="鏈接到 w3cn.org

首頁" src="images/logo_w3cn_200x80.gif" width="200" /></a></div>

以上代碼現在應該容易理解。先在 CSS 定義了一個 logo 的層，然後在頁面中調用它。需要說明的是，爲了使網頁有更好的易用性，web 標準要求大家給所有的、屬於正式內容的圖片，加一個 alt 屬性。這個 alt 屬性是用來說明圖片的作用(當圖片不能顯示的時候就顯示替換文字)，所以不要只寫成無意義的圖片名稱。

接下來是定義菜單。

1.不用表格的菜單(縱向)

我們先來看菜單的最終效果：

· 什麼是網站標準

· 使用標準的好處

· 怎樣過渡

· 相關教程

· 工具

· 資源及鏈接

通常方法我們至少嵌套 2 層表格來實現這樣的菜單，間隔線採用在 td 中設置背景色並插入 1px 高的透明 GIF 圖片實現；背景色的交替效果採用 td 的 onmouseover 事件實現。但查看本菜單的頁面代碼，你會看到只有如下幾句：

<ul>

<li><a title="網站標準" href="http://www.w3cn.org/webstandards.html">什麼是網站標準</a></li>

<li><a title="標準的好處" href="http://www.w3cn.org/benefits.html">使用標準的好處</a></li>

<li><a title="資源及鏈接" href="http://www.w3cn.org/resources.html">資源及鏈接</a></li>

</ul>

</div>

沒有用任何 table,而用的是無序列<li>，整個菜單的效果實現的祕密完全在於 id="menu"，我們再來看 CSS 中關於 menu 的定義：

(1)首先定義了 menu 層的主要樣式:

#menu {

MARGIN: 15px 20px 0px 15px; /*定義層的外邊框距離*/ PADDING:15px; /*定義層的內邊框爲 15px*/ BACKGROUND: #dfdfdf; /*定義背景顏色*/

COLOR: #666; /*定義字體顏色*/

BORDER:#fff 2px solid; /*定義邊框爲 2px 白色線條*/ WIDTH:160px; /*定義內容的寬度爲 160px*/

}

(2)其次定義無序列表的樣式：

#menu ul {

第 21 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

MARGIN: 0px;

PADDING: 0px;

BORDER: medium none; /*不顯示邊框*/ LINE-HEIGHT: normal;

LIST-STYLE-TYPE: none;

}

#menu li {BORDER-TOP: #FFF 1px solid; MARGIN: 0px;}

說明：這裏用的是 id 選擇器的派生方法定義(參考第 7 天：CSS 入門的介紹)了在 menu 層中的子元素<ul>和<li>的樣式。

LIST-STYLE-TYPE: none 一句表示不採用無序列表的默認樣式，即：不顯示小圓點（我們後面用自己的圖標來代替小圓點）。

BORDER-TOP: #FFF 1px solid;則定義了菜單之間的 1px 間隔線。

(3)定義 onmouseover 效果

#menu li a {

PADDING:5px 0px 5px 15px; DISPLAY: block;

FONT-WEIGHT: bold;

BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px; WIDTH: 100%;

COLOR: #444;

TEXT-DECORATION: none;

}

#menu li a:hover { BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px; COLOR: #fff; }

解釋如下：

· "display:block;"表示將標籤 a 當作塊級元素來顯示，使得鏈接變成一個按鈕；

· "BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;"這一句定義了替代 li 的小圓點的圖標。"transparent"指背景爲透明，"2px 8px"指定圖標的位置是距左邊 2px，距上邊 8px。這一句也可以拆分

寫成四句： "BACKGROUND-IMAGE: url(images/icon_dot_lmenu.gif); BACKGROUND-POSITION: 2px 8px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: transparent;"

· "#menu li a:hover"定義了當鼠標移動到鏈接上以後的顏色變化和小圖標變化。

ok，不用表格的菜單就這樣實現了。大家可以明顯感覺到，原來寫在 HTML 裏的表現樣式全部剝離放到 CSS 文件裏去了。頁面代碼節約了大半。通過 CSS 要修改菜單樣式就很簡單了。

2.不用表格的菜單(橫向)

上面是縱向的菜單,如果要顯示橫向菜單，用 li 也可以嗎？當然是可以的，下面給出代碼，效果就在本頁頂部:

頁面代碼

<ul>

<li id="four"><a title="標準的好處" href="http://www.w3cn.org/benefits.html">標準的好處</a></li>

第 22 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

<li id="eight"><a title="資源及鏈接" href="http://www.w3cn.org/resources.html">資源及鏈接</a></li>

</ul>

</div>

樣式表代碼

#submenu {

MARGIN: 0px 8px 0px 8px; PADDING: 4px 0px 0px 0px; BORDER: #fff 1px solid; BACKGROUND: #dfdfdf; COLOR: #666;

HEIGHT:25px; }

#submenu ul { CLEAR: left; MARGIN: 0px; PADDING:0px; BORDER: 0px;

LIST-STYLE-TYPE: none; TEXT-ALIGN: center; DISPLAY:inline;

}

#submenu li { FLOAT: left; DISPLAY: block; MARGIN: 0px; PADDING: 0px;

TEXT-ALIGN: center}

#submenu li a { DISPLAY: block;

PADDING:2px 3px 2px 3px;

BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px; FONT-WEIGHT: bold;

WIDTH: 100%;

COLOR: #444;

TEXT-DECORATION: none;

}

#submenu li a:hover {

BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px; COLOR: #fff; }

第 23 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

#submenu ul li#one A { WIDTH: 60px}

#submenu ul li#two A { WIDTH: 80px}

#submenu ul li#three A { WIDTH: 80px}

#submenu ul li#four A { WIDTH: 90px}

#submenu ul li#five A { WIDTH: 80px}

#submenu ul li#six A { WIDTH: 80px}

#submenu ul li#seven A { WIDTH: 60px}

#submenu ul li#eight A { WIDTH: 90px}

#submenu ul li#nine A { WIDTH: 80px}

以上代碼不逐一分析了。橫向菜單的關鍵在於：定義<li>樣式時的"FLOAT: left;"語句。另外注意 UL 定義中的 DISPLAY:inline; 一句表示將 li 強制作爲內聯對象呈遞，從對象中刪除行，通俗講就是 li 不換行。實現橫向排列。你也可以象例子中定義每個子菜單的寬度，控制菜單的間隔。好了，你也可以動手試試，用 li 實現各種各樣的菜單樣式。 Tips:如果你子菜單的寬度總和大於層的寬度，菜單會自動折行，利用這個原理可以實現單個無序列表的 2 列或者 3 列排版，這是原來 HTML 很難實現的。

感謝 zhuweiwei 指出橫向菜單的 bug，本文 7 月 6 日修正。

網頁設計 DIV+CSS——第 12 天:校驗及常見錯誤

辛苦了好多天，我們努力學習使用 XHTML+CSS 來重新設計我們的網站。那麼我們如何知道自己製作的頁面真的符合 web 標準？

W3C 和一些志願者網站提供了在線校驗程序，來幫助我們檢查頁面是否符合標準，並提供了修正錯誤的幫助信息。這些校驗非常有用，是我調試頁面第一步要做的事情。

1.XHTML 校驗

· 校驗網址：http://validator.w3.org/

· 校驗方式:網址校驗、文件上傳校驗

校驗成功，會顯示"This Page Is Valid XHTML 1.0 Transitional!",如圖：

校驗失敗，會顯示更多校驗選項和錯誤信息，如圖：

一般選擇"Show Source"和"Verbose Output"可以幫助你找到錯誤代碼所在行和錯誤原因。

第 24 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

XHTML 校驗常見錯誤原因對照表

· No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定義 DOCTYPE。

· No Character Encoding Found! Falling back to UTF-8.--未定義語言編碼。

· end tag for "img" omitted, but OMITTAG NO was specified--圖片標籤沒有加"/"關閉。

· an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--

屬性值必須加引號。

· element "DIV" undefined---DIV 標籤不能用大寫，要改成小寫 div。

· required attribute "alt" not specified---圖片需要加 alt 屬性。

· required attribute "type" not specified---JS 或者 CSS 調用的標籤漏了 type 屬性。其中最最常見的錯誤就是標籤的大小寫問題了。通常這些錯誤都是關聯的，比如忘記了一個</li>其他<li>標籤都會報錯，所以不要看到一堆的錯誤害怕，通常解決了一個錯誤，其他的錯誤也都沒有了。如果你的頁面通過 XHTML1.0 校驗，可以在頁面

上放置這麼一個圖標：代碼如下：

<p> <a href="http://validator.w3.org/check/referer"><img src="http://www.w3.org/Icons/valid-xhtml10"

alt="Valid XHTML 1.0!" height="31" width="88" /></a> </p>

2.CSS2 校驗

· 校驗網址：http://jigsaw.w3.org/css-validator/

· 校驗方式:網址校驗、文件上傳校驗、直接貼入代碼校驗校驗成功，會顯示"恭喜恭喜，此文檔已經通過樣式表校驗! ",hoho,校驗信息支持中文噢。如圖：

校驗失敗，會顯示兩類錯誤：錯誤和警告。錯誤表示一定要修正，否則無法通過校驗；警告表示有代碼不被 W3C 推薦,建議修改。

CSS2 校驗常見錯誤原因對照表

· (錯誤)無效數字 : color909090 不是一個 color 值 : 909090 ---十六進制顏色值必須加"#"號，即#909090

· (錯誤)無效數字 : margin-topUnknown dimension : 6pixels ---pixels 不是一個單位值，正確寫法 6px

· (錯誤)屬性 scrollbar-face-color 不存在 : #eeeeee --- 定義滾動條顏色是非標準的屬性

· (錯誤)值 cursorhand 不存在 : hand 是非標準屬性值，修改爲 cursor:pointer

· (警告)Line : 0 font-family: 建議你指定一個種類族科作爲最後的選擇 --W3C 建議字體定義的時候，最後以一個類別的字體結束，例如"sans-serif"，以保證在不同操作系統下，網頁字體都能被顯示。

· (警告)Line : 0 can't find the warning message for otherprofile --表示在代碼中有非標準屬性或值，校驗程序無法判斷和提供相應的警告信息。

同樣，通過檢驗後，可以放置一個 CSS 校驗通過圖標，代碼如下：

<p> <a href="http://jigsaw.w3.org/css-validator/"> <img style="border:0;width:88px;height:31px"

src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /> </a> </p>

CSS 的十八般技巧

最近,經常有朋友問我一些工作中遇到的 CSS 問題。他們總是不能很好的控制 CSS，影響 CSS 的效率發揮。我來分析總結一下錯誤所在，幫助大家更加容易使用 CSS。

第 25 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

本文總結了我開始使用 CSS 佈局方法以來所有的技巧和兼容方案，我願意把這些與你分享，我會重點解釋一些新手容易犯的

錯誤(包括我自己也犯過的)，如果你已經是 CSS 高手，這些經驗技巧可能已經都知道，如果你有更多的，希望可以幫我補充。

一.使用 css 縮寫

使用縮寫可以幫助減少你 CSS 文件的大小，更加容易閱讀。css 縮寫的主要規則請參看《常用 css 縮寫語法總結》，這裏就不展開描述。

二.明確定義單位，除非值爲 0

忘記定義尺寸的單位是 CSS 新手普遍的錯誤。在 HTML 中你可以只寫 width="100"，但是在 CSS 中，你必須給一個準確的單位，比如：width:100px width:100em。只有兩個例外情況可以不定義單位：行高和 0 值。除此以外，其他值都必須緊跟單位，注意，不要在數值和單位之間加空格。

三.區分大小寫

當在 XHTML 中使用 CSS，CSS 裏定義的元素名稱是區分大小寫的。爲了避免這種錯誤，我建議所有的定義名稱都採用小寫。 class 和 id 的值在 HTML 和 XHTML 中也是區分大小寫的，如果你一定要大小寫混合寫，請仔細確認你在 CSS 的定義和 XHTML 裏的標籤是一致的。

四.取消 class 和 id 前的元素限定

當你寫給一個元素定義 class 或者 id，你可以省略前面的元素限定，因爲 ID 在一個頁面裏是唯一的，而 clas s 可以在頁面中多次使用。你限定某個元素毫無意義。例如：

div#content { /* declarations */ }

fieldset.details { /* declarations */ }

可以寫成

#content { /* declarations */ }

.details { /* declarations */ }

這樣可以節省一些字節。

五.默認值

通常 padding 的默認值爲 0，background-color 的默認值是 transparent。但是在不同的瀏覽器默認值可能不同。如果怕有衝突，可以在樣式表一開始就先定義所有元素的 margin 和 padding 值都爲 0，象這樣：

* { margin:0; padding:0;

}

六.不需要重複定義可繼承的值

CSS 中，子元素自動繼承父元素的屬性值，象顏色、字體等，已經在父元素中定義過的，在子元素中可以直接繼承，不需要重複定義。但是要注意，瀏覽器可能用一些默認值覆蓋你的定義。

七.最近優先原則如果對同一個元素的定義有多種，以最接近(最小一級)的定義爲最優先，例如有這麼一段代碼 Update: Lorem ipsum dolor set

在 CSS 文件中，你已經定義了元素 p，又定義了一個 class"update"

p {

第 26 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

margin:1em 0;

font-size:1em;

color:#333;

}

.update {

font-weight:bold;

color:#600;

}

這兩個定義中，class="update"將被使用，因爲 class 比 p 更近。你可以查閱 W3C 的《 Calculating a selector’s specificity》瞭解更多。

八.多重 class 定義

一個標籤可以同時定義多個 class。例如：我們先定義兩個樣式，第一個樣式背景爲#666；第二個樣式有 10 px 的邊框。

.one{width:200px;background:#666;}

.two{border:10px solid #F00;}

在頁面代碼中，我們可以這樣調用

這樣最終的顯示效果是這個 div 既有#666 的背景，也有 10px 的邊框。是的，這樣做是可以的，你可以嘗試一下。

九.使用子選擇器(descendant selectors)

CSS 初學者不知道使用子選擇器是影響他們效率的原因之一。子選擇器可以幫助你節約大量的 class 定義。我們來看下面這段代碼：

<ul>

</ul>

</div>

這段代碼的 CSS 定義是：

div#subnav ul { /* Some styling */ }

div#subnav ul li.subnavitem { /* Some styling */ }

div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }

div#subnav ul li.subnavitemselected { /* Some styling */ }

div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

你可以用下面的方法替代上面的代碼

</ul>

樣式定義是：

#subnav { /* Some styling */ }

#subnav li { /* Some styling */ }

第 27 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

#subnav a { /* Some styling */ }

#subnav .sel { /* Some styling */ }

#subnav .sel a { /* Some styling */ }

用子選擇器可以使你的代碼和 CSS 更加簡潔、更加容易閱讀。十.不需要給背景圖片路徑加引號爲了節省字節，我建議不要給背景圖片路徑加引號，因爲引號不是必須的。例如： background:url("images/***.gif") #333;

可以寫爲

background:url(images/***.gif) #333;

如果你加了引號，反而會引起一些瀏覽器的錯誤。

十一.組選擇器(Group selectors)

當一些元素類型、class 或者 id 都有共同的一些屬性，你就可以使用組選擇器來避免多次的重複定義。這可以節省不少字節。例如：定義所有標題的字體、顏色和 margin，你可以這樣寫：

h1,h2,h3,h4,h5,h6 {

font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;

color:#333;

margin:1em 0;

}

如果在使用時，有個別元素需要定義獨立樣式，你可以再加上新的定義，可以覆蓋老的定義，例如：

h1 { font-size:2em; }

h2 { font-size:1.6em; }

十二.用正確的順序指定鏈接的樣式

當你用 CSS 來定義鏈接的多個狀態樣式時，要注意它們書寫的順序，正確的順序是：:link :visited :hover :active。抽取第一個字母是"LVHA"，你可以記憶成"LoVe HAte"(喜歡討厭)。爲什麼這麼定義，可以參考 Eric Meyer 的《Link Specificity》。如果你的用戶需要用鍵盤來控制，需要知道當前鏈接的焦點，你還可以定義:focus 屬性。:focus 屬性的效果也取決與你書寫的位置，如果你希望聚焦元素顯示:hover 效果，你就把:focus 寫在:hover 前面；如果你希望聚焦效果替代:hover 效果，你就把:focus 放在:hover 後面。

十三.清除浮動

一個非常常見的 CSS 問題，定位使用浮動的時候，下面的層被浮動的層所覆蓋，或者層裏嵌套的子層超出了外層的範圍。通常的解決辦法是在浮動層後面添加一個額外元素，例如一個 div 或者一個 br，並且定義它的樣式爲 clear: both。這個辦法有一點牽強，幸運的是還有一個好辦法可以解決，參看這篇文章《How To Clear Floats Without Structural Markup》(注：本站將盡快翻譯此文)。

上面 2 種方法可以很好解決浮動超出的問題，但是如果當你真的需要對層或者層裏的對象進行 clear 的時候怎麼辦？一種簡單的方法就是用 overflow 屬性，這個方法最初的發表在《Simple Clearing of Floats》，又在《Clearance》和《Super simple clearing floats》中被廣泛討論。

上面那一種 clear 方法更適合你，要看具體的情況，這裏不再展開論述。另外關於 float 的應用，一些優秀的文章已經說得很清楚，推薦你閱讀：《Floatutorial》、《Containing Floats》和《Float Layouts》

第 28 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

十四.橫向居中(centering)

這是一個簡單的技巧，但是值得再說一遍，因爲我看見太多的新手問題都是問這個：CSS 如何橫向居中？你需要定義元素的寬，並且定義橫向的 margin，如果你的佈局包含在一個層(容器)中，就象這樣：

你可以這樣定義使它橫向居中：

#wrap {

width:760px; /* 修改爲你的層的寬度 */

margin:0 auto;

}

但是 IE5/Win 不能正確顯示這個定義，我們採用一個非常有用的技巧來解決：用 text-align 屬性。就象這樣：

body {

text-align:center;

}

#wrap {

width:760px; /* 修改爲你的層的寬度 */

margin:0 auto;

text-align:left;

}

第一個 body 的 text-align:center; 規則定義 IE5/Win 中 body 的所有元素居中(其他瀏覽器只是將文字居中) ，第二個

text-align:left;是將#warp 中的文字居左。

十五.導入(Import)和隱藏 CSS

因爲老版本瀏覽器不支持 CSS，一個通常的做法是使用@import 技巧來把 CSS 隱藏起來。例如：

@import url("main.css");

然而，這個方法對 IE4 不起作用，這讓我很是頭疼了一陣子。後來我用這樣的寫法：

@import "main.css";

這樣就可以在 IE4 中也隱藏 CSS 了，呵呵，還節省了 5 個字節呢。想了解@import 語法的詳細說明，可以看這裏《centricle’s

css filter chart》

十六.針對 IE 的優化

有些時候，你需要對 IE 瀏覽器的 bug 定義一些特別的規則，這裏有太多的 CSS 技巧(hacks)，我只使用其中的兩種方法，不管微軟在即將發佈的 IE7 beta 版裏是否更好的支持 CSS，這兩種方法都是最安全的。

· 1.註釋的方法

o (a)在 IE 中隱藏一個 CSS 定義，你可以使用子選擇器(child selector):

html>body p {

/* 定義內容 */

}

o (b)下面這個寫法只有 IE 瀏覽器可以理解(對其他瀏覽器都隱藏)

* html p {

/* declarations */

}

o (c)還有些時候，你希望 IE/Win 有效而 IE/Mac 隱藏，你可以使用"反斜線"技巧：

/* \*/

* html p {

第 29 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

declarations

}

/* */

· 2.條件注釋(conditional comments)的方法

另外一種方法，我認爲比 CSS Hacks 更加經得起考驗就是採用微軟的私有屬性條件注釋(conditional comments)。用這個方法你可以給 IE 單獨定義一些樣式，而不影響主樣式表的定義。就象這樣：

<!--[if IE]>

<![endif]-->

十七.調試技巧：層有多大？

當調試 CSS 發生錯誤，你就要象排版工人，逐行分析 CSS 代碼。我通常在出問題的層上定義一個背景顏色，這樣就能很明顯看到層佔據多大空間。有些人建議用 border，一般情況也是可以的，但問題是，有時候 border 會增加元素的尺寸，border-top

和 boeder-bottom 會破壞縱向 margin 的值，所以使用 background 更加安全些。

另外一個經常出問題的屬性是 outline。outline 看起來象 boeder，但不會影響元素的尺寸或者位置。只有少數瀏覽器支持

outline 屬性，我所知道的只有 Safari、OmniWeb、和 Opera。

十八.CSS 代碼書寫樣式

在寫 CSS 代碼的時候，對於縮進、斷行、空格，每個人有每個人的書寫習慣。在經過不斷實踐後，我決定採用下面這樣的書寫樣式：

selector1, selector2 { property:value;

}

當使用聯合定義時，我通常將每個選擇器單獨寫一行，這樣方便在 CSS 文件中找到它們。在最後一個選擇器和大括號{之間加一個空格，每個定義也單獨寫一行，分號直接在屬性值後，不要加空格。我習慣在每個屬性值後面都加分號，雖然規則上允許最後一個屬性值後面可以不寫分號，但是如果你要加新樣式時容易忘記補上分號而產生錯誤，所以還是都加比較好。

最後，關閉的大括號}單獨寫一行。

WEB 打印實例教程

做 Web 開發的人員一定都會面臨一個共同的難題，那就是打印。的確，相對於 Windows 桌面應用程序來講，Web 應用程序的打印有種種限制，技術人員在項目開發過程中經常會遇到用戶這樣或那樣的需求. 做過桌面應用開發的人都會非常熟悉水晶報表、Active Report 之類的報表控件，它們不僅有簡單靈活的設計界面，更具有非常強大的報表功能，能滿足各種報表的打印需求。而 Web 應用則因爲其特殊的呈現方式，只能尋求其他的解決方案。現在我們來分析一下目前已經成形的 Web 打印方案：

現有的 Web 打印控制技術分成幾種方案：一．自定義控件完成打印

利用 IE 自帶的 WebBrowser 控件實現打印

利用第三方控件實現打印

1、自定義控件方式

自定義控件方式就是利用 VB 或 VC 等工具生成 COM 組件，用定義好的打印格式來分析打印源文件從而實現打印。只有將生成的組件下載並註冊到客戶機上，才能實現在客戶端的

第 30 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

打印。

難點主要是定義打印格式、如何來分析打印源文件。現有的比較好的方法是利用 XML 技術來全面的解決問題，利用 XML 可以非常容易地定義打印目標的文本、表格等內容的格式。

但對程序員的開發要求高，難度比較大。

2、利用 WebBrowser 實現 Web 打印

WebBrowser 是 IE 內置的瀏覽器控件，無需用戶下載。本文檔所討論的是有關 IE6.0 版本的 WebBrowser 控件技術內容。與其相關的技術要求有：打印文檔的生成、頁面設置、打印操作的實現等幾個環節。

（一）、打印文檔的生成

1、客戶端腳本方式

客戶端腳本分爲 VBScript、JavaScript、JScript 幾種腳本語言。在 IE 下開發應用使用的語法爲 JScript 的語法，由於它和 JavaScript 幾乎沒有什麼區別，所以也可以稱其爲 JavaScript（下面簡寫爲 JS）。一般情況下，主要使用 JS 來實

現 DOM 文檔的分析，DOM 爲微軟提出的一種 Web 文檔模型，主要用來實現 Web 腳本編程。

利用 JS 可以分析源頁面的內容，將欲打印的頁面元素提取出來，實現打印。通過分析源文檔的內容，可以生成打印目標文檔。

優點：客戶端獨立完成打印目標文檔的生成，減輕服務器負荷；缺點：源文檔的分析操作複雜，並且源文檔中的打印內容要有約定；

2、服務器端程序方式服務器端程序方式，主要是利用後臺代碼從數據庫中讀取打印源，生成打印目標文檔。當的頁面生成時，還應適當考慮

使用 CSS 來實現強制分頁控制。

優點：可以生成內容非常的豐富的打印目標文檔，目標文檔的內容的可控性強。由於打印內容是從數據庫中獲取的，所以生成操作相對簡單；

缺點：服務器端負載比較大；

（二）、頁面設置頁面設置主要是指設置打印文檔的頁邊距、頁眉、頁腳、紙張等內容。頁面設置將直接影響到打印文檔版面的生成效果，

所以它和打印文檔的生成有着密切的關係。比如：表格的行數、大小、位置、字體的大小等。

現有的技術是利用 IE6.0 內置的打印模板方式來控制頁面設置，其可以對打印目標文檔產生非常大的影響。打印模板可以控制頁邊距、頁眉、頁腳、奇偶頁等內容，並可以將用戶的設置取得，還可以將設置發送到服務器端。

打印模板技術可以自定預覽窗口和打印格式，最大限度地影響目標文檔和打印效果。

（三）、打印操作的實現

此功能的實現主要是利用 WebBrowser 控件的函數接口來實現打印、打印預覽（默認的）、頁面設置（默認的）。

CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'>

//打印

WebBrowser1.ExecWB(6,1);

//打印設置

WebBrowser1.ExecWB(8,1);

//打印預覽

WebBrowser1.ExecWB(7,1);

3、一個實例項目採用的打印方案服務器端程序方式、打印預覽接口調用，下面爲例，主要參考項目中的： pageErrorPrint.aspx.vb 文件

主調用頁

第 31 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

function PrintPage(iPageIndex,strQuery)

{

var strURL;

strURL = "PageErrorPrint.aspx?PageIndex=" + iPageIndex + "&QueryString=" +

strQuery;

winPrint=window.open(strURL,"","left=2000,top=2000,fullscreen=3");

}

打印頁 HTML 源中的預覽控制

document.write("<object ID='WebBrowser' WIDTH=0 HEIGHT=0

CLASSID='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></object>"); WebBrowser.ExecWB(7,1);

window.opener=null;

window.close();

</SCRIPT>

程序頭

'首先聲明表格容器

Protected WithEvents phContainer As System.Web.UI.WebControls.PlaceHolder

'每個表格中的記錄數量

Private Const ItemPerTable As Integer = 20

關鍵的實現部分

'創建一個符合打印要求的表格

tabPagePrint = NewPrintTable()

'將表頭添加到此表格中

Call AddTableTitle(tabPagePrint)

'初始化記錄器

i = 0

iItemIndex = iStartPoint

For Each clsItem In clsAllData.ErrorCollection

If i > 0 And i Mod ItemPerTable = 0 Then

'添加表格控件到頁面中

phContainer.Controls.Add(tabPagePrint)

'在頁面中添加一個換行符

Call AddPageBreak()

'創建新一輪的表格

tabPagePrint = NewPrintTable() Call AddTableTitle(tabPagePrint) End If

'將記錄添加到表格中

Call AddItemToTable(iItemIndex, tabPagePrint, clsItem)

iItemIndex = iItemIndex + 1

i = i + 1

'添加表格控件到頁面中

第 32 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

phContainer.Controls.Add(tabPagePrint)

支持函數

'功能:添加頁的換行符

Private Sub AddPageBreak()

Dim ltBreak As LiteralControl

ltBreak = New LiteralControl("<p style='page-break-before:always'>")

phContainer.Controls.Add(ltBreak) End Sub

二、利用 IE 自身打印

這種方式比較簡單，也常用的打印方式，只需要將報表頁面設計好，用戶通過 IE 菜單中的打印功能完成打印。優點是簡單，容易實現，缺點是不靈活，不能控制分頁，不能控制好頁眉和頁腳。

三、將報表導出成 Word,Excel 或 PDF 形式打印

這種方式需要將頁面導出成 Office 文檔或 pdf,最低的要求是客戶端已經安裝用以打開 Word、Excel 或 Pdf 文檔的軟件。這種方式可以通過水晶報表組件或其他一些第三方控件非常容易地實現。導出成 Pdf 形式後打印質量和效果都很好，導出成

Word 或 Excel 後用戶可以自定義打印的內容和格式。總之，現有的打印方案各有所長，在開發過程中應根據用戶的需求作選擇，利用 IE 打印簡單，容易實現，在用戶需求簡

單或打印內容較少的情況下采用此方案比較適宜。利用自定義控件打印可以實現完全自定義，但需要較高的技術要求和開發週期。利用導出的方式則可以滿足用戶需要一點自定義或打印內容有多頁的需求。

-------------------------------------------------------------

1、控制"縱打"、橫打”和“頁面的邊距。

（1）<script defer>

function SetPrintSettings() {

// -- advanced features

factory.printing.SetMarginMeasure(2) // measure margins in inches factory.SetPageRange(false, 1, 3) // need pages from 1 to 3 factory.printing.printer = "HP DeskJet 870C" factory.printing.copies = 2

factory.printing.collate = true

factory.printing.paperSize = "A4"

factory.printing.paperSource = "Manual feed"

// -- basic features factory.printing.header = "This is MeadCo"

factory.printing.footer = "Advanced Printing by ScriptX" factory.printing.portrait = false factory.printing.leftMargin = 1.0 factory.printing.topMargin = 1.0 factory.printing.rightMargin = 1.0 factory.printing.bottomMargin = 1.0

}

</script>

（2）

function printsetup(){

// 打印頁面設置

第 33 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

wb.execwb(8,1);

}

function printpreview(){

// 打印頁面預覽

wb.execwb(7,1);

}

function printit()

{

if (confirm('確定打印嗎？')) {

wb.execwb(6,6)

}

</script>

</head>

<body>

<OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"

height=0 id=wb name=wb width=0></OBJECT>

<input type=button name=button_print value="打印"

οnclick="javascript:printit()">

<input type=button name=button_setup value="打印頁面設置"

οnclick="javascript:printsetup();">

<input type=button name=button_show value="打印預覽"

οnclick="javascript:printpreview();">

<input type=button name=button_fh value="關閉"

οnclick="javascript:window.close();">

------------------------------------------------ 關於這個組件還有其他的用法，列舉如下： WebBrowser.ExecWB(1,1) 打開

Web.ExecWB(2,1) 關閉現在所有的 IE 窗口，並打開一個新窗口

Web.ExecWB(4,1) 保存網頁 Web.ExecWB(6,1) 打印 Web.ExecWB(7,1) 打印預覽 Web.ExecWB(8,1) 打印頁面設置 Web.ExecWB(10,1) 查看頁面屬性

Web.ExecWB(15,1) 好像是撤銷，有待確認

Web.ExecWB(17,1) 全選 Web.ExecWB(22,1) 刷新 Web.ExecWB(45,1) 關閉窗體無提示

2、分頁打印

<HTML>

<HEAD>

第 34 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

<STYLE>

P {page-break-after: always}

</STYLE>

</HEAD>

<BODY>

<%while not rs.eof%>

<%rs.movenext%>

<%wend%>

</BODY>

</HTML>

3、ASP 頁面打印時如何去掉頁面底部的路徑和頂端的頁碼編號

（1）ie 的文件-〉頁面設置-〉講裏面的頁眉和頁腳裏面的東西都去掉，打印就不出來了。

（2）<HTML>

<HEAD>

<TITLE> New Document </TITLE>

dim hkey_root,hkey_path,hkey_key hkey_root="HKEY_CURRENT_USER" hkey_path="\Software\Microsoft\Internet Explorer\PageSetup"

'//設置網頁打印的頁眉頁腳爲空

function pagesetup_null()

on error resume next

Set RegWsh = CreateObject("WScript.Shell")

hkey_key="\header"

RegWsh.RegWrite hkey_root+hkey_path+hkey_key,""

hkey_key="\footer"

RegWsh.RegWrite hkey_root+hkey_path+hkey_key,""

end function

'//設置網頁打印的頁眉頁腳爲默認值

function pagesetup_default()

on error resume next

Set RegWsh = CreateObject("WScript.Shell")

hkey_key="\header"

RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"&w&b 頁碼，&p/&P"

hkey_key="\footer"

RegWsh.RegWrite hkey_root+hkey_path+hkey_key,"&u&b&d"

end function

</script>

</HEAD>

<BODY>

<br/>

第 35 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

<br/>

<input type="button" value=" 清空頁碼 " οnclick=pagesetup_null()> <input type="button" value=" 恢復頁嗎 "

οnclick=pagesetup_default()><br/>

</p>

</BODY>

</HTML>

4、浮動幀打印

function button1_onclick() {

var odoc=window.iframe1.document; var r=odoc.body.createTextRange(); var stxt=r.htmlText;

alert(stxt)

var pwin=window.open("","print"); pwin.document.write(stxt); pwin.print();

}

</SCRIPT>

4、用 FileSystem 組件實現 WEB 應用中的本地特定打印

function print_onclick //打印函數

dim label

label=document.printinfo.label.value //獲得 HTML 頁面的數據

set objfs=CreateObject("Scripting.FileSystemObject") //創建 FileSystem 組件對象的實例 set objprinter=objfs.CreateTextFile ("LPT1:",true) //建立與打印機的連接 objprinter.Writeline("__________________________________") //輸出打印的內容

objprinter.Writeline("| |")

objprinter.close //斷開與打印機的連接

set objprinter=nothing

set objfs=nothing // 關閉 FileSystem 組件對象

end function

</script>

服務器端腳本：

<%„„„

set conn=server.CreateObject ("adodb.connection")

conn.Open "DSN=name;UID=XXXX;PWD=XXXX;"

set rs=server.CreateObject("adodb.recordset")

第 36 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

rs.Open(“select „„”),conn,1,1

„„„.%> //與數據庫進行交互

HTML 頁面編碼：

<HTML>

„„„

<INPUT type="button" value="打印>>" id=print name=print > //調用打印函數

<INPUT type=hidden id=text1 name=label value=<%=„„„%>> //保存服務器端傳來的數據

„„„

</HTML>

Div+CSS 布局入門教程在網頁制作中，有許多的術語，例如：CSS、HTML、DHTML、XHTML 等等。在下面的文章中我們

將會用到一些有關於 HTML 的基本知識，而在你學習這篇入門教程之前，請確定你已經具有了一定的

HTML 基礎。下面我們就開始一步一步使用 DIV+CSS 進行網頁布局設計吧。

所有的設計第一步就是構思，構思好了，一般來說還需要用PhotoShop 或 FireWorks(以下簡稱 PS 或 FW)

等圖片處理軟件將需要制作的界面布局簡單的構畫出來，以下是我構思好的界面布局圖。

第 37 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

下面，我們需要根據構思圖來規劃一下頁面的布局，仔細分析一下該圖，我們不難發現，圖片大致分

爲以下幾個部分：

1、頂部部分，其中又包括了 LOGO、MENU 和一幅 Banner 圖片；

2、內容部分又可分爲側邊欄、主體內容；

3、底部，包括一些版權信息。有了以上的分析，我們就可以很容易的布局了，我們設計層如下圖:

根據上圖，我再畫了一個實際的頁面布局圖，說明一下層的嵌套關系，這樣理解起來就會更簡單了。

第 38 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

DIV 結構如下：

│body {} /*這是一個 HTML 元素，具體我就不說明瞭*/

└#Container {} /*頁面層容器*/

├#Header {} /*頁面頭部*/

├#PageBody {} /*頁面主體*/

│ ├#Sidebar {} /*側邊欄*/

│ └#MainBody {} /*主體內容*/

└#Footer {} /*頁面底部*/

至此，頁面布局與規劃已經完成，接下來我們要做的就是開始書寫 HTML 代碼和 CSS。接下來我們在桌面新建一個文件夾，命名爲“DIV+CSS 佈局練習”，在文件夾下新建兩個空的記事本文

檔，輸入以下內容：

<!DOCTYPE html PUBLIC "-//W 3C//DTD XHTML 1.0 Transitional//EN"

"http://www .w 3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

第 39 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

<title>無標題文檔</title>

</head>

<body>

</body>

</html>

這是 XHTML 的基本結構，將其命名爲 index.htm，另一個記事本文檔則命名爲 css.css。

下面，我們在<body></body>標籤對中寫入 DIV 的基本結構，代碼如下：

<div id ="container">[color=#aaaaaa][/color]

<div id ="Header">[color=#aaaaaa][/color]

</div>

<div id ="PageBody">[color=#aaaaaa][/color]

<div id ="Sidebar">[color=#aaaaaa][/color]

</div>

<div id ="MainBody">[color=#aaaaaa][/color]

</div>

<div id ="Footer">[color=#aaaaaa][/color]

</div>

第 40 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

爲了使以後閱讀代碼更簡易，我們應該添加相關注釋，接下來打開 css.css 文件，寫入 CSS 信息，代碼

如下：

/*基本信息*/

body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}

/*頁面層容器*/

#container {w idth:100%}

/*頁面頭部*/

#Header {w idth:800px;margin:0 auto;height:100px;background:#FFCC99}

/*頁面主體*/

#PageBody {w idth:800px;margin:0 auto;height:400px;background:#CCFF00}

/*頁面底部*/

#Footer {w idth:800px;margin:0 auto;height:50px;background:#00FFFF}

把以上文件保存，用瀏覽器打開，這時我們已經可以看到基礎結構了，這個就是頁面的框架了。

關於以上 CSS 的說明（詳細請參考 CSS2.0 中文手冊，網上有下載）：

1、請養成良好的注釋習慣，這是非常重要的；

2、body 是一個 HTML 元素，頁面中所有的內容都應該寫在這標籤對之內，我就不多說了；

3、講解一些常用的 CSS 代碼的含義：

font:12px Tahoma；

這裏使用了縮寫，完整的代碼應該是：font-size:12px;font-family:Tahoma；說明字體爲 12 像素大小，字體爲 Tahoma 格式；

第 41 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

margin:0px；

也使用了縮寫，完整的應該是：

margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px

或

margin:0px 0px 0px 0px

順序是上 / 右 / 下 / 左，你也可以書寫爲 margin:0(縮寫)；

以上樣式說明 body 部分對上右下左邊距爲 0 像素，如果使用 auto 則是自動調整邊距，

另外還有以下幾種寫法：

margin:0px auto；

說明上下邊距爲 0px，左右爲自動調整；

我們以後將使用到的 padding 屬性和 margin 有許多相似之處，他們的參數是一樣的，只不過各自表示的含義不相同，margin 是外部距離，而 padding 則是內部距離。

te xt-align:ce nte r

文字對齊方式，可以設置爲左、右、中，這裏我將它設置爲居中對齊。

background:#FFF

設置背景色爲白色，這裏顏色使用了縮寫，完整的應該是 background:#FFFFFF。 background 可以用來給指定的層填充背景色、背景圖片，以後我們將用到如下格式： background:#ccc url('bg.gif') top left no -repeat；表示：使用#CCC(灰度色)填充整個層，使用 bg.gif 做爲背景圖片，

top left

表示圖片位於當前層的左上端，no-repeat 表示僅顯示圖片大小而不填充滿整個層。

top/right/left/bottom/center

用於定位背景圖片，分別表示上 / 右 / 下 / 左 / 中；還可以使用

background:url('bg.gif') 20px 100px;

表示 X 座標爲 20 像素，Y 座標爲 100 像素的精確定位；

repeat/no-repeat/repeat-x/repeat-y

分別表示填充滿整個層 / 不填充 / 沿 X 軸填充 / 沿 Y 軸填充。

第 42 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

he ight / width / color

分別表示高度(px)、寬度(px)、字體顏色(HTML 色系表)。

4、如何使頁面居中？大家將代碼保存後可以看到，整個頁面是居中顯示的，那麼究竟是什麼原因使得頁面居中顯示呢？

是因爲我們在#container 中使用了以下屬性：

margin:0 auto;

按照前面的說明，可以知道，表示上下邊距爲 0，左右爲自動，因此該層就會自動居中了。如果要讓頁面居左，則取消掉 auto 值就可以了，因爲默認就是居左顯示的。

通過 margin:auto 我們就可以輕易地使層自動居中了。

5、這裏我只介紹這些常用的 CSS 屬性了，其他的請參看 CSS2.0 中文手冊。當我們寫好了頁面大致的 DIV 結構後，我們就可以開始細致地對每一個部分進行制作了。

在上一章中我們寫入了一些樣式，那些樣式是爲了預覽結構而寫入的，我們把 css.css 中的樣式全部清除掉，重新寫入以下樣式代碼：

/*基本信息*/

body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}

a:link,a:visited {font-size:12px;text-decoration:none;}

a:hover{}

/*頁面層容器*/

#container {w idth:800px;margin:10px auto}

樣式說明：

a:link,a:visited {font-size:12px;text-decoration:none;}

a:hover {}

這兩項分別是控制頁面中超鏈接的樣式，具體我就不說明了，請大家參閱手冊。

第 43 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

#container {width:800px;margin:10px auto}

指定整個頁面的顯示區域。

width:800px 指定寬度爲 800 像素，這裏根據實際所需設定。

margin:10px auto，則是頁面上、下邊距爲 10 個像素，並且居中顯示。上一章中我們講過，對層的 margin 屬性的左右邊距設置爲 auto 可以讓層居中顯示。

接下來，我們開始制作 TOP 部分，TOP 部分包括了 LOGO、菜單和 Banne r，首先我們要做的就是對設計好的圖片進行切片，以下是在 FW 下完成的切片：

我將 TOP 部分切片爲兩部分，第一部分包括了 LOGO 和一條橫線。由於 LOGO 圖片並沒有太多的顏色，這裏我於是將這一部分保存爲 GIF 格式，調色板選擇爲精確，選擇 Alpha 透明度，色版爲白色(此處顏色應與背景色相同)，導出爲 logo.gif，圖像寬度爲 800px。

到這裏，有的朋友就說了，* 爲什麼要使用 GIF 格式？使用 JPEG 不是更好嗎？

因爲 GIF 格式的圖片文件更小，這樣能使頁面載入的速度更快，當然使用此格式之前必須確定圖片並沒有使用太多的顏色，當我們使用了 GIF 格式時，從肉眼上並不能看出圖片有什麼太大的變化，因此這是可行的。

第 44 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

* 接下來的 Banne r 部分還能使用 GIF 格式嗎？

答案是不能，因爲 Banner 部分是一個細致的圖片，如果使用 GIF 格式顏色會有太大的損失，所以必須使用 JPEG 格式，將文件導出爲 banner.jpg。

* 合理的切片是非常之重要的，因爲切片的方法正確與否決定了 CSS 書寫的簡易程度以及頁面載入速度。

切好片後，我們還需要對 TOP 部分進行分析並將 DIV 結構寫入 Header 中代碼如下：

<ul>

</ul>

</div>

第 45 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

</div>

爲什麼要這麼寫呢，因爲對菜單使用列表<li>形式，可以在以後方便對菜單定制樣式。

而爲什麼要添加以下代碼呢？

<li class="menuDiv"></li>

插入這一段代碼是可以方便地對菜單選項之間插入一些分隔樣式，例如預覽圖中的豎線分隔。然後我們在 css.css 中再寫入以下樣式：

/*頁面頭部*/

#header {background:url(logo.gif) no-repeat}

樣式說明：

#header {background:url(logo.gif) no -repeat}

給頁面頭部分加入一個背景圖片 LOGO，並且不作填充。這裏，我們沒有指定 he ade r 層的高度，爲什麼不指定呢？

因爲 header 層中還有菜單和 banner 項，所以層的高度暫時是未知的，而層的屬性又可以讓層根據內容自動設定調整，因此我們並不需要指定高度。

使用列表<li>製作菜單

開始此節的學習前，請確認你已經參照之前的幾節內容寫入了 DIV、CSS 到 index.htm 和 css.css 文件中。這一節我將告訴大家如何用列表<li>來製作菜單。

<ul>

第 46 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

</ul>

</div>

以上是這部分的結構，有關於<ul></ul>、<li></li>這兩個 HTML 元素大家自己去參考相關的內容吧，

它們最主要的作用就是在 HTML 中以列表的形式來顯示一些信息。

還有一點需要大家一定要分清楚的，當在 HTML 中定義爲 id="divID"時，在 CSS 對應的設置語法則是

#divID{} ，如果在 HTML 中定義爲 class="divID"時，則在 CSS 中對應的設置語法是.divID。

如果 id="divID"這個層中包括了一個<img></img>，則這個 img 在 CSS 中對應的設置語法應該是#divID

img {}，同樣，如果是包含在 class="divID"這個層中時，則設置語法應該是.divID img {}，這一點希望大家要分清楚了。

另外，HTML 中的一切元素都是可以定義的，例如 table、tr、td、th、form、img、input...等等，如果你要在 CSS 中設置它們，則直接寫入元素的名稱加上一對大括號{}就可以了。所有的 CSS 代碼都應該寫在大括號{}中。

按照上面的介紹，我們先在 css.css 中寫入以下代碼：

第 47 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

#menu ul {list-style:none;margin:0px;}

#menu ul li {float:left;}

解釋一下：

#menu ul {list-style:none;margin:0px;}

list-style :none，這一句是取消列表前點，因爲我們不需要這些點。

margin:0px，這一句是刪除 UL 的縮進，這樣做可以使所有的列表內容都不縮進。

#menu ul li {float:left;}

這裏的 float:left 的左右是讓內容都在同一行顯示，因此使用了浮動屬性(float)。到這一步，建議大家先保存預覽一下效果，我們再添加下面的內容，效果如下：

這時，列表內容是排列在一行，我們在#menu ul li {}再加入代碼 margin:0 10px

#menu ul {list-style:none;margin:0px;}

#menu ul li {float:left;margin:0 10px}

margin:0 10px 的作用就是讓列表內容之間產生一個 20 像素的距離(左：10px，右：10px)，預覽的效果

如下：

現在，雛形已經出來了，我們再來固定菜單的位置，把代碼改成如下：

#menu {padding:20px 20px 0 0}

/*利用 padding:20px 20px 0 0 來固定菜單位置*/

#menu ul {float:right;list-style:none;margin:0px;}

第 48 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

/*添加了 float:right 使得菜單位於頁面右側*/

#menu ul li {float:left;margin:0 10px}

這時，位置已經確定了，可是構思圖中，菜單選項之間還有一條豎線，怎麼辦呢？

別忘了，我們早就已經留好了一個空的<li class="menuD iv"></li>，要想加入豎線就使用它了。按照上面說的方法，我們再添加以下代碼：

.menuDiv {w idth:1px;height:28px;background:#999}

保存預覽一下，豎線是否已經出來了？關於這段代碼就不多講了，應該是很容易理解的。

不過，菜單選項的文字卻在頂部，我們再修改成以下代碼：

#menu ul li {float:left;margin:0 10px;display:block;line -height:28px}

關於 dis play:block;line -height:28px 大家可以去參閱一下手冊，我就不多講了。

效果基本上已經實現了，剩下的就是修改菜單的超鏈接樣式，在 css.css 中添加以下代碼：

#menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}

#menu ul li a:hover{}

這個也不多說了，沒什麼好說的了，最後的效果如下：

這一節到這裏就完畢了

第 49 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

這一節裏面，主要就是想告訴大家如何使用好 borde r 和 cle ar 這兩個屬性。

首先，如果你曾用過 table 制作網頁，你就應該知道，如果要在表格中繪制一條虛線該如何做，那需要制作一個很小的圖片來填充，其實我們還有更簡單的辦法，只要在<td></td>中加入這麼一段就可以了，你可以試試：

<div style="border-bottom:1px dashed #ccc"></div>

大家可以再次參考手冊，然後你就能明白 dashed、solid、dotted...等的作用，利用它們你可以制作出許多效果來，實線、虛線、雙線、陰影線等等。

以上代碼便可以實現設計草圖中的 banner，在 css.css 中加入以下樣式：

#banner {

background:url(banner.jpg) 0 30px no-repeat; /*加入背景圖片*/

w idth:730px; /*設定層的寬度*/

margin:auto; /*層居中*/

height:240px; /*設定高度*/

border-bottom:5px solid #EFEFEF; /*畫一條淺灰色實線*/

clear:both /*清除浮動*/

}

通過 border 很容易就繪制出一條實線了，並且減少了圖片下載所佔用的網絡資源，使得頁面載入速度

變得更快。

另一個要說明的就是 clear:both，表示清除左、右所有的浮動，在接下來的布局中我們還會用這個屬性： clear:left/right。在這裏添加 clear:both 是由於之前的 ul、li 元素設置了浮動，如果不清除則會影響 banner 層位置的設定。

第 50 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

</div>

</div>

以上是頁面主體部分，我們在 css.css 中添加以下樣式：

#pagebody {

w idth:730px; /*設定寬度*/

margin:8px auto; /*居中*/

}

#sidebar {

w idth:160px; /*設定寬度*/

text-align:left; /*文字左對齊*/

float:left; /*浮動居左*/

clear:left; /*不允許左側存在浮動*/

overflow :hidden; /*超出寬度部分隱藏*/

}

#mainbody {

w idth:570px;

text-align:left;

第 51 頁

《Div + CSS 佈局大全》博客園 Jesse Zhao 整理 http ://jessezhao.cnblo gs.com M SN/M ail:p rolibertine@ gmail.co m

float:right; /*浮動居右*/

clear:right; /*不允許右側存在浮動*/

overflow :hidden

}

爲了可以查看到效果，建議在#sidebar 和#mainbody 中加入以下代碼，預覽完成後可以刪除這段代碼：

border:1px solid #E00;

height:200px

保存預覽效果，可以發現這兩個層完美的浮動，在達到了我們布局的要求，而兩個層的實際寬度應該

160+2(border)+570+2=734px，已經超出了父層的寬度，由於 clear 的原因，這兩個層才不會出現錯位的情況，這樣可以使我們布局的頁面不會因爲內容太長（例如圖片）而導致錯位。

而之後添加的 overflow:hidden 則可以使內容太長（例如圖片）的部份自動被隱藏。通常我們會看到一

些網頁在載入時，由於圖片太大，導致佈局被撐開，直到頁面下載完成才恢復正常，通過添加

overflow :hidden 就可以解決這個問題。

CSS 中每一個屬性運用得當，就可以解決許多問題，或許它們與你在布局的頁並沒有太大的關系，但是你必須知道這些屬性的作用，在遇到難題的時候，可以嘗試使用這些屬性去解決問題。

第 52 頁

[x1]hspace 屬性可設置或返回圖像的左邊緣和右邊緣的空白。

hspace 和 vspace 屬性可與 align 一同使用，來設置圖像與周圍文本的距離。

Div+CSS 佈局大全

Div+CSS 佈局大全

sql語句查詢

js正則表達式使用

JS添加刪除DIV

winform中使用js

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結