運(yùn)用DIVCSS網(wǎng)頁布局的方法

1、 運(yùn)用 DIV+CSS網(wǎng)頁布局的方法摘 要:在網(wǎng)頁設(shè)計中網(wǎng)頁各元素的布局是一項十分重要的內(nèi) 容之一,在傳統(tǒng)的網(wǎng)頁布局中是運(yùn)用 table 進(jìn)行調(diào)理網(wǎng)頁各元素, 而對于復(fù)雜的布局來說,它遠(yuǎn)遠(yuǎn)不能適應(yīng)網(wǎng)頁設(shè)計的要求 , 由此 div+css技術(shù)就可以很好的解決復(fù)雜網(wǎng)頁的布局。關(guān)鍵詞: div; css ;布局0 引言在傳統(tǒng)的網(wǎng)頁制作方法中是運(yùn)用 table 進(jìn)行布局,它學(xué)習(xí)起來方 便而且很簡單,并且布局具有搭建速度快、容易控制的特點,所以 現(xiàn)在對于網(wǎng)頁制作初學(xué)者來說, table 布局仍然是一種很好的方式。 但是如今的網(wǎng)頁設(shè)計的布局都十分的復(fù)雜,并且適應(yīng)網(wǎng)頁的美觀 度,運(yùn)用 div+css進(jìn)行網(wǎng)頁

2、布局比運(yùn)用 table 布局有很多的優(yōu)勢。 可是由于 css 對于不同的瀏覽器存在著兼容性問題,所以在運(yùn)用 div+css設(shè)計網(wǎng)頁時可能會出現(xiàn)這樣或那樣的問題,為此在這里給 討論幾點運(yùn)用 div+css設(shè)計網(wǎng)面的方法。1 網(wǎng)頁中的列布局在網(wǎng)頁設(shè)計的過程中,列的布局是十分重要的,它布局是否合理 是斷定網(wǎng)頁是否美觀的一項重要的要素之一。1.1 一列固定寬度在網(wǎng)頁中一列的固定是最簡單的布局方式,在插入一個 div 標(biāo)簽 之后運(yùn)用 css 代碼就可以控制 div 標(biāo)簽的樣式。css 代碼:#linewidth:500px;height:700px; background-color:#00ee00;b

3、order:1px solid#88cc88;1.2 一列固定寬度居中在以往的頁面設(shè)計中, 運(yùn)用 table 來進(jìn)行居中布局時, 運(yùn)用 table 中的屬性 align=” center ”來實現(xiàn),而 css 中的 margin 屬性來設(shè) 計就可以解決這一問題。在網(wǎng)頁中插入一個 div 標(biāo)簽之后運(yùn)用 css 代碼就可以控制 div 標(biāo)簽的樣式。采用如下代碼來實現(xiàn):css 代碼:#line width: 500px; height: 700px; background- color: #00ee00; border: 1px solid #88cc88;margin: auto; 1.3 一列自

4、適應(yīng)寬度由于瀏覽器的大小不同,所以設(shè)計出的網(wǎng)頁也應(yīng)該適應(yīng)瀏覽器的 大小,在網(wǎng)頁設(shè)計中也是一項重要的內(nèi)容。 div+css中的自適應(yīng)的 布局能夠根據(jù)瀏覽器窗口的大小自動改變其寬度和高度值,是網(wǎng)頁 設(shè)計中一種非常靈活的布局形式,在網(wǎng)頁中插入一個 div 標(biāo)簽之后 運(yùn)用 css 代碼就可以控制 div 標(biāo)簽的樣式。css 代碼:#line width: 80%; height: 95%; background- color: #00ee00; border: 1px solid #88cc88;1.4 一列、多塊布局一般的網(wǎng)頁布局分為上中下結(jié)構(gòu),即:頭部、中間主體和腳部。 我們可以用三塊 div 來

5、對網(wǎng)頁進(jìn)行劃分,分別給它們起名為:頭部 (header 、主體(maincontent 、腳部(footer 。css 代碼:#header margin:5px auto; width:500px; height:80px; background:#00ee00;#main margin:5px auto;width:500px; height:400px;background:#00ee00;#footer margin:5px auto;width:500px; height:80px; background: #00ee00; 這里只說明了這四種常用的布局方法,但不管多么復(fù)雜的頁面設(shè)

6、計,運(yùn)用 div+css網(wǎng)頁布局中,均是以 div 為基礎(chǔ),通過一列、二 列、多列這些基礎(chǔ)的布局方法的相互組合和嵌套使用來實現(xiàn)復(fù)雜的 布局。使得網(wǎng)頁的布局更加的合理和美觀。2 運(yùn)用 css 來兼容不同的瀏覽器由于瀏覽器層出不窮, css 在不同瀏覽器就會出現(xiàn)存在兼容性的問 題,所以在使用 div+css布局中,可能導(dǎo)致相同的內(nèi)容在不同瀏覽 器中出現(xiàn)不同的顯示效果,為解決這些方面的問題,提出以下幾點 解決方法。2.1 運(yùn)用 !important 來實現(xiàn) ie 和 firefox 的 css 的兼容相同寬度和高度的層在有邊框的情況下,其顯示方式就有區(qū)別。 在 ie 瀏覽器中顯示為 css 所定義的

7、寬度和高度,而 firefox 中顯 示的是 css 中定義的寬度和高度加上邊框的大小, css 代碼如下: #wrapperwidth:100px!important;/*ie7+firfox*/width:80px;/*ie6*/這樣就可以解 決 ie 和 firfox 的兼容問題。2.2 頁面居中問題在 ie 瀏覽器下, 頁面居中可以通過 bodytext- align: center; 來實現(xiàn)或者在 div 中設(shè)置 align屬性來設(shè)置, 而 firefox 瀏覽器下 此屬性就失效了, 可以通過 margin 來設(shè)置頁面的居中。 css 代碼如 下:body text-align: c

8、enter;#center margin-right: auto; margin-left: auto; 2.3 運(yùn)用 javascript 判斷瀏覽器來選擇不同的 css 文件用戶在瀏覽網(wǎng)頁時會選擇不同的瀏覽器,所以對于網(wǎng)頁設(shè)計者就 必須考慮使用什么樣的 css 樣式來滿足不同的瀏覽器。用戶使用不 同的瀏覽器查看網(wǎng)頁時,只需根據(jù)設(shè)計者提供的樣式表文件來達(dá)到 理想的顯示效果,但這對設(shè)計者來說卻不是件輕松的事,可以在網(wǎng) 頁文件的 html 代碼中之間加上判斷語句:2.4 padding屬性對于不同的瀏覽器其顯示也不一樣,當(dāng)設(shè)置 div 的 padding 屬性 后,在 firefox 瀏覽器中會

9、導(dǎo)致 width 和 height 增加,原因如以 第一個問題一樣即 div 的實際寬度 =div寬 +padding,但在 ie 瀏覽 器中 width 和 height 不會增加,這就導(dǎo)致相同的內(nèi)容在不同瀏覽 器中出現(xiàn)不同的顯示效果。 解決辦法:可以為 div 設(shè)定 ie 、 firefox 兩個寬度,在 ie 的寬度前加上 ie 特有標(biāo)記” *”號。例如: #divwidthpadding:5px;width:100px; *width:105px;這比 !important 更安全可靠。2.5 關(guān)于手形光標(biāo) 要將頁面內(nèi)容的光標(biāo)顯示為手形,通常的做法是使 css 屬性 cursor:ha

10、nd; 但這于做法只適用于 ie 解決辦法:cursor:pointer。2.6 浮動 ie6產(chǎn)生的雙倍距離例如:#boxfloat:left; width:100px; margin:0 0 0 100px;這種情況之下 ie6會產(chǎn)生 200px 的距離。解決辦法:在以上屬性的 基礎(chǔ)上,加上 display:inline,使浮動忽略。2.7 ul和 form 標(biāo)簽的 padding 與 margin ul標(biāo)簽在 firefox 中默認(rèn)是有 padding 值的 , 而在 ie 中只有 margin 默認(rèn) 有值。 form 標(biāo)簽在 ie 中 , 將會自動 margin 一些邊距 , 而在 firefox 中 margin 則是 0;解決辦法:css 中首先都使用這樣的樣式 ul,formmargin:0;padding:0;。3 總結(jié)以上討論的 div+css網(wǎng)頁布局的方法只是在網(wǎng)頁設(shè)計中所遇到的 常見問題。在網(wǎng)頁設(shè)計的過程中運(yùn)用各種方法來實現(xiàn)網(wǎng)頁的合理布 局是網(wǎng)站建設(shè)過程中的重要內(nèi)容之一。如何更有效、更合理的運(yùn)用 web2.0設(shè)計標(biāo)準(zhǔn), 這需要很