溫州網美科技有限公司-專注于溫州網站建設,溫州網站制作,溫州網站優化

客服電話
seo推廣,百度推廣,google推廣,yahoo推廣
您所在的位置:主頁 > > >網站推廣>>百度優化

關于DIV+CSS布局的技巧

發布時間:2015-1-10 10:15:04 閱讀次數:4623 信息來源:溫州網美科技有限公司

辦公自動化雜志在網頁制作中,TABLE 布局在所謂的WEB2.0 盛行前是比較流行的布局方式,甚至現在對于網頁制作初學者來說, TABLE 布局依然是一種很好的方式?;赥ABLE 布局具有搭建速度快、容易控制的特點,所以現在很多網絡公司給客戶制作網站(當然是在客戶沒有要求使用DIV+CSS 的情況下)還在使用TABLE 布局網頁。但是如今的網頁設計到了該考慮搜索引擎以及給用戶帶來更多的便利的時代,用DIV+CSS 進行網頁布局比用TABLE 布局將體現出更多的優勢。但是又由于 CSS 對不同瀏覽器存在兼容性問題,所以對于初學者來說,在使用DIV+CSS 進行網頁布局過程中可能會遇到各式各樣的問題,在這里給討論幾點DIV+CSS 布局的技巧。
 
二、DIV+CSS 網頁布局的分類
 
1、一列固定寬度一列布局是所有布局的基礎,也是最簡單的布局方式,用 DIV+CSS 布局的代碼如下:  XHTML 代碼:  一列固定寬度
CSS 代碼: #main1 { width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; } 
2、一列自適應寬度自適應的布局能夠根據瀏覽器窗口的大小自動改變其寬度和高度值,是網頁設計中一種非常靈活的布局形式,用 DIV+CSS 布局的代碼如下: XHTML 代碼:  一列自適應寬度
CSS 代碼: #main2 { width: 70%; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; } 
3、一列固定寬度居中頁面整體居中是網頁布局中最常見到形式,在傳統的表格布局中,使用TABLE 的align="center" 屬性來實現,在DIV+CSS 布局中采用如下代碼來實現: XHTML 代碼:  一列自適應寬度
CSS 代碼: DIV+CSS 網頁布局方法探析。如今的網頁設計考慮得更多的是搜索引擎以及給用戶帶來更多的便利,傳統的TABLE 網頁布局由于其龐大的HTML 代碼,使得其在搜索引擎方面顯得有些無能為力,而用DIV+CSS 進行網頁布局具有代碼精簡的優點使得其在這方面又體現出更多的優勢。但是又由于CSS 對不同瀏覽器存在兼容性問題,所以對于初學者來說,在使用DIV+CSS 進行網頁布局過程中可能會遇到各種問題,本文就給大家探討幾點DIV+CSS 布局的技巧。


  wk_ad_begin({pid : 21});wk_ad_after(21, function(){$('.ad-hidden').hide();}, function(){$('.ad-hidden').show();});  
 


 - 2 -
4、二列固定寬度在有一列固定寬度布局的基礎上,實現二列固定寬度也就很簡單了,用DIV+CSS 布局的代碼如下: XHTML 代碼:  左側 右側
CSS 代碼: #left { width: 150px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } #right{ width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } 
5、二列固定寬度居中從一列固定寬度居中的布局方法中,我們就不難完成二列固定寬度居中了,可以使用一個居中的DIV 作為容器,將二列分欄的DIV 放置在容器中,從而就實現二列的居中顯示。 DIV+CSS 的代碼如下: XHTML 代碼:  左側 右側
CSS 代碼: #main{ width:554px; margin:0px auto; #left { width: 150px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } #right{ width: 400px; height: 300px; background- color: #EEEEEE; border: 1px solid #999999; float:left; } 
這里僅列舉了一列、二列的布局方式,實際上三列、四列等多列的布局方式也和二列的布局方式的實現方法是一樣的。事實上不管多么復雜的頁面設計,在DIV+CSS 網頁布局中,均是以DIV 為基礎,通過一列、二列、三列這些基礎的布局方式的相互組合與嵌套來實現復雜的布局。 
 
三、CSS 對不同瀏覽器的兼容性解決辦法
 
由于CSS 在不同瀏覽器中存在兼容性問題,所以在使用 DIV+CSS 布局中,可能導致相同的內容在不同瀏覽器中出現不同的顯示效果,為了解決這些方面的問題,以下針對CSS 某些屬性的用法提出相應的一些解決辦法。 
1、頁面居中問題在IE 瀏覽器下,可以通過定義CSS 樣式body {text- align: center;}來實現頁面居中,但在FireFox(以下簡寫為FF)瀏覽器下此屬性就失效了。解決辦法:使用"margin- left: auto; margin- right : auto; " 
2、padding 屬性在不同瀏覽器的顯示問題當給DIV 設置padding 屬性后,在FF 瀏覽器中會導致 width 和height 增加(DIV 的實際寬度=DIV 寬+Padding), 但在 IE 瀏覽器中width 和height 不會增加,這就導致相同的內容在不同瀏覽器中出現不同的顯示效果。解決辦法:給DIV 設定IE、FF 兩個寬度,在IE 的寬度前加上IE 特有標記" * " 號。例如: #divwidth{ padding:5px; width:100px; *width:110px; } 
3、奇怪的間隙問題有的時候我們明明設好了高度,可在IE6 上卻看見一些奇怪的間隙。解決辦法:試試在有空隙的DIV 上加上"font- size:0px;" 
4、關于手形光標要將頁面內容的光標顯示為手形,通常的做法是使CSS 屬性cursor: hand; 但這于做法只適用于IE. 解決辦法:cursor: pointer; 
5、浮動在IE6 產生雙倍距離問題例如: #box{ float:left; width:100px; margin:0 0 0 100px; } 這種情況之下IE6 會產生200px 的距離。解決辦法:在以上屬性的基礎上,加上display:inline,使浮動忽略。 6、UL 和FORM標簽的padding 與margin ul 標簽在FF 中默認是有padding 值的, 而在IE 中只有 margin 默認有值。FORM標簽在IE 中,將會自動margin 一些邊距,而在FF 中margin
則是0;解決辦法:css 中首先都使用這樣的樣式ul,form{margin:0; padding:0;}。 
7、截字省略號 .hh { - o- text- overflow:ellipsis; text- overflow:ellipsis; white- space:nowrap; overflow:hidden; } 這個CSS 是定義當內容溢出寬度后會自行的截掉超出部分的文字,并以省略號結尾,但注意Firefox 并不支持。 
四、總結
以上討論的DIV+CSS 網頁布局的技巧,有所不足,但在網站建設與網頁設計過程

中,我認為不可盲目跟風,如何更有效、更合理的運用WEB2.0 設計標準,這需要很長時間的學習和鍛煉。而如何將DIV+CSS 運用的更好,我覺得這需要通過不斷的實踐和體驗,積累豐富的設計經驗,才能很好的掌握這門技術。

本文地址:http://www.beatribe.com/based_info.aspx?id=346


>>相關網站建設觀點

上一篇:修復 IE 下 PNG 圖片不能透明顯示的問題

下一篇:404錯誤是什么意思?為什么是404

在線客服

在線客戶咨詢客服1
在線客戶咨詢客服2
在線客戶咨詢客服3

在線熱線

137-777-66457

工作時間

周一至周日:9:00~18:00

欧洲成本人网站