網站設計之CSS的布局規則和調試方法

2017.05.11

　　现在的网站設計基础上离不开CSS的使用，而这项技术也成为了网站設計师必备技能之一。CSS在网站設計中的功能是：能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

　　那么在网站設計中CSS設計的布局规则是怎么样的，在进行调试时可以采取哪些方法比较合理呢？这些问题都是网站設計中想要利用好了CSS設計必须要解决的问题。下面分形科技小编就为大家一一解答。

　　网页布局中CSS設計的常用规则

　　規則一，CSS文件的鏈接方式

　　1、附加鏈接：外部CSS文件

　　2、導入CSS常用應用多個CSS文件時，將多個CSS導入一個CSS文件中CSS規則定義有三種：

　　①类比如.RedText .BlueText和.BigText等等；

　　②标签针对原有 HTML 标签做的重新CSS定义；

　　③高級僞類、定義了ID元素，以及綜合性定義。

　　规则二，CSS 规则的应用

　　1、只有“类”样式才需要应用，class= xxxx任何元素都可以应用类。

　　2、class與id區別

　　3、标签应用一般对于“bodi”标签一次性使用，对于诸如“li td”等在页面中重复性比较大的标签不推荐定义。

　　4、高级多运用，定义“#id li”比定义“li”要好得多。

　　規則三，CSS規則的執行順序

　　1、依照CSS代碼的執行先後順序

　　2、如果有重複的規則，依照後執行的定義

　　3、最終規則是多個定義規則的綜合

　　規則四，高級規則定義

　　1、對于不同表格的文字樣式定義，不同表格使用不同ID使用類樣式定義；

　　2、一頁中的多種超級鏈接樣式定義；

　　3、多个相同规则不同对象的 CSS 共同定义；

　　4、對于同一對象定義的多種CSS方式考慮哪種更科學（擴展性和代碼精簡性）。

　　网页布局中CSS設計的调试方法

　　方法一，檢查CSS是否書寫正確

　　檢查一下有無拼寫錯誤、是否忘記結尾的等。

　　方法二，檢查HTML元素是否有拼寫錯誤、是否忘記結束標記

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

　　方法三，利用border屬性確定出錯元素的布局特性

　　爲元素添加border屬性確定元素邊界，錯誤原因即水落石出。

　　方法四，float元素相關的調試

　　1、float元素的父元素不能指定clear屬性

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

　　3、float元素的寬度之和要小于100%

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

　　4、是否重設了默認的樣式？

　　最好首先將全體的margin、padding設置爲0、列表樣式設置爲none等，如margin、padding屬性等。

　　5、float元素必須指定width屬性

　　不管float元素的內容如何，一定要爲其指定width屬性，因爲很多浏覽器在顯示未指定width的float元素時會有bug，另外指定元素時盡量使用em而不是px做單位。

　　方法五，用刪除法確定錯誤發生的位置

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

400-7808-893 / 010-64913142 我想要個更針對我需求的方案

上一篇文章：網站SEO布局優化的技巧分享下一篇文章：让企业網站建設网站設計更专业的秘籍

看過此文章的人也看過

日韩一级一片