|
網站設計之CSS的布局規則和調試方法：
網頁布局中CSS設計的常用規則：
規則一、CSS文件的鏈接方式
1、附加鏈接：外部CSS文件
2、導入CSS常用應用多個CSS文件時(shí)，將(jiāng)多個CSS導入一個CSS文件中CSS規則定義有三種(zhǒng)：
①類比如.RedText .BlueText和.BigText等等；
②标簽針對(duì)原有 HTML 标簽做的重新CSS定義；
③高級僞類、定義了ID元素，以及綜合性定義。
規則二、CSS 規則的應用
1、隻有“類”樣式才需要應用，class= xxxx任何元素都(dōu)可以應用類。
2、class與id區别
3、标簽應用一般對(duì)于“bodi”标簽一次性使用，對(duì)于諸如“li td”等在頁面(miàn)中重複性比較大的标簽不推薦定義。
4、高級多運用，定義“#id li”比定義“li”要好(hǎo)得多。
規則三、CSS規則的執行順序
1、依照CSS代碼的執行先後(hòu)順序
2、如果有重複的規則，依照後(hòu)執行的定義
3、最終規則是多個定義規則的綜合
規則四、高級規則定義
1、對(duì)于不同表格的文字樣式定義，不同表格使用不同ID使用類樣式定義；
2、一頁中的多種(zhǒng)超級鏈接樣式定義；
3、多個相同規則不同對(duì)象的 CSS 共同定義；
4、對(duì)于同一對(duì)象定義的多種(zhǒng)CSS方式考慮哪種(zhǒng)更科學(xué)（擴展性和代碼精簡性）。
網頁布局中CSS設計的調試方法：
方法一、檢查CSS是否書寫正确
檢查一下有無拼寫錯誤、是否忘記結尾的等。
方法二、檢查HTML元素是否有拼寫錯誤、是否忘記結束标記
可以用dreamweaver的驗證功能(néng)檢查一下有無錯誤。即使是老手也經(jīng)常會(huì)弄錯div的嵌套關系。
方法三、利用border屬性确定出錯元素的布局特性
爲元素添加border屬性确定元素邊界，錯誤原因即水落石出。
方法四、float元素相關的調試
1、float元素的父元素不能(néng)指定clear屬性
2、IE的著名的bug，倘若不知道(dào)就(jiù)會(huì)走彎路。IE下如果對(duì)float的元素的父元素使用clear屬性，周圍的float元素布局就(jiù)會(huì)混亂。
3、float元素的寬度之和要小于100%
請保證寬度之和小于99%，如果float元素的寬度之和正好(hǎo)是100%，某些古老的浏覽器將(jiāng)不能(néng)正常顯示。
4、是否重設了默認的樣式？
最好(hǎo)首先將(jiāng)全體的margin、padding設置爲0、列表樣式設置爲none等，如margin、padding屬性等。
5、float元素必須指定width屬性
不管float元素的内容如何，一定要爲其指定width屬性，因爲很多浏覽器在顯示未指定width的float元素時(shí)會(huì)有bug，另外指定元素時(shí)盡量使用em而不是px做單位。
方法五、用删除法确定錯誤發(fā)生的位置
|
