1、DIV固定(gdng)寬度居中顯示超級牛最詳細(xì)的Div+CSS布局案例這個例子的主要內(nèi)容是居中顯示，現(xiàn)在的顯示器的寬度都比較(bjio)大，并且規(guī)格不統(tǒng)一，所以判斷一個網(wǎng)頁是不是專業(yè)，第一眼就是這個網(wǎng)站是不是居中，如果不居中，一般不是一個很老的沒有人維護(hù)的網(wǎng)站就是一個技術(shù)很差的人寫的。CSS代碼(di m)如下：body font-family:Verdana; font-size:14px; margin:0;#container margin:0 auto; width:900px; height:500px; background:#CD5C5C;頁面代碼如下：1列固定寬度居中效果下圖顯

2、示：（點(diǎn)擊看大圖）其中居中(jzhng)的關(guān)鍵是“margin:0 auto;”代碼(di m)例子由“標(biāo)準(zhǔn)(biozhn)之路”提供，感謝！序經(jīng)驗(yàn)之談超級牛最詳細(xì)(xingx)的Div+CSS布局案例最近(zujn)有很多晚輩問我關(guān)于網(wǎng)站制作方面的問題，隨著SEO的普及，DIV+CSS的網(wǎng)站制作理念成為了流行，但在實(shí)際操作中，DIV其實(shí)是很不好控制的。大家會碰到很多問題，例如應(yīng)該在左中右的，但卻沒有達(dá)到這樣的效果。在寫大家最關(guān)心的Div+CSS布局案例前，讓我先啰嗦幾句，從事互聯(lián)網(wǎng)工作已經(jīng)快6年了，一個網(wǎng)站的產(chǎn)生，一般分為調(diào)研，策劃，設(shè)計，制作，開發(fā)，內(nèi)容、維護(hù)，如果是高級點(diǎn)的網(wǎng)站，會涉及(

3、shj)到運(yùn)營和推廣的工作。我有幸全部工作流程都涉及過，我想先說一點(diǎn)我自己從事頁面構(gòu)造時的經(jīng)驗(yàn)和理解，當(dāng)然在一定程度上可能存在局限性，但因?yàn)榭吹搅撕芏嗍〉慕?jīng)歷，所以想在說技術(shù)前，說點(diǎn)別的。在制作網(wǎng)站前，一定要先構(gòu)思網(wǎng)站的內(nèi)容，很多人會說，我們當(dāng)然是先構(gòu)思的，不構(gòu)思怎么會想到做網(wǎng)站，但很多人的構(gòu)思都是表面的，在腦海里的，而不是形成文字的，其實(shí)有時，看上去很麻煩，很形式化的文字報告卻可以幫助我們理清很多自己以為清楚卻實(shí)際并不清楚的概念。這個在我自己剛工作時，也不能明白，感覺leader老要報告真麻煩，改一個小小的功能也要發(fā)報行，我直接修改只要15分鐘，但報告卻要我1個多小時的時間，現(xiàn)在知道了，這

4、是份很重要的依據(jù)，可以理清自己的想法，也能夠在后來項(xiàng)目開發(fā)的后期，再幫自己找到這個項(xiàng)目初期的開發(fā)的原因（寫得有點(diǎn)玄乎，但我相信做過項(xiàng)目的人都理解，項(xiàng)目到最后常常會變味的）。做網(wǎng)站先要出策劃圖，下面這個是策劃圖的示例圖.這是我從網(wǎng)上找的，感謝西喬同學(xué)的提供（由于工作的性質(zhì)，我不方便將自己的策劃圖公開，大家都懂的）。我平時一般用Axure RP做網(wǎng)站策劃圖，可以(ky)推薦給大家使用，有漢化版。但出策劃圖只是第一步，我手下的員工都知道我的要求，不管是改版還是新建頁面，草圖（我允許手畫版）一定要做一張，然后一定要用PhotoShop或FireWorks等圖片處理軟件將需要制作的界面布局設(shè)計出來，尤其

5、不能是因?yàn)橹皇切薷囊粋€小欄目就可以跳過。因?yàn)樽砸詾橹恍枰?分鐘的修改可能最終卻因?yàn)榉磸?fù)調(diào)整失敗后連最初的效果都恢復(fù)不了，最后造成整個頁面重新做的例子我看到太多，尤其是當(dāng)你的水平還不成熟(chngsh)時。所以一定要有設(shè)計圖，這個設(shè)計圖一定要很精致，一定要和你最終想得到的網(wǎng)頁效果一樣，不要敷衍自己。最后，最重要的來了，制作(zhzu)頁面最重要的一點(diǎn)就是全局性，以“模塊化”思維(swi)，將同樣的“模塊(m kui)”抽取出來，我見過很多人在制作網(wǎng)站時，為了有成就感，或?yàn)榱司W(wǎng)站運(yùn)營時間，或工程的壓力等很多原因，都會將一個頁面完成然后上線一個頁面，這樣的情況不僅限于小型的網(wǎng)站，很多大型成熟的網(wǎng)站也

6、會發(fā)生這樣不成熟的事情，多以網(wǎng)站改版時為多，修改channel頁面時只考慮channel頁面，首頁改版時只考慮首頁，結(jié)果經(jīng)過幾次改版之后，整個網(wǎng)站的頁面完全沒有了聯(lián)系，各自為政，造成很多不能刪除的冗余代碼，或者是技術(shù)上改動的困難，維護(hù)起來越來越辛苦。最后，最最重要的來了，制作頁面另一個最重要的一點(diǎn)就是要考慮程序員，一個網(wǎng)站最終還是需要程序員來將網(wǎng)站從靜態(tài)變成動態(tài)，有很多頁面制作人員在制作純HTML代碼時只考慮是不是還原了設(shè)計，是不是符合W3C的要求，卻忘記了程序員，結(jié)果HTML代碼完全不利于開發(fā)，造成程序代碼的冗余，頁面展示時間過長。這點(diǎn)也很需要注意的。下面我們先從如何將頁面模塊化開始，我們要

7、隨時保持一個模塊化的意識，其實(shí)網(wǎng)頁就是由一個盒子疊一個盒子組合而成。這里我們要引進(jìn)一個名詞css盒模型。css盒模型意思是DIV+CSS的重點(diǎn)。就是用DIV+CSS來代替表格布局，盒模型是和table布局的一個不同點(diǎn)。傳統(tǒng)的表格排版是通過大小不一的表格和表格嵌套來定位排版網(wǎng)頁內(nèi)容，改用CSS排版后，就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網(wǎng)頁。這種排版方式的網(wǎng)頁代碼簡潔，能兼容更多的瀏覽器，比如PDA設(shè)備也能正常瀏覽。學(xué)習(xí)web標(biāo)準(zhǔn)，首先要弄懂的就是這個盒模型，這就是DIV排版的核心所在。我們在網(wǎng)頁設(shè)計中常聽的屬性名：內(nèi)容(content)、填充(padding)、邊框(borde

8、r)、邊界(margin)， CSS盒子模式都具備這些屬性。下圖將這些屬性的關(guān)系表現(xiàn)出來margin，我們也稱之為：外邊距、外補(bǔ)丁；padding也可以稱為：內(nèi)邊距、內(nèi)補(bǔ)丁。這些名稱是制作人員必須要完全(wnqun)理解的。看下圖，我們仔細(xì)分析一下該圖，來規(guī)劃(guhu)一下頁面的布局.圖片大致分為以下幾個(j )模塊1、頂部部分，其中又包括了LOGO、MENU和一幅(y f)Banner圖片；2、內(nèi)容部分又可分為(fn wi)側(cè)邊欄、主體內(nèi)容；3、底部，包括一些版權(quán)信息。有了以上的分析，我們就可以很容易的布局了，我們設(shè)計層如下圖:根據(jù)上圖，我再畫了一個實(shí)際的頁面布局圖，說明一下層的嵌套關(guān)系，

9、這樣(zhyng)理解起來就會更簡單了。DIV結(jié)構(gòu)(jigu)如下：body /*這是一個HTML元素(yun s)，具體我就不說明了*/#Container /*頁面層容器*/#Header /*頁面頭部*/#PageBody /*頁面主體*/#Sidebar /*側(cè)邊欄*/#MainBody /*主體內(nèi)容*/#Footer /*頁面底部*/好了，大家明白最基本的頁面布局(bj)與規(guī)劃了嗎？下面我們會直接講各種頁面布局圖的嵌套關(guān)系的處理，都是一些最常見的網(wǎng)頁結(jié)構(gòu)，代碼和圖片由“標(biāo)準(zhǔn)(biozhn)之路”提供(tgng)同，感謝“標(biāo)準(zhǔn)之路”。DIV固定寬度上下二列居中顯示超級牛最詳細(xì)的Div+

10、CSS布局案例第一個例子只是告訴大家如何讓頁面居中，這個代碼的用處一般用來做背景圖，示例：http:/www.smarter.co.jp/，外圍是灰色的，當(dāng)中頁面的正文底是白色的，非常大氣。 這個例子主要講上下兩列，這是最常見的，也是最簡單的頁面表現(xiàn)形式，頭部放logo和banner，下面是主體內(nèi)容。CSS代碼如下：body font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;#container margin:0 auto; width:900px;background:#FFFFFF;padding:15px;#

11、header height:100px; background:#6cf; margin-bottom:5px;#mainContent height:300px; background:#cff;頁面代碼(di m)如下： 這是頭部 這是身體(shnt) 效果(xiogu)下圖顯示：點(diǎn)擊看大圖其中居中(jzhng)的關(guān)鍵是將“margin:0 auto;”寫在最大的背景(bijng)盒套中，寬度由#container決定。DIV1列固定寬度居中(jzhng)+頭部+尾部居中顯示超級牛最詳細(xì)的Div+CSS布局案例第二個例子是告訴大家如何讓頁面居中，如何加上頭部。這個例子加上了尾部，這也是一種

12、常見的頁面表現(xiàn)形式，頭部放logo和banner，中間是主體內(nèi)容，尾部放copyright等內(nèi)容。CSS代碼如下：body font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;#container margin:0 auto; width:900px;background:#FFFFFF;padding:15px;#header height:100px; background:#6cf; margin-bottom:5px;#mainContent height:300px; background:#cff; ma

13、rgin-bottom:5px;#footer height:60px; background:#6cf;頁面代碼如下： 這是頭部 這是主體 這是尾部效果下圖顯示：點(diǎn)擊看大圖其中居中(jzhng)的關(guān)鍵是將“margin:0 auto;”寫在最大的背景盒套中，寬度(kund)由#container決定。DIV1列固定寬度居中(jzhng)+頭部+導(dǎo)航+尾部超級牛最詳細(xì)的Div+CSS布局案例第三個例子是我們在頁面布局中加上了尾部(wi b)，但一個標(biāo)準(zhǔn)的網(wǎng)站都有導(dǎo)航。這個例子加上了導(dǎo)航，這是最常用的頁面表現(xiàn)形式，本次例子中還涉及了另三個要點(diǎn)，是很多朋友在CSS定義時經(jīng)常遇到的問題。CSS代碼(

14、di m)如下：body font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;pmargin:0;#container margin:0 auto; width:900px;background:#FFFFFF;padding:15px;#header height:100px; background:#6cf; margin-bottom:5px;#menu height:30px; background:#09c; margin-bottom:5px;line-height:30px#mainContent he

15、ight:300px; background:#cff; margin-bottom:5px;#footer height:60px; background:#6cf;頁面(y min)代碼如下： 這是頭部 這是導(dǎo)航 1列固定寬度居中+頭部+導(dǎo)航+尾部 這是尾部效果(xiogu)下圖顯示：點(diǎn)擊看大圖本例有三個關(guān)鍵(gunjin)要點(diǎn)1、p標(biāo)簽(bioqin)有默認(rèn)值一樣都是“margin-bottom:5px;”，如果仔細(xì)比較以前的示例，會發(fā)現(xiàn)，mainContent的上邊界比較寬，超出了5px，原因是mainContent里嵌套了一個?！皃margin:0;”是將的默認(rèn)值清空。一樣的代碼有b

16、ody, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, p, tdmargin:0; padding:0;p標(biāo)簽有默認(rèn)值為：pmargin:1em 0; /* p標(biāo)簽上下外間距為16px; */ul標(biāo)簽有默認(rèn)值為：ulpadding-left:40px;margin:1em 0; /* ul 標(biāo)簽上下外間距為16px;左內(nèi)間距為40px; */2、px和em的換算(hun sun)16px=1em12px=0.75em10px=0.625em3、文字(wnz)垂直對齊說到文字(wnz)垂直對齊，很多人第一反應(yīng)是vertica

17、l-align:middle; 但，其實(shí)如想設(shè)置文字垂直居中，那么一定要設(shè)置ling-height的屬性值和height值一樣，這樣才會使文字垂直居中，單獨(dú)設(shè)置vertical-align:middil是不會使文字垂直居中的。所以在“menu”的樣式定義中我沒有使用“vertical-align:middil”而是使用了“l(fā)ine-height:30px”。DIV2列固定寬度左窄右寬型+頭部超級牛最詳細(xì)的Div+CSS布局案例從這個例子開始，我們開始講左右的布局的CSS，DIV左右布局是CSS中最復(fù)雜的。CSS代碼如下：body font-family:Verdana; font-size:1

18、4px; margin:0;#container margin:0 auto; width:900px;#header height:100px; background:#6cf; margin-bottom:5px;#mainContent margin-bottom:5px;#sidebar float:left; width:200px; height:500px; background:#9ff;#content float:right; width:695px; height:500px; background:#cff;頁面代碼(di m)如下： 這是頭部 這是工具欄 2列固定(g

19、dng)寬度左窄右寬型+頭部 效果(xiogu)下圖顯示：點(diǎn)擊看大圖本居中(jzhng)的關(guān)鍵是一左一右“float:left; float:right;”DIV3列固定寬度居中+頭部超級牛最詳細(xì)的Div+CSS布局(bj)案例本例子講的是DIV中最復(fù)雜的DIV3列并排居中(jzhng)，這是DIV左右布局最復(fù)雜的，也是最難做的地方，很多新手都不能將三列并排顯示，其實(shí)DIV3列并排是非常簡單的。CSS代碼如下：body font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;#container margin:0 aut

20、o; width:900px;background:#FFFFFF;padding:15px;#header height:100px; background:#6cf; margin-bottom:5px;#mainContent height:300px; margin-bottom:5px;#sidebar float:left; width:200px; height:300px; background:#9ff;#sidebar2 float:right; width:200px; height:300px; background:#9ff;#content margin:0 205

21、px; height:300px; background:#cff;頁面代碼(di m)如下： 這是頭部 這是左列 這是右列 3列固定寬度(kund)居中+頭部 效果下圖顯示(xinsh)：點(diǎn)擊看大圖本例中的關(guān)鍵(gunjin)是先寫左右(zuyu)，再寫中間。DIV3列固定(gdng)寬度居中+頭部+導(dǎo)航+尾部超級牛最詳細(xì)的Div+CSS布局案例本例子將DIV3列并排居中配上頭部和尾部，這是國外BLOG經(jīng)常使用的格式。CSS代碼如下：body font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;#container

22、 margin:0 auto; width:900px;background:#FFFFFF;padding:15px;#header height:100px; background:#6cf; margin-bottom:5px;#menu height:30px; background:#09c; margin-bottom:5px;line-height:30px#mainContent height:300px; margin-bottom:5px;#sidebar float:left; width:200px; height:300px; background:#9ff;#sid

23、ebar2 float:right; width:200px; height:300px; background:#9ff;#content margin:0 205px; height:300px; background:#cff;#footer height:60px; background:#6cf;頁面(y min)代碼如下： 這是頭部 這是導(dǎo)航(dohng) 這是左列 這是右列 3列固定(gdng)寬度居中+頭部+尾部 這是尾部效果下圖顯示(xinsh)：點(diǎn)擊看大圖本例中的關(guān)鍵(gunjin)是先寫左右(zuyu)，再寫中間。DIV2列右窄左寬、高度自適應(yīng)+頭部+導(dǎo)航+尾部超級牛最詳

24、細(xì)的Div+CSS布局案例此例子與前面的例子的區(qū)別(qbi)在于當(dāng)正文的高度不統(tǒng)一時，怎么辦，這也是頁面DIV布局時經(jīng)常碰到的格式問題。CSS代碼(di m)如下：body font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;.clearfloat clear:both; height:0; font-size: 1px; line-height: 0px;#container margin:0 auto; width:900px;background:#FFFFFF;padding:15px;#header hei

25、ght:100px; background:#6cf; margin-bottom:5px;#menu height:30px; background:#09c; margin-bottom:5px; line-height:30px#mainContent #sidebar float:right; width:200px; background:#9ff; margin-bottom:5px;#content float:left; width:695px; background:#cff; margin-bottom:5px;#footer height:60px; background

26、:#6cf;頁面(y min)代碼如下： 這是頭部 這是導(dǎo)航 這是側(cè)邊欄 2列右窄左寬、高度自適應(yīng)+頭部+導(dǎo)航+尾部 這是尾部效果下圖顯示(xinsh)：點(diǎn)擊看大圖本例中的關(guān)鍵(gunjin)是。這句話是清除浮動用的，因?yàn)槲覀冊趆eader和menu內(nèi)設(shè)計時都可能涉及到浮動，還有sidebar欄和content，本身已經(jīng)浮動了，這樣如果content的高度沒有sidebar高時，footer會浮動到sidebar右側(cè)，造成整個頁面錯亂，采用(ciyng)這種方式可以有效避免錯亂。另外，sidebar和content分別采用左浮動和右浮動的方式，當(dāng)然也可以采用自適應(yīng)(shyng)寬度，將“sid

27、ebar”和“content”按顯示(xinsh)的次序擺放，2列右窄左寬、高度(god)自適應(yīng)+頭部+導(dǎo)航+尾部 這是側(cè)邊欄。將sidebar的css修改為#sidebar float:left; width:200px; background:#9ff; margin-bottom:5px;margin-left:5px;。DIV2列左窄右寬高度自適應(yīng)且未知高度底部平齊+頭部+導(dǎo)航+尾部超級牛最詳細(xì)的Div+CSS布局案例此例子與前面的例子的區(qū)別在于當(dāng)正文的高度不統(tǒng)一時，怎么辦，這也是頁面DIV布局時經(jīng)常碰到的格式問題。CSS代碼如下：body font-family:Verdana; f

28、ont-size:14px; margin:0;background:#E9E9E9;.clearfloat clear:both; height:0; font-size: 1px; line-height: 0px;#container margin:0 auto; width:900px;background:#FFFFFF;padding:15px;#header height:100px; background:#6cf; margin-bottom:5px;#menu height:30px; background:#09c; margin-bottom:5px; line-height:30px#mainContent #sidebar float:right; width:200px; background:#9ff; margin-bottom:5px;#content float:left; width:695px; background:#cff; margin-bottom:5