DIV+CSS網(wǎng)頁(yè)布局技巧實(shí)例

1、DIV+CSS網(wǎng)頁(yè)布局技巧實(shí)例1：設(shè)置網(wǎng)頁(yè)整體居中的代碼以前用表格布局時(shí)設(shè)置網(wǎng)頁(yè)居中非常方便，把表格對(duì)齊方式設(shè)置為居中就行了，就這么簡(jiǎn)單，現(xiàn)在呢，用DIV+CSS樣式表控制，好像不是那么容易了，其實(shí)也很簡(jiǎn)單，只不過(guò)方式不同而已。#layout width:778px; margin:0 auto; text-align:center;標(biāo)準(zhǔn)之路請(qǐng)看這段代碼，寬度為適合800600分辨率瀏覽器的寬度，margin:0 auto; 這句代碼就是讓居中了，意思是外邊距上下設(shè)置為0，左右設(shè)為自動(dòng)。這樣它就居中了。那么可能你要問(wèn)了，text-align:center;為什么還要讓內(nèi)容居中呢？呵呵，別著急，

2、這句是為了適應(yīng)IE6以下版本的瀏覽器而加的，IE6以下對(duì)margin:0 auto;不能解析為居中，所以用這種方式來(lái)補(bǔ)救，以下在設(shè)計(jì)內(nèi)容時(shí)再用 text-align:left;就可以了。注：margin和padding的值的順序?yàn)轫槙r(shí)針上右下左，如margin:1px 2px 3px 4px;還可以縮寫(xiě)為上下、左右，如本例，如果為margin:0px;則是各邊都為0提示：可以先修改部分代碼后再運(yùn)行DIV+CSS網(wǎng)頁(yè)布局技巧實(shí)例2：設(shè)置容器中的內(nèi)容垂直居中如實(shí)例1設(shè)置網(wǎng)頁(yè)整體居中的代碼中內(nèi)容是居容器的頂部的，而在表格布局時(shí)默認(rèn)是垂直居中的，當(dāng)我們需要垂直居中的時(shí)候該怎么辦呢？別害怕，跟我來(lái)，也是

3、比較簡(jiǎn)單的，只用設(shè)置容器內(nèi)的行高就行了。line-height:500px;提示：可以先修改部分代碼后再運(yùn)行這是一種方法，另外和種方法就是設(shè)置的它內(nèi)邊距padding了，自己可以試試喲 DIV+CSS網(wǎng)頁(yè)布局技巧實(shí)例3：設(shè)置層的透明度有時(shí)候我們需要用到層的透明度，把下邊的背景透出來(lái)，如下圖：這種半透明的形式在blog上應(yīng)用比較廣泛，那么這種效果是怎么做出來(lái)的呢？用JS，NO,NO，既然我們是CSS布局教程，那么就盡量用CSS來(lái)解決問(wèn)題！filter: alpha(opacity=70); opacity: 0.7;把這兩句代碼加入到要實(shí)現(xiàn)半透明層的CSS樣式表里即可，簡(jiǎn)單吧！注：70和0.7的

4、值可改為你需要的提示：可以先修改部分代碼后再運(yùn)行本文來(lái)自：使用縮寫(xiě)可以幫助減少你CSS文件的大小，更加容易閱讀。css縮寫(xiě)的主要規(guī)則請(qǐng)參看常用css縮寫(xiě)語(yǔ)法總結(jié)，css縮寫(xiě)的主要規(guī)則如下：顏色16進(jìn)制的色彩值，如果每?jī)晌坏闹迪嗤?，可以縮寫(xiě)一半，例如：#000000可以縮寫(xiě)為#000;#336699可以縮寫(xiě)為#369;注意:在同一個(gè)CSS配置節(jié)中，不要交錯(cuò)使用全寫(xiě)和縮寫(xiě)的顏色配置，在系統(tǒng)資源極低時(shí)，會(huì)導(dǎo)致瀏覽器渲染失敗。盒尺寸通常有下面四種書(shū)寫(xiě)方法: property:value1; 表示所有邊都是一個(gè)值value1； property:value1 value2; 表示top和bottom的值

5、是value1,right和left的值是value2 property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3 property:value1 value2 value3 value4; 四個(gè)值依次表示top,right,bottom,left 方便的記憶方法是順時(shí)針，上右下左。具體應(yīng)用在margin和padding的例子如下：margin:1em 0 2em 0.5em;邊框(border)邊框的屬性如下： border-width:1px; border-style:solid; b

6、order-color:#000; 可以縮寫(xiě)為一句：border:1px solid #000;語(yǔ)法是border:width style color;背景(Backgrounds)背景的屬性如下： background-color:#f00; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:0 0; 可以縮寫(xiě)為一句：background:#f00 url(background.gif) no-repeat fi

7、xed 0 0;語(yǔ)法是background:color image repeat attachment position;你可以省略其中一個(gè)或多個(gè)屬性值，如果省略，該屬性值將用瀏覽器默認(rèn)值，默認(rèn)值為： color: transparent image: none repeat: repeat attachment: scroll position: 0% 0% 字體(fonts)字體的屬性如下： font-style:italic; font-variant:small-caps; font-weight:bold; font-size:1em; line-height:140%; font-

8、family:Lucida Grande,sans-serif; 可以縮寫(xiě)為一句：font:italic small-caps bold 1em/140% Lucida Grande,sans-serif;注意，如果你縮寫(xiě)字體定義，至少要定義font-size和font-family兩個(gè)值。列表(lists)取消默認(rèn)的圓點(diǎn)和序號(hào)可以這樣寫(xiě)list-style:none;,list的屬性如下: list-style-type:square; list-style-position:inside; list-style-image:url(image.gif); 可以縮寫(xiě)為一句：list-styl

9、e:square inside url(image.gif);本文來(lái)自：忘記定義尺寸的單位是CSS新手普遍的錯(cuò)誤。在HTML中你可以只寫(xiě)width=100，但是在CSS中，你必須給一個(gè)準(zhǔn)確的單位，比如：width:100px width:100em。只有兩個(gè)例外情況可以不定義單位：行高和0值。除此以外，其他值都必須緊跟單位，注意，不要在數(shù)值和單位之間加空格。DIV+CSS網(wǎng)頁(yè)布局技巧實(shí)例6：區(qū)分大小寫(xiě)當(dāng)在XHTML中使用CSS，CSS里定義的元素名稱(chēng)是區(qū)分大小寫(xiě)的。為了避免這種錯(cuò)誤，我建議所有的定義名稱(chēng)都采用小寫(xiě)。class和id的值在HTML和XHTML中也是區(qū)分大小寫(xiě)的，如果你一定要大小寫(xiě)

10、混合寫(xiě)，請(qǐng)仔細(xì)確認(rèn)你在CSS的定義和XHTML里的標(biāo)簽是一致的。DIV+CSS網(wǎng)頁(yè)布局技巧實(shí)例7：取消class和id前的元素限定當(dāng)你寫(xiě)給一個(gè)元素定義class或者id，你可以省略前面的元素限定，因?yàn)镮D在一個(gè)頁(yè)面里是唯一的，而clas s可以在頁(yè)面中多次使用。你限定某個(gè)元素毫無(wú)意義。例如：div#content /* declarations */ fieldset.details /* declarations */ 可以寫(xiě)成#content /* declarations */ .details /* declarations */ 這樣可以節(jié)省一些字節(jié)。DIV+CSS網(wǎng)頁(yè)布局技巧實(shí)例8

11、：元素屬性的默認(rèn)值通常padding的默認(rèn)值為0，background-color的默認(rèn)值是transparent。但是在不同的瀏覽器默認(rèn)值可能不同。如果怕有沖突，可以在樣式表一開(kāi)始就先定義所有元素的margin和padding值都為0，象這樣：* margin:0; padding:0; DIV+CSS網(wǎng)頁(yè)布局技巧實(shí)例9：不需要重復(fù)定義可繼承的值CSS中，子元素自動(dòng)繼承父元素的屬性值，象顏色、字體等，已經(jīng)在父元素中定義過(guò)的，在子元素中可以直接繼承，不需要重復(fù)定義。但是要注意，瀏覽器可能用一些默認(rèn)值覆蓋你的定義。提示：可以先修改部分代碼后再運(yùn)行DIV+CSS網(wǎng)頁(yè)布局技巧實(shí)例10：最近優(yōu)先原則如

12、果對(duì)同一個(gè)元素的定義有多種，以最接近(最小一級(jí))的定義為最優(yōu)先，例如有這么一段代碼Update: Lorem ipsum dolor set在CSS文件中，你已經(jīng)定義了元素p，又定義了一個(gè)classupdatep margin:1em 0; font-size:1em; color:#333; .update font-weight:bold; color:#600; 這兩個(gè)定義中，class=update將被使用，因?yàn)閏lass比p更近。你可以查閱W3C的 Calculating a selectors specificity 了解更多。DIV+CSS網(wǎng)頁(yè)布局技巧實(shí)例11：多重class定義

13、一個(gè)標(biāo)簽可以同時(shí)定義多個(gè)class。例如：我們先定義兩個(gè)樣式，第一個(gè)樣式背景為#666；第二個(gè)樣式有10 px的邊框。.onewidth:200px;background:#666;.twoborder:10px solid #F00; 在頁(yè)面代碼中，我們可以這樣調(diào)用 這樣最終的顯示效果是這個(gè)div既有#666的背景，也有10px的邊框。是的，這樣做是可以的，你可以嘗試一下。DIV+CSS網(wǎng)頁(yè)布局技巧實(shí)例12：使用子選擇器使用子選擇器(descendant selectors)CSS初學(xué)者不知道使用子選擇器是影響他們效率的原因之一。子選擇器可以幫助你節(jié)約大量的class定義。我們來(lái)看下面這段代

14、碼： Item 1 Item 1 Item 1 這段代碼的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 styl

15、ing */ 你可以用下面的方法替代上面的代碼 Item 1 Item 1 Item 1 樣式定義是：#subnav /* Some styling */ #subnav li /* Some styling */ #subnav a /* Some styling */ #subnav .sel /* Some styling */ #subnav .sel a /* Some styling */ 用子選擇器可以使你的代碼和CSS更加簡(jiǎn)潔、更加容易閱讀。DIV+CSS網(wǎng)頁(yè)布局技巧實(shí)例13：不需要給背景圖片路徑加引號(hào)為了節(jié)省字節(jié)，我建議不要給背景圖片路徑加引號(hào)，因?yàn)橐?hào)不是必須的。例如：ba

16、ckground:url(images/*.gif) #333; 可以寫(xiě)為background:url(images/*.gif) #333; 如果你加了引號(hào)，反而會(huì)引起一些瀏覽器的錯(cuò)誤。DIV+CSS網(wǎng)頁(yè)布局技巧實(shí)例14：組選擇器組選擇器(Group selectors)當(dāng)一些元素類(lèi)型、class或者id都有共同的一些屬性，你就可以使用組選擇器來(lái)避免多次的重復(fù)定義。這可以節(jié)省不少字節(jié)。例如：定義所有標(biāo)題的字體、顏色和margin，你可以這樣寫(xiě)：h1,h2,h3,h4,h5,h6 font-family:Lucida Grande,Lucida,Arial,Helvetica,sans-ser

17、if; color:#333; margin:1em 0; 如果在使用時(shí)，有個(gè)別元素需要定義獨(dú)立樣式，你可以再加上新的定義，可以覆蓋老的定義，例如：h1 font-size:2em; h2 font-size:1.6em; DIV+CSS網(wǎng)頁(yè)布局技巧實(shí)例15：用正確的順序指定鏈接的樣式當(dāng)你用CSS來(lái)定義鏈接的多個(gè)狀態(tài)樣式時(shí)，要注意它們書(shū)寫(xiě)的順序，正確的順序是：:link :visited :hover :active。抽取第一個(gè)字母是LVHA，你可以記憶成LoVe HAte(喜歡討厭)。為什么這么定義，可以參考Eric Meyer的Link Specificity。如果你的用戶需要用鍵盤(pán)來(lái)控制

18、，需要知道當(dāng)前鏈接的焦點(diǎn)，你還可以定義:focus屬性。:focus屬性的效果也取決與你書(shū)寫(xiě)的位置，如果你希望聚焦元素顯示:hover效果，你就把:focus寫(xiě)在:hover前面；如果你希望聚焦效果替代:hover效果，你就把:focus放在:hover后面。DIV+CSS網(wǎng)頁(yè)布局技巧實(shí)例16：清除浮動(dòng)一個(gè)非常常見(jiàn)的CSS問(wèn)題，定位使用浮動(dòng)的時(shí)候，下面的層被浮動(dòng)的層所覆蓋，或者層里嵌套的子層超出了外層的范圍。通常的解決辦法是在浮動(dòng)層后面添加一個(gè)額外元素，例如一個(gè)div或者一個(gè)br，并且定義它的樣式為clear: both。這個(gè)辦法有一點(diǎn)牽強(qiáng)，幸運(yùn)的是還有一個(gè)好辦法可以解決，參看這篇文章How

19、To Clear Floats Without Structural Markup。上面2種方法可以很好解決浮動(dòng)超出的問(wèn)題，但是如果當(dāng)你真的需要對(duì)層或者層里的對(duì)象進(jìn)行clear的時(shí)候怎么辦？一種簡(jiǎn)單的方法就是用overflow屬性，這個(gè)方法最初的發(fā)表在Simple Clearing of Floats，又在Clearance和Super simple clearing floats中被廣泛討論。上面那一種clear方法更適合你，要看具體的情況，這里不再展開(kāi)論述。另外關(guān)于float的應(yīng)用，一些優(yōu)秀的文章已經(jīng)說(shuō)得很清楚，推薦你閱讀：Floatutorial、Containing Floats和Fl

20、oat Layouts本人的方法是在樣式表中加入這句代碼：.clearfloat clear:both;height:0;font-size: 1px;line-height: 0px;然后在頁(yè)面中需要清除浮動(dòng)的地方加入：本文來(lái)自：DIV+CSS網(wǎng)頁(yè)布局技巧實(shí)例17：橫向居中(centering)這是一個(gè)簡(jiǎn)單的技巧，但是值得再說(shuō)一遍，因?yàn)槲铱匆?jiàn)太多的新手問(wèn)題都是問(wèn)這個(gè)：CSS如何橫向居中？你需要定義元素的寬，并且定義橫向的margin，如果你的布局包含在一個(gè)層(容器)中，就象這樣：你可以這樣定義使它橫向居中：#wrap width:760px; /* 修改為你的層的寬度 */ margin:0

21、 auto; 但是IE5/Win不能正確顯示這個(gè)定義，我們采用一個(gè)非常有用的技巧來(lái)解決：用text-align屬性。就象這樣：body text-align:center; #wrap width:760px; /* 修改為你的層的寬度 */ margin:0 auto; text-align:left; 第一個(gè)body的text-align:center; 規(guī)則定義IE5/Win中body的所有元素居中(其他瀏覽器只是將文字居中) ，第二個(gè)text-align:left;是將#warp中的文字居左。DIV+CSS網(wǎng)頁(yè)布局技巧實(shí)例18：導(dǎo)入(Import)和隱藏CSS因?yàn)槔习姹緸g覽器不支持CS

22、S，一個(gè)通常的做法是使用import技巧來(lái)把CSS隱藏起來(lái)。例如：import url(main.css); 然而，這個(gè)方法對(duì)IE4不起作用，這讓我很是頭疼了一陣子。后來(lái)我用這樣的寫(xiě)法：import main.css; 這樣就可以在IE4中也隱藏CSS了，呵呵，還節(jié)省了5個(gè)字節(jié)呢。想了解import語(yǔ)法的詳細(xì)說(shuō)明，可以看這里centricles css filter chartDIV+CSS網(wǎng)頁(yè)布局技巧實(shí)例19：用css hack針對(duì)IE的優(yōu)化有些時(shí)候，你需要對(duì)IE瀏覽器的bug定義一些特別的規(guī)則，這里有太多的CSS技巧(Hacks)，我只使用其中的兩種方法，這兩種方法都是最安全的。1、注釋的

23、方法 (a)在IE中隱藏一個(gè)CSS定義，你可以使用子選擇器(child selector):htmlbody p /* 定義內(nèi)容 */ (b)下面這個(gè)寫(xiě)法只有IE瀏覽器可以理解(對(duì)其他瀏覽器都隱藏) * html p /* declarations */ (c)還有些時(shí)候，你希望IE/Win有效而IE/Mac隱藏，你可以使用反斜線技巧：/* */ * html p declarations /* */ 2、條件注釋(conditional comments)的方法 另外一種方法，我認(rèn)為比CSSHacks更加經(jīng)得起考驗(yàn)就是采用微軟的私有屬性條件注釋(conditional comments)。用這個(gè)方法你可以給IE單獨(dú)定義一些樣式，而不影