超級(jí)牛最詳細(xì)的Div+CSS布局案例(共28頁(yè))

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

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

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

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

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

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

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

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

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

10、CSS布局案例第一個(gè)例子只是告訴大家如何讓頁(yè)面居中，這個(gè)代碼的用處一般用來(lái)做背景圖，示例：http:/www.smarter.co.jp/，外圍是灰色的，當(dāng)中頁(yè)面的正文底是白色的，非常大氣。 這個(gè)例子主要講上下兩列，這是最常見(jiàn)的，也是最簡(jiǎn)單的頁(yè)面表現(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;頁(yè)面代碼(di m)如下： 這是頭部 這是身體(shnt) 效果(xiogu)下圖顯示：點(diǎn)擊看大圖其中居中(jzhng)的關(guān)鍵是將“margin:0 auto;”寫(xiě)在最大的背景(bijng)盒套中，寬度由#container決定。DIV1列固定寬度居中(jzhng)+頭部+尾部居中顯示超級(jí)牛最詳細(xì)的Div+CSS布局案例第二個(gè)例子是告訴大家如何讓頁(yè)面居中，如何加上頭部。這個(gè)例子加上了尾部，這也是一種

12、常見(jiàn)的頁(yè)面表現(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;頁(yè)面代碼如下： 這是頭部 這是主體 這是尾部效果下圖顯示：點(diǎn)擊看大圖其中居中(jzhng)的關(guān)鍵是將“margin:0 auto;”寫(xiě)在最大的背景盒套中，寬度(kund)由#container決定。DIV1列固定寬度居中(jzhng)+頭部+導(dǎo)航+尾部超級(jí)牛最詳細(xì)的Div+CSS布局案例第三個(gè)例子是我們?cè)陧?yè)面布局中加上了尾部(wi b)，但一個(gè)標(biāo)準(zhǔn)的網(wǎng)站都有導(dǎo)航。這個(gè)例子加上了導(dǎo)航，這是最常用的頁(yè)面表現(xiàn)形式，本次例子中還涉及了另三個(gè)要點(diǎn)，是很多朋友在CSS定義時(shí)經(jīng)常遇到的問(wèn)題。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è)面(y min)代碼如下： 這是頭部 這是導(dǎo)航 1列固定寬度居中+頭部+導(dǎo)航+尾部 這是尾部效果(xiogu)下圖顯示：點(diǎn)擊看大圖本例有三個(gè)關(guān)鍵(gunjin)要點(diǎn)1、p標(biāo)簽(bioqin)有默認(rèn)值一樣都是“margin-bottom:5px;”，如果仔細(xì)比較以前的示例，會(huì)發(fā)現(xiàn)，mainContent的上邊界比較寬，超出了5px，原因是mainContent里嵌套了一個(gè)。“pmargin: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)垂直對(duì)齊說(shuō)到文字(wnz)垂直對(duì)齊，很多人第一反應(yīng)是vertica

17、l-align:middle; 但，其實(shí)如想設(shè)置文字垂直居中，那么一定要設(shè)置ling-height的屬性值和height值一樣，這樣才會(huì)使文字垂直居中，單獨(dú)設(shè)置vertical-align:middil是不會(huì)使文字垂直居中的。所以在“menu”的樣式定義中我沒(méi)有使用“vertical-align:middil”而是使用了“l(fā)ine-height:30px”。DIV2列固定寬度左窄右寬型+頭部超級(jí)牛最詳細(xì)的Div+CSS布局案例從這個(gè)例子開(kāi)始，我們開(kāi)始講左右的布局的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;頁(yè)面代碼(di m)如下： 這是頭部 這是工具欄 2列固定(g

19、dng)寬度左窄右寬型+頭部 效果(xiogu)下圖顯示：點(diǎn)擊看大圖本居中(jzhng)的關(guān)鍵是一左一右“float:left; float:right;”DIV3列固定寬度居中+頭部超級(jí)牛最詳細(xì)的Div+CSS布局(bj)案例本例子講的是DIV中最復(fù)雜的DIV3列并排居中(jzhng)，這是DIV左右布局最復(fù)雜的，也是最難做的地方，很多新手都不能將三列并排顯示，其實(shí)DIV3列并排是非常簡(jiǎn)單的。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;頁(yè)面代碼(di m)如下： 這是頭部 這是左列 這是右列 3列固定寬度(kund)居中+頭部 效果下圖顯示(xinsh)：點(diǎn)擊看大圖本例中的關(guān)鍵(gunjin)是先寫(xiě)左右(zuyu)，再寫(xiě)中間。DIV3列固定(gdng)寬度居中+頭部+導(dǎo)航+尾部超級(jí)牛最詳細(xì)的Div+CSS布局案例本例子將DIV3列并排居中配上頭部和尾部，這是國(guó)外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è)面(y min)代碼如下： 這是頭部 這是導(dǎo)航(dohng) 這是左列 這是右列 3列固定(gdng)寬度居中+頭部+尾部 這是尾部效果下圖顯示(xinsh)：點(diǎn)擊看大圖本例中的關(guān)鍵(gunjin)是先寫(xiě)左右(zuyu)，再寫(xiě)中間。DIV2列右窄左寬、高度自適應(yīng)+頭部+導(dǎo)航+尾部超級(jí)牛最詳

24、細(xì)的Div+CSS布局案例此例子與前面的例子的區(qū)別(qbi)在于當(dāng)正文的高度不統(tǒng)一時(shí)，怎么辦，這也是頁(yè)面DIV布局時(shí)經(jīng)常碰到的格式問(wèn)題。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è)面(y min)代碼如下： 這是頭部 這是導(dǎo)航 這是側(cè)邊欄 2列右窄左寬、高度自適應(yīng)+頭部+導(dǎo)航+尾部 這是尾部效果下圖顯示(xinsh)：點(diǎn)擊看大圖本例中的關(guān)鍵(gunjin)是。這句話(huà)是清除浮動(dòng)用的，因?yàn)槲覀冊(cè)趆eader和menu內(nèi)設(shè)計(jì)時(shí)都可能涉及到浮動(dòng)，還有sidebar欄和content，本身已經(jīng)浮動(dòng)了，這樣如果content的高度沒(méi)有sidebar高時(shí)，footer會(huì)浮動(dòng)到sidebar右側(cè)，造成整個(gè)頁(yè)面錯(cuò)亂，采用(ciyng)這種方式可以有效避免錯(cuò)亂。另外，sidebar和content分別采用左浮動(dòng)和右浮動(dòng)的方式，當(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)航+尾部超級(jí)牛最詳細(xì)的Div+CSS布局案例此例子與前面的例子的區(qū)別在于當(dāng)正文的高度不統(tǒng)一時(shí)，怎么辦，這也是頁(yè)面DIV布局時(shí)經(jīng)常碰到的格式問(wèn)題。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