征集網銳志網絡淘途找素材上91
創意在線首頁
平面設計交互設計CG動漫工業設計建筑環境數碼影像創意搜
 首頁大賽征集資訊教程畫廊訪談作品集創企同盟設計招聘人才專區競賽臺專題論吧 找素材看酷站設計網址庫
教程網 Illustrator、Photoshop、CoreaDreaw、AI教程、PS教程
當前位置:首頁 > 教程 > HTML/CSS > 正文
應用DIV+CSS編碼時容易犯的一些錯誤
作者: 來源: 發表時間:2010-5-17 14:30:33 瀏覽:
CSS+DIV是網站標準(或稱“WEB標準”)中常用的術語之一,通常為了說明與HTML網頁設計語言中的表格(table)定位方式的區別,因為XHTML網站設計標準中,不再使用表格定位技術,而是采用css+div的方式實現各種定位。應用應用DIV+CSS編碼時很容易犯一些錯誤。本文列舉了一些常見的錯誤:

  1. 檢查HTML元素是否有拼寫錯誤、是否忘記結束標記

  即使是老手也經常會弄錯div的嵌套關系。可以用dreamweaver的驗證功能檢查一下有無錯誤。

  2. 檢查CSS是否正確

  檢查一下有無拼寫錯誤、是否忘記結尾的 } 等。可以利用CleanCSS來檢查 CSS的拼寫錯誤。CleanCSS本是為CSS減肥的工具,但也能檢查出拼寫錯誤。

  3. 確定錯誤發生的位置

  如果錯誤影響了整體布局,則可以逐個刪除div塊,直到刪除某個div塊后顯示恢復正常,即可確定錯誤發生的位置。

  4. 利用border屬性確定出錯元素的布局特性

  使用float屬性布局一不小心就會出錯。這時為元素添加border屬性確定元素邊界,錯誤原因即水落石出。

  5. float元素的父元素不能指定clear屬性

  MacIE下如果對float的元素的父元素使用clear屬性,周圍的float元素布局就會混亂。這是MacIE的著名的bug,倘若不知道就會走彎路。

  6. float元素務必指定width屬性

  很多瀏覽器在顯示未指定width的float元素時會有bug。所以不管float元素的內容如何,一定要為其指定width屬性。

  另外指定元素時盡量使用em而不是px做單位。

  7. float元素不能指定margin和padding等屬性

  IE在顯示指定了margin和padding的float元素時有bug。因此不要對float元素指定margin和padding屬性(可以在float元素內部嵌套一個div來設置margin和padding)。也可以使用hack方法為IE指定特別的值。

  8. float元素的寬度之和要小于100%

  如果float元素的寬度之和正好是100%,某些古老的瀏覽器將不能正常顯示。因此請保證寬度之和小于99%。

  9. 是否重設了默認的樣式?

  某些屬性如margin、padding等,不同瀏覽器會有不同的解釋。因此最好在開發前首先將全體的margin、padding設置為0、列表樣式設置為none等。

  10. 是否忘記了寫DTD?

  如果無論怎樣調整不同瀏覽器顯示結果還是不一樣,那么可以檢查一下頁面開頭是不是忘了寫下面這行DTD:
 

以下是引用片段:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 


在線編輯:wlx
本文鏈接:


推薦閱讀:
·2019第五屆“學院派獎”全國藝術與設計大展 征集公告
·2019第十三屆“創意中國”設計大獎征稿
·第十三屆《中國大學生美術作品年鑒》征稿開始
·青春唯美插畫培訓網絡遠程班正在招生
·20000元 余姚征集文化旅游宣傳LOGO與宣傳標語
·6000元 征集柯城區“一村萬樹”LOGO設計
·5000元 征集陜西政務服務形象標識
·3000元 2019中國•大圩馬拉松文化節吉祥物征集
免責聲明:本站刊載此文不代表同意其說法或描述,僅為提供更多信息。對本文有異議,請聯絡本站!
轉載要求:文章作者及來源信息必需保留。轉載之圖片、文件請不要盜鏈本站地址,且不準打上各自站點的水印!

近期推薦報道 返回首頁更多精彩等著你!

Photoshop| Photoshop快速調出情侶圖片柔美的插畫藝術| 絕望的小熊—美國插畫師Luke
網頁設計| 波蘭Tiquet網站設計作品欣賞插畫藝術| Nanami Cowdroy靈動黑白插畫
Photoshop| Photoshop調出美女圖片絢麗的橙紅HTML/CSS| 實現DIV透明而里面的文字不透明
平面設計| 世界杯之平面廣告欣賞插畫藝術| Alberto Cerrite&ntil
平面設計| Havaianas人字拖最新平面廣告系列網頁設計| 英國madefavourite簡潔細膩型
韓國站點 素材資源 藝術攝影 游戲娛樂 影視網站 建筑家居 FLASH站 旅游購物 明星網站 個性展示 網站教學 工 作 室 學校教育
設計門戶 優秀企業 時尚品牌 象素站點 數碼通信 設計公司 汽車網站 國外優秀 兒童網站 文化藝術 體育運動 美容健身 食品飲料
網站名稱:whaternet
網站地址:http://whaternet.com/
加入時間:2014-8-5 13:59:20
網站名稱:mnnaite
網站地址:http://www.mnnaite.com/static/
加入時間:2014-8-5 13:58:07
網站名稱:tijuanaflats
網站地址:http://tijuanaflats.com/
加入時間:2014-8-5 13:55:32
網站名稱:digital
網站地址:http://production-digital.com/
加入時間:2014-8-5 13:54:45
網站名稱:deutschesee
網站地址:http://www.deutschesee.de/
加入時間:2014-8-5 13:51:54
網站名稱:kennedy
網站地址:http://www.kennedyandoswald.com/
加入時間:2014-8-5 13:50:57
關于本站 | 聯系方式 | 商業服務 | 合作伙伴 | 站點地圖 | 免責聲明 | 版權聲明 | 在線投稿  
 
仙侠情缘APP