DIVCSS布局大全

1、divcss 布局入門你正在學(xué)習(xí) CSS 布局嗎？是不是還不能完全掌握純 CSS 布局？通常有兩種情況阻礙你的學(xué)習(xí)：第一種可能是你還沒有理解 CSS 處理頁面的原理。在你考慮你的頁面整體表現(xiàn)效果前，你應(yīng)當(dāng)先考慮內(nèi)容的語義和結(jié)構(gòu)，然后再針對語義、結(jié)構(gòu)添加 CSS。這篇文章將告訴你應(yīng)該怎樣把 HTML 結(jié)構(gòu)化。另一種原因是你對那些非常熟悉的表現(xiàn)層屬性(例如：cellpadding,、hspace、align="left"等等)束手無策，不知道該轉(zhuǎn)換成對應(yīng)的什么 CSS語句。當(dāng)你解決了第一種問題，知道了如何結(jié)構(gòu)化你的 HTML，我再給出一個列表，詳細列出原來的表現(xiàn)屬性用什么 CS

2、S來代替。結(jié)構(gòu)化 HTML我們在剛學(xué)習(xí)網(wǎng)頁制作時，總是先考慮怎么設(shè)計，考慮那些圖片、字體、顏色、以及布局方案。然后我們用 Photoshop或者 Fireworks 畫出來、切割成小圖。最后再通過編輯 HTML 將所有設(shè)計還原表現(xiàn)在頁面上。如果你希望你的 HTML 頁面用 CSS布局(是CSS-friendly 的)，你需要回頭重來，先不考慮“外觀”，要先思考你的頁面內(nèi)容的語義和結(jié)構(gòu)。外觀并不是最重要的。一個結(jié)構(gòu)良好的 HTML 頁面可以以任何外觀表現(xiàn)出來，CSS Zen Garden 是一個典型的例子。CSS ZenGarden 幫助我們最終認識到 CSS的強大力量。HTML 不僅僅只在電腦

3、屏幕上閱讀。你用 photoshop 精心設(shè)計的畫面可能不能顯示在 PDA、移動電話和屏幕閱讀機上。但是一個結(jié)構(gòu)良好的 HTML 頁面可以通過 CSS的不同定義，顯示在任何地方，任何網(wǎng)絡(luò)設(shè)備上。開始思考首先要學(xué)習(xí)什么是"結(jié)構(gòu)"，一些作家也稱之為"語義"。這個術(shù)語的意思是你需要分析你的內(nèi)容塊，以及每塊內(nèi)容服務(wù)的目的，然后再根據(jù)這些內(nèi)容目的建立起相應(yīng)的 HTML 結(jié)構(gòu)。如果你坐下來仔細分析和規(guī)劃你的頁面結(jié)構(gòu)，你可能得到類似這樣的幾塊： 標(biāo)志和站點名稱主頁面內(nèi)容站點導(dǎo)航(主菜單)子菜單搜索框功能區(qū)(例如購物車、收銀臺)頁腳(版權(quán)和有關(guān)法律聲明)我們通常采用 D

4、IV元素來將這些結(jié)構(gòu)定義出來，類似這樣：<div id="header"></div><div id="content"></div><div id="globalnav"></div><div id="subnav"></div><div id="search"></div><div id="shop"></div><div

5、id="footer"></div>這不是布局，是結(jié)構(gòu)。這是一個對內(nèi)容塊的語義說明。當(dāng)你理解了你的結(jié)構(gòu)，就可以加對應(yīng)的 ID在 DIV 上。DIV 容器中可以包含任何內(nèi)容塊，也可以嵌套另一個 DIV。內(nèi)容塊可以包含任意的 HTML 元素-標(biāo)題、段落、圖片、表格、列表等等。根據(jù)上面講述的，你已經(jīng)知道如何結(jié)構(gòu)化 HTML，現(xiàn)在你可以進行布局和樣式定義了。每一個內(nèi)容塊都可以放在頁面上任何地方，再指定這個塊的顏色、字體、邊框、背景以及對齊屬性等等。使用選擇器是件美妙的事id的名稱是控制某一內(nèi)容塊的手段,通過給這個內(nèi)容塊套上DIV并加上唯一的id,你就可以用CSS選

6、擇器來精確定義每一個頁面元素的外觀表現(xiàn),包括標(biāo)題、列表、圖片、鏈接或者段落等等。例如你為#header 寫一個 CSS 規(guī)則，就可以完全不同于#content 里的圖片規(guī)則。另外一個例子是：你可以通過不同規(guī)則來定義不同內(nèi)容塊里的鏈接樣式。類似這樣：#globalnav a:link 或者 #subnava:link 或者#content a:link。你也可以定義不同內(nèi)容塊中相同元素的樣式不一樣。例如，通過#content p 和#footer p 分別定義#content 和#footer 中 p的樣式。從結(jié)構(gòu)上講，你的頁面是由圖片、鏈接、列表、段落等組成的，這些元素本身并不會對顯示在什么網(wǎng)

7、絡(luò)設(shè)備中(PDA 還是手機或者網(wǎng)絡(luò)電視)有影響，它們可以被定義為任何的表現(xiàn)外觀。一個仔細結(jié)構(gòu)化的 HTML 頁面非常簡單，每一個元素都被用于結(jié)構(gòu)目的。當(dāng)你想縮進一個段落，不需要使用 blockquote標(biāo)簽，只要使用 p標(biāo)簽，并對 p加一個 CSS的 margin 規(guī)則就可以實現(xiàn)縮進目的。p是結(jié)構(gòu)化標(biāo)簽，margin 是表現(xiàn)屬性，前者屬于 HTML，后者屬于 CSS。(這就是結(jié)構(gòu)于表現(xiàn)的相分離.)良好結(jié)構(gòu)的 HTML 頁面內(nèi)幾乎沒有表現(xiàn)屬性的標(biāo)簽。代碼非常干凈簡潔。例如，原先的代碼<table width="80%"cellpadding="3"

8、border="2" align="left">，現(xiàn)在可以只在 HTML 中寫<table>，所有控制表現(xiàn)的東西都寫到 CSS 中去，在結(jié)構(gòu)化的 HTML 中，table 就是表格，而不是其他什么(比如被用來布局和定位)。 親自實踐一下結(jié)構(gòu)化上面說的只是最基本的結(jié)構(gòu)，實際應(yīng)用中，你可以根據(jù)需要來調(diào)整內(nèi)容塊。常常會出現(xiàn) DIV 嵌套的情況，你會看到"container"層中又有其它層，結(jié)構(gòu)類似這樣：<div id="navcontainer"><div id="globa

9、lnav"><ul>a list</ul></div><div id="subnav"><ul>another list</ul></div></div>嵌套的 div 元素允許你定義更多的 CSS 規(guī)則來控制表現(xiàn)，例如：你可以給#navcontainer 一個規(guī)則讓列表居右，再給#globalnav 一個規(guī)則讓列表居左，而給#subnav 的 list 另一個完全不同的表現(xiàn)。 用CSS 替換傳統(tǒng)方法下面的列表將幫助你用 CSS 替換傳統(tǒng)方法：HTML 屬性以及相

10、對應(yīng)的 CSS方法HTML 屬性 CSS 方法 說明align="left"align="right" float: left;float: right; 使用 CSS 可以浮動 任何元素:圖片、段落、div、標(biāo)題、表格、列表等等 當(dāng)你使用 float 屬性，必須給這個浮動元素定義一個寬度。marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; 使用 CSS, margin 可以設(shè)置在任

11、何元素上, 不僅僅是 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 的一個屬性值定義。整個頁面的鏈接風(fēng)格都一樣。使用 CSS 的選擇器，頁面不同部分的鏈接樣式可以不一樣。bgcolor="#FFFFFF&q

12、uot; background-color: #fff; 在 CSS 中，任何元素都可以定義背景顏色，不僅僅局限于 body 和 table元素。bordercolor="#FFFFFF" border-color: #fff; 任何元素都可以設(shè)置邊框(boeder)，你可以分別定義 top, right, bottom和leftborder="3"cellspacing="3" border-width: 3px; 用CSS，你可以定義table的邊框為統(tǒng)一樣式，也可以分別定義top, right, bottomand left 邊

13、框的顏色、尺寸和樣式。你可以使用 table, td or th 這些選擇器.如果你需要設(shè)置無邊框效果，可以使用 CSS定義： border-collapse: collapse; <br clear="left"><br clear="right"><br clear="all">clear: left;clear: right;clear: both;許多 2列或者 3列布局都使用 float 屬性來定位。如果你在浮動層中定義了背景顏色或者背景圖片，你可以使用 clear屬性.cellpaddi

14、ng="3"vspace="3"hspace="3" padding: 3px; 用 CSS，任何元素都可以設(shè)定 padding 屬性，同樣， padding 可以分別設(shè)置 top, right, bottomand left。padding 是透明的。align="center" text-align: center;margin-right: auto; margin-left: auto;Text-align 只適用于文本.象div，p 這樣的塊級怨毒可以通過 margin-right: auto; 和mar

15、gin-left: auto;來水平居中 一些令人遺憾的技巧和工作環(huán)境由于瀏覽器對 CSS支持的不完善，我們有時候不得不采取一些技巧(hacks)或建立一種環(huán)境(Workarounds)來讓CSS 實現(xiàn)傳統(tǒng)方法同樣的效果。例如塊級元素有時侯需要使用水平居中的技巧，盒模型 bug 的技巧等等。所有這些技巧都在 MollyHolzschlag 的文章Integrated Web Design: Strategies for Long-Term CSS Hack Management中有詳細說明。另外一個關(guān)于 CSS技巧的資源站點是 Big John 和 Holly Bergevin 的“Posit

16、ion is Everything”。XHTML 下css+div 布局總結(jié)xml(extensible Markup Language)的出現(xiàn)，結(jié)構(gòu)化文檔和數(shù)據(jù)有了一個通用的、科適應(yīng)的格式，不僅僅應(yīng)用在 web 上，也可以應(yīng)用在任何地方。標(biāo)準(zhǔn)稱為可能。XHTML 是 The Extensible HyperText Markup Language 可擴展標(biāo)識語言的縮寫。在 HTML4.0 的基礎(chǔ)上，用 XML 的規(guī)則對其進行擴展，得到了 XHTML。它實現(xiàn) HTML 向 XML 的過渡。CSS 是Cascading Style Sheets 層疊樣式表的縮寫。純 CSS 布局與結(jié)構(gòu)式 XHT

17、ML 相結(jié)合能幫助設(shè)計師分離外觀與結(jié)構(gòu)，使站點的訪問及維護更加容易。1)為頁面添加正確的 DOCTYPEDOCTYPE 是 document type 的簡寫。主要用來說明你用的 XHTML 或者 HTML 是什么版本。瀏覽器根據(jù)你 DOCTYPE 定義的DTD(文檔類型定義)來解釋頁面代碼。XHTML1.0 提供了三種 DOCTYPE 可選擇：(1)過渡型（Transitional ）-使用非常普遍。<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0Transitional/EN" "/TR

18、/xhtml1/DTD/xhtml1-transitional.dtd">(2)嚴(yán)格型（Strict ）<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Strict/EN""/TR/xhtml1/DTD/xhtml1 -strict.dtd">(3)框架型（Frameset ）<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0Frameset/EN" "/T

19、R/xhtml1/DTD/xhtml1-frameset.dtd">2)設(shè)定一個名字空間（Namespace）直接在 DOCTYPE 聲明后面添加如下代碼：<html XMLns="/1999/xhtml" >一個 namespace 是收集元素類型和屬性名字的一個詳細的 DTD，namespace 聲明允許你通過一個在線地址指向來識別你的namespace。只要照樣輸入代碼就可以。3)聲明你的編碼語言為了被瀏覽器正確解釋和通過標(biāo)識校驗，所有的 XHTML 文檔都必須聲明它們所使用的編碼語言。代碼如下：<me

20、ta http-equiv="Content-Type" content="text/html; charset=GB2312" />這里聲明的編碼語言是簡體中文 GB2312，你如果需要制作繁體內(nèi)容，可以定義為 BIG5。4)用小寫字母書寫所有的標(biāo)簽XML 對大小寫是敏感的，所以，XHTML 也是大小寫有區(qū)別的。所有的 XHTML 元素和屬性的名字都必須使用小寫。否則你的文檔將被 W3C 校驗認為是無效的。例如下面的代碼是不正確的：5)為圖片添加 alt 屬性為所有圖片添加 alt 屬性。alt 屬性指定了當(dāng)圖片不能顯示的時候就顯示供替換文本，這

21、樣做對正常用戶可有可無，但對純文本瀏覽器和使用屏幕閱讀機的用戶來說是至關(guān)重要的。只有添加了 alt 屬性，代碼才會被 W3C 正確性校驗通過。注意的是我們要添加有意義的 alt屬性，象下面這樣的寫法毫無意義：<img src="logo.gif" alt="logo.gif">正確的寫法：<img src="logo.gif" alt="互動力工作室標(biāo)志，點擊返回首頁">6)給所有屬性值加引號在 HTML 中，你可以不需要給屬性值加引號，但是在 XHTML 中，它們必須被加引號。還必須用空格

22、分開屬性。例：<hr width="75%"size="7"/> 這也是不正確的7)關(guān)閉所有的標(biāo)簽在 XHTML 中，每一個打開的標(biāo)簽都必須關(guān)閉?？諛?biāo)簽也要關(guān)閉，在標(biāo)簽尾部使用一個正斜杠 "/"來關(guān)閉它們自己。例如：<br />8)收藏夾小圖標(biāo)例如：首先制作一個 16x16 的 icon 圖標(biāo)，命名為 favicon.ico，放在根目錄下。然后將下面的代碼嵌入 head 區(qū)：<link rel="icon" href="/favicon.ico" type=&quo

23、t;image/x-icon" /><link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />9)用 CSS 定義元素外觀用 css 布局的一個好處是可以批量對頁面進行修改，它能將文檔結(jié)構(gòu)和表現(xiàn)層分離開來，減輕工作量和服務(wù)器的負荷，增加站點的擴展能力和應(yīng)用。css 是不區(qū)別空格和大小寫的，下面是一些基礎(chǔ)的歸納(1)顏色值顏色值可以用 RGB 值寫，例如：color : rgb(255,0,0)，也可以用十六進制寫，就象上面例子 c

24、olor:#FF0000。如果十六進制值是成對重復(fù)的可以簡寫，效果一樣。例如:#FF0000 可以寫成#F00。但如果不重復(fù)就不可以簡寫，例如#FC1A1B 必須寫滿六位。(2)定義字體web 標(biāo)準(zhǔn)推薦如下字體定義方法：body font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif; 字體按照所列出的順序選用。如果用戶的計算機含有 Lucida Grande 字體，文檔將被指定為 Lucida Grande。沒有的話，就被指定為 Verdana 字體，如果也沒有 Ver

25、dana，就指定為 Lucida字體，依此類推，； Lucida Grande 字體適合 Mac OS X；Verdana 字體適合所有的 Windows 系統(tǒng)；Lucida 適合 UNIX 用戶"宋體"適合中文簡體用戶;如果所列出的字體都不能用，則默認的 sans-serif 字體能保證調(diào)用;(3)群選擇器當(dāng)幾個元素樣式屬性一樣時，可以共同調(diào)用一個聲明，元素之間用逗號分隔，： p, td, li font-size : 12px ; (4)派生選擇器可以使用派生選擇器給一個元素里的子元素定義樣式，例如這樣：li strong font-style : italic; fo

26、nt-weight : normal；就是給 li 下面的子元素 strong 定義一個斜體不加粗的樣式。(5)id 選擇器用 CSS 布局主要用層"div"來實現(xiàn)，而 div 的樣式通過"id 選擇器"來定義。例如我們首先定義一個層<div id="menubar"></div>然后在樣式表里這樣定義：#menubar MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;其中"menubar"是你自己定義的 id 名稱。注意在前面加"#&quo

27、t;號。id 選擇器也同樣支持派生，例如：#menubar p text-align : right; margin-top : 10px; 這個方法主要用來定義層和那些比較復(fù)雜，有多個派生的元素。(6)類別選擇器在CSS 里用一個點開頭表示類別選擇器定義，例如：.14px color : #f60 ;font-size:14px ;在頁面中，用 class= "類別名"的方法調(diào)用：<span class="14px">14px 大小的字體</span>這個方法比較簡單靈活，可以隨時根據(jù)頁面需要新建和刪除。(7)定義鏈接的樣式CS

28、S 中用四個偽類來定義鏈接的樣式，分別是：a:link、a:visited、a:hover 和 a : active，例如：a:linkfont-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-d

29、ecoration : none ;color : #F90 ;以上語句分別定義了 "鏈接、已訪問過的鏈接、鼠標(biāo)停在上方時、點下鼠標(biāo)時"的樣式。注意，必須按以上順序?qū)懀駝t顯示可能和你預(yù)想的不一樣。記住它們的順序是“LVHA”。(8)組合使用選擇器創(chuàng)造精致的設(shè)計效果用漂亮的圖案代替普通無序列表前沉悶的黑點。站點 先用 css 規(guī)則告訴類別屬性 inventory 的無序列表。ul.inventorylist-style:disc url(/images/common/lister2.gig) inside;它的調(diào)用標(biāo)記:<ul class="inventor

30、y"><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=&quo

31、t;/basslets">Angelfish</a>(15 items)</li><ul>(9)縮寫是按照順時針的順序margin:25px 0 25px 0;(10)行高line-height:150% 說明行距為正常的 150%10)結(jié)構(gòu)化代碼 div(division)、id、class用它們來書寫緊湊的 xhtml，更明智的使用 css.(1)結(jié)構(gòu)化 id 標(biāo)簽，與 class 的有區(qū)別：如果你的屬性頁面包含了一個 div，它的 id 為"content",它就不可能有另外一個 div 或者其他元素擁有相同的名字。

32、相反，class 屬性可以在意個頁面中一次又一次地使用。(2)id 的規(guī)則一個 id 值必須用一個字母或者下劃線開頭，它不能用一個數(shù)字進行開頭，然后跟隨字母、數(shù)字和下劃線?？崭窈瓦B字符-都是不允許的。11）制作好的網(wǎng)站可以到 w3c 進行標(biāo)準(zhǔn)校正http:/css-validator/網(wǎng)頁設(shè)計DIV+CSS第1 天:選擇什么樣的DOCTYPE前言大家好！這個系列文章是按阿捷自己制作這個站點的過程編寫的。之前阿捷也一直沒有制作過一個真正符合 web 標(biāo)準(zhǔn)的網(wǎng)站?，F(xiàn)在邊參考國外資料邊制作，同時把過程中的心得和經(jīng)驗記錄下來，希望對

33、大家有點幫助。好了，讓我們開始吧第一天開始制作符合標(biāo)準(zhǔn)的站點，第一件事情就是聲明符合自己需要的 DOCTYPE。查看本站首頁原代碼，可以看到第一行就是：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">打開一些符合標(biāo)準(zhǔn)的站點，例如著名 web 設(shè)計軟件開發(fā)商 Macromedia，設(shè)計大師 Zeldman 的個人網(wǎng)站，會發(fā)現(xiàn)同樣的代碼。而另一些符合標(biāo)準(zhǔn)的站點(例如

34、 )的代碼則如下：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Frameset/EN""/TR/xhtml1/DTD/xhtml1-frameset.dtd">那么這些代碼有什么含義？一定要放置嗎？什么是DOCTYPE上面這些代碼我們稱做 DOCTYPE 聲明。DOCTYPE 是 document type(文檔類型)的簡寫，用來說明你用的 XHTML 或者 HTML 是什么版本。其中的 DTD(例如上例中的 xhtml1-transitional.dtd)叫文檔類型定

35、義，里面包含了文檔的規(guī)則，瀏覽器就根據(jù)你定義的 DTD來解釋你頁面的標(biāo)識，并展現(xiàn)出來。要建立符合標(biāo)準(zhǔn)的網(wǎng)頁，DOCTYPE 聲明是必不可少的關(guān)鍵組成部分；除非你的 XHTML 確定了一個正確的 DOCTYPE，否則你的標(biāo)識和 CSS 都不會生效。XHTML 1.0 提供了三種 DTD聲明可供選擇：過渡的(Transitional):要求非常寬松的 DTD，它允許你繼續(xù)使用 HTML4.01 的標(biāo)識(但是要符合 xhtml 的寫法)。完整代碼如下：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN"&qu

36、ot;/TR/xhtml1/DTD/xhtml1-transitional.dtd">嚴(yán)格的(Strict):要求嚴(yán)格的 DTD，你不能使用任何表現(xiàn)層的標(biāo)識和屬性，例如<br>。完整代碼如下：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Strict/EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd">框架的(Frameset):專門針對框架頁面設(shè)計使用的 DTD，如果你的頁面中包含有框

37、架，需要采用這種 DTD。完整代碼如下：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Frameset/EN""/TR/xhtml1/DTD/xhtml1-frameset.dtd">我們選擇什么樣的DOCTYPE理想情況當(dāng)然是嚴(yán)格的 DTD，但對于我們大多數(shù)剛接觸 web 標(biāo)準(zhǔn)的設(shè)計師來說，過渡的 DTD(XHTML 1.0 Transitional)是目前理想選擇(包括本站，使用的也是過渡型 DTD)。因為這種 DTD 還允許我們使用表現(xiàn)層的標(biāo)識、元素和屬性，也比較容

38、易通過W3C 的代碼校驗。注：上面說的"表現(xiàn)層的標(biāo)識、屬性"是指那些純粹用來控制表現(xiàn)的 tag，例如用于排版的表格、背景顏色標(biāo)識等。在 XHTML中標(biāo)識是用來表示結(jié)構(gòu)的，而不是用來實現(xiàn)表現(xiàn)形式，我們過渡的目的是最終實現(xiàn)數(shù)據(jù)和表現(xiàn)相分離。打個比方：人體模特換衣服。模特就好比數(shù)據(jù)，衣服則是表現(xiàn)形式，模特和衣服是分離的，這樣你就可以隨意換衣服。而原來 HTML4 中，數(shù)據(jù)和表現(xiàn)是混雜在一起的，要一次性換個表現(xiàn)形式非常困難。呵呵，有點抽象了，這個概念需要我們在應(yīng)用過程中逐步領(lǐng)會。補充DOCTYPE 聲明必須放在每一個 XHTML文檔最頂部，在所有代碼和標(biāo)識之上。 網(wǎng)頁設(shè)計DIV+C

39、SS第2 天:什么是名字空間DOCTYPE 聲明好以后，接下來的代碼是：<html xmlns="/1999/xhtml" lang="gb2312">通常我們 HTML4.0 的代碼只是<html>，這里的"xmlns"是什么呢？這個"xmlns"是 XHTML namespace 的縮寫，叫做"名字空間"聲明。名字空間是什么作用呢？阿捷自己的理解是：由于 xml 允許你自己定義自己的標(biāo)識，你定義的標(biāo)識和其他人定義的標(biāo)識有可能相同，但表示

40、不同的意義。當(dāng)文件交換或者共享的時候就容易產(chǎn)生錯誤。為了避免這種錯誤發(fā)生，XML 采用名字空間聲明，允許你通過一個網(wǎng)址指向來識別你的標(biāo)識。例如：小王和小李都定義了一個<book>標(biāo)識，如果小王的名字空間是""，小李的名字空間是""，那么當(dāng)兩個文檔交換數(shù)據(jù)時，也不會混淆<book>標(biāo)識，因為它屬于不同的名字空間。更通俗的解釋是：名字空間就是給文檔做一個標(biāo)記，告訴別人，這個文檔是屬于誰的。只不過這個"誰"用了一個網(wǎng)址來代替。XHTML 是 HTML 向 XML 過渡的標(biāo)識語言，它需要符合 XML 文檔規(guī)則，因此也需

41、要定義名字空間。又因為 XHTML1.0 不能自定義標(biāo)識，所以它的名字空間都相同，就是"/1999/xhtml"。如果你還不太理解也不要緊，目前階段我們只要照抄代碼就可以了。后面的 lang="gb2312",指定你的文檔用簡體中文。網(wǎng)頁設(shè)計DIV+CSS第3 天:定義語言編碼第三步是定義你的語言編碼，類似這樣：<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />為了被瀏覽器正確解釋和

42、通過 W3C 代碼校驗，所有的 XHTML 文檔都必須聲明它們所使用的編碼語言，我們一般使用 gb2312(簡體中文)，制作多國語言頁面也有可能用 Unicode、ISO-8859-1等，根據(jù)你的需要定義。 通常這樣定義就可以了。但是要補充說明的是，XML 文檔并不是這樣定義語言編碼的，XML 的定義方式如下：<?xml version="1.0" encoding="gb2312"?>你在 M 的首頁代碼第一行就可以看見類似的語句，這也是 W3C 推薦使用的定義方法。那為什么我們不直接采用這種方法呢？原因是一些瀏覽器對標(biāo)準(zhǔn)的支持不完善，不能

43、正確理解這樣的定義方法，比如 IE6/windows。所以在目前過渡方案下，我們依然推薦使用 meta 方式。當(dāng)然，你可以兩種方法都寫?？幢菊驹创a，你會發(fā)現(xiàn)語言編碼定義的地方還多一句：<meta http-equiv="Content-Language" content="gb2312" />這是針對老版本瀏覽器寫的，以保證各種瀏覽器都能正確解釋頁面。注意：在上面聲明語句的最后，你看到有一個斜杠"/"，這和我們以前的 HTML4.0 的代碼寫法不同。原因是 XHTML 語法規(guī)則要求所有的標(biāo)識都必須有開始和結(jié)束。例如<

44、;body>和</body>、<p>和</p>等，對于不成對的標(biāo)識，要求在標(biāo)識最后加一個空格，然后跟一個"/"。例如<br>寫成<br />、<img>寫成<img />，加空格的原因是避免代碼連在一起瀏覽器不識別。網(wǎng)頁設(shè)計DIV+CSS第4 天:調(diào)用樣式表用web 標(biāo)準(zhǔn)設(shè)計網(wǎng)站，過渡的方法主要是采用 XHTML+CSS，css樣式表是必不可少的。這就要求所有網(wǎng)頁設(shè)計師必須熟練掌握CSS，如果你以前不常用，那么現(xiàn)在就開始學(xué)習(xí)吧。要制作符合 web標(biāo)準(zhǔn)的網(wǎng)站，不懂 CSS 是設(shè)計不出漂亮

45、的頁面的。事實上，所有表現(xiàn)的地方都需要用 CSS 來實現(xiàn)。我們以前都習(xí)慣用 table 來定位和布局，現(xiàn)在要改用 DIV 來定位和布局。這是思維方式的變化，一開始有些不習(xí)慣。呵呵，任何變革都會有阻力的，為了享受標(biāo)準(zhǔn)帶來的"益處"，放棄一些老的傳統(tǒng)做法是值得的。外部調(diào)用樣式表在以前，我們通常采用 2種方法使用樣式表：頁面內(nèi)嵌法：就是將樣式表直接寫在頁面代碼的 head 區(qū)。類似這樣：<style type="text/css"> <!- body background : white ; color : black ; -> <

46、;/style>外部調(diào)用法：將樣式表寫在一個獨立的.css 文件中，然后在頁面 head 區(qū)用類似以下代碼調(diào)用。在符合 web 標(biāo)準(zhǔn)的設(shè)計中，我們使用外部調(diào)用法，好處不言而喻，你可以不修改頁面只修改.css 文件而改變頁面的樣式。如果所有頁面都調(diào)用同一個樣式表文件，那么改一個樣式表文件，可以改變所有文件的樣式。 雙表法調(diào)用樣式表查看某些符合標(biāo)準(zhǔn)站點的原代碼，你可能看到，在調(diào)用樣式表的地方有如下 2句：<link rel="stylesheet" rev="stylesheet" href="css/style.css" t

47、ype="text/css" media="all" /> <styletype="text/css" media="all">import url( css/style01.css );</style>為什么要寫兩次呢？實際上一般情況下用外聯(lián)法調(diào)用(就是第一句)就足夠了。我這里使用雙表調(diào)用只是一種示例。其中的"import"命令用于輸入樣式表。而"import"命令在 netscape 4.0 版本瀏覽器是無效的。也就是說，當(dāng)你希望某些效果在

48、netscape 4.0 瀏覽器中隱藏，在 4.0 以上或其它瀏覽器中又顯示的時候，你可以采用"import"命令方法調(diào)用樣式表。 網(wǎng)頁設(shè)計DIV+CSS第5 天:head 區(qū)的其他設(shè)置這些技巧主要講 meta 標(biāo)簽設(shè)置的，其實與符合 web 標(biāo)準(zhǔn)關(guān)系不大，只要注意在最后加"/"關(guān)閉標(biāo)簽就可以，但是既然是入門教程，就寫得詳細一點吧。收藏夾小圖標(biāo)如果你將本站加入收藏夾，可以看到在收藏夾網(wǎng)址之前的 IE 圖標(biāo)變成了本站特別的圖標(biāo)。要實現(xiàn)這樣效果很簡單，首先制作一個 16x16 的 icon 圖標(biāo)，命名為 favicon.ico，放在根目錄下。然后將下面的代碼

49、嵌入 head 區(qū)：<link rel="icon" href="/favicon.ico" type="image/x-icon" /><link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />為搜索引擎準(zhǔn)備的內(nèi)容代碼如下，替換成你自己站點的內(nèi)容就可以：允許搜索機器人搜索站內(nèi)所有鏈接。如果你想某些頁面不被搜索，推薦采用 robots.txt 方法<meta conte

50、nt="all" name="robots" />設(shè)置站點作者信息<meta name="author" content="ajie,阿捷" />設(shè)置站點版權(quán)信息<meta name="Copyright" content=",自由版權(quán),任意轉(zhuǎn)載" />站點的簡要介紹(推薦)<meta name="description" content="新網(wǎng)頁設(shè)計師。web 標(biāo)準(zhǔn)的教程站點，推動 w

51、eb 標(biāo)準(zhǔn)在中國的應(yīng)用" />站點的關(guān)鍵詞(推薦)<meta content="designing, with, web, standards, xhtml, css, graphic, design, layout, usability, ccessibility,w3c, w3, w3cn, ajie" name="keywords" />先介紹這么多。補充說明，前面花了 5 節(jié)都是講 head 區(qū)的代碼，實際頁面內(nèi)容還一字未提，呵呵，不要急，其實 head 區(qū)是非常重要的，看一個頁面的 head 的代碼就可以知道設(shè)計師是

52、否夠?qū)I(yè)。網(wǎng)頁設(shè)計DIV+CSS第6 天:XHTML 代碼規(guī)范在開始正式內(nèi)容制作之前，我們必須先了解一下 web標(biāo)準(zhǔn)有關(guān)代碼的規(guī)范。了解這些規(guī)范可以幫助你少走彎路,盡快通過代碼校驗。1.所有的標(biāo)記都必須要有一個相應(yīng)的結(jié)束標(biāo)記以前在 HTML 中，你可以打開許多標(biāo)簽，例如<p>和<li>而不一定寫對應(yīng)的</p>和</li>來關(guān)閉它們。但在 XHTML 中這是不合法的。XHTML 要求有嚴(yán)謹?shù)慕Y(jié)構(gòu)，所有標(biāo)簽必須關(guān)閉。如果是單獨不成對的標(biāo)簽，在標(biāo)簽最后加一個"/"來關(guān)閉它。例如:<br /><img height=

53、"80" alt="網(wǎng)頁設(shè)計師" src="./images/logo_w3cn_200x80.gif" width="200" />2.所有標(biāo)簽的元素和屬性的名字都必須使用小寫與HTML 不一樣，XHTML 對大小寫是敏感的，<title>和<TITLE>是不同的標(biāo)簽。XHTML要求所有的標(biāo)簽和屬性的名字都必須使用小寫。例如：<BODY>必須寫成<body> 。大小寫夾雜也是不被認可的，通常 dreamweaver 自動生成的屬性名字"onMouse

54、Over"也必須修改成"onmouseover"。3.所有的XML 標(biāo)記都必須合理嵌套同樣因為 XHTML 要求有嚴(yán)謹?shù)慕Y(jié)構(gòu)，因此所有的嵌套都必須按順序，以前我們這樣寫的代碼：<p><b></p>/b>必須修改為：<p><b></b>/p>就是說，一層一層的嵌套必須是嚴(yán)格對稱。4.所有的屬性必須用引號""括起來在HTML 中，你可以不需要給屬性值加引號，但是在 XHTML 中，它們必須被加引號。例如:<height=80>必須修改為：<heig

55、ht="80">特殊情況，你需要在屬性值里使用雙引號，你可以用"，單引號可以使用&apos;，例如： <alt="say&apos;hello&apos;">5.把所有<和&特殊符號用編碼表示任何小于號（<），不是標(biāo)簽的一部分，都必須被編碼為& l t ;任何大于號（>），不是標(biāo)簽的一部分，都必須被編碼為& g t ;任何與號（&），不是實體的一部分的，都必須被編碼為& a m p;注：以上字符之間無空格。6.給所有屬性賦一個值XHTML 規(guī)定所

56、有屬性都必須有一個值，沒有值的就重復(fù)本身。例如：<td nowrap> <input type="checkbox" name="shirt" value="medium" checked>必須修改為：<td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked">7.不要在

57、注釋內(nèi)容中使“-”“-”只能發(fā)生在 XHTML 注釋的開頭和結(jié)束，也就是說，在內(nèi)容中它們不再有效。例如下面的代碼是無效的:<!-這里是注釋-這里是注釋->用等號或者空格替換內(nèi)部的虛線。<!-這里是注釋=這里是注釋->以上這些規(guī)范有的看上去比較奇怪，但這一切都是為了使我們的代碼有一個統(tǒng)一、唯一的標(biāo)準(zhǔn)，便于以后的數(shù)據(jù)再利用。網(wǎng)頁設(shè)計DIV+CSS第7 天:CSS 入門在了解 XHTML 代碼規(guī)范后，我們就要進行 CSS 布局。首先先介紹一些 CSS 的入門知識。如果你已經(jīng)很熟悉了，可以跳過這一節(jié)，直接進入下一節(jié)。CSS 是Cascading Style Sheets(層疊樣

58、式表)的縮寫。是一種對 web 文檔添加樣式的簡單機制，屬于表現(xiàn)層的布局語言。1.基本語法規(guī)范分析一個典型 CSS的語句：p COLOR:#FF0000;BACKGROUND:#FFFFFF其中"p"我們稱為"選擇器"(selectors)，指明我們要給"p"定義樣式；樣式聲明寫在一對大括號""中；COLOR 和BACKGROUND 稱為"屬性"(property)，不同屬性之間用分號""分隔； "#FF0000"和"#FFFFFF"是

59、屬性的值(value)。2.顏色值顏色值可以用 RGB 值寫，例如：color : rgb(255,0,0)，也可以用十六進制寫，就象上面例子 color:#FF0000。如果十六進制值是成對重復(fù)的可以簡寫，效果一樣。例如:#FF0000 可以寫成#F00。但如果不重復(fù)就不可以簡寫，例如#FC1A1B 必須寫滿六位。3.定義字體web 標(biāo)準(zhǔn)推薦如下字體定義方法：body font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif; 字體按照所列出的順序選用。如果用戶的計算機含

60、有 Lucida Grande 字體，文檔將被指定為 Lucida Grande。沒有的話，就被指定為 Verdana 字體，如果也沒有 Verdana，就指定為 Lucida 字體，依此類推，； Lucida Grande 字體適合 Mac OS X；Verdana 字體適合所有的 Windows 系統(tǒng)；Lucida 適合 UNIX 用戶"宋體"適合中文簡體用戶;如果所列出的字體都不能用，則默認的 sans-serif 字體能保證調(diào)用;4.群選擇器當(dāng)幾個元素樣式屬性一樣時，可以共同調(diào)用一個聲明，元素之間用逗號分隔，： p, td, li font-size : 12px

61、; 5.派生選擇器可以使用派生選擇器給一個元素里的子元素定義樣式，例如這樣：li strong font-style : italic; font-weight : normal；就是給 li 下面的子元素 strong 定義一個斜體不加粗的樣式。6.id 選擇器用CSS 布局主要用層"div"來實現(xiàn)，而 div的樣式通過"id選擇器"來定義。例如我們首先定義一個層<div id="menubar"></div>然后在樣式表里這樣定義：#menubar MARGIN: 0px;BACKGROUND: #FEFE

62、FE;COLOR: #666;其中"menubar"是你自己定義的 id 名稱。注意在前面加"#"號。id選擇器也同樣支持派生，例如：#menubar p text-align : right; margin-top : 10px; 這個方法主要用來定義層和那些比較復(fù)雜，有多個派生的元素。6.類別選擇器在CSS 里用一個點開頭表示類別選擇器定義，例如：.14px color : #f60 ;font-size:14px ;在頁面中，用 class="類別名"的方法調(diào)用：<span class="14px"&g

63、t;14px 大小的字體</span>這個方法比較簡單靈活，可以隨時根據(jù)頁面需要新建和刪除。7.定義鏈接的樣式CSS 中用四個偽類來定義鏈接的樣式，分別是：a:link、a:visited、a:hover 和 a : active，例如：a:linkfont-weight : bold ;text-decoration : none ;color : #c00 ;a:visited font-weight : bold ;text-decoration : none ;color : #c30 ;a:hover font-weight : bold ;text-decoration

64、 : underline ;color : #f60 ;a:active font-weight : bold ;text-decoration : none ;color : #F90 ;以上語句分別定義了"鏈接、已訪問過的鏈接、鼠標(biāo)停在上方時、點下鼠標(biāo)時"的樣式。注意，必須按以上順序?qū)?，否則顯示可能和你預(yù)想的不一樣。記住它們的順序是“LVHA”。呵呵，看了這么多，有點頭暈吧，實際上 CSS 的語法規(guī)范還有很多，這里列的只是一些常用的，畢竟我們是循序漸進，不可能一口吃成胖子:)網(wǎng)頁設(shè)計DIV+CSS第8 天:CSS 布局入門CSS 布局與傳統(tǒng)表格(table)布局最大的區(qū)別在于：原來的定位都是采用表格，通過表格的間距或者用無色透明的 GIF 圖片來控制文布局版塊的間距；而現(xiàn)在則采用層(div)來定位，通過層的 margin,padding,border 等屬性來控制版塊的間距。1.定義DIV分析一個典型的