现在的网站设计都是基于CSS的使用，这种技术已经成为网站设计师必备的技能之一。CSS在网站设计中的作用是：可以在像素级精确控制网页中元素的布局，支持几乎所有的字体大小和样式，具有编辑web对象和模型样式的能力。那么网站设计中CSS设计的布局规则是怎样的，调试时可以合理采取哪些方法？要想在网站设计中很好地利用CSS设计，这些问题都是必须解决的。以下耿真将一一解答。
网页布局中CSS设计的常用规则
规则一，CSS文件的链接方式
1。附加链接：外部CSS文件2。导入常用于应用多个CSS文件的CSS时，将多个CSS导入一个CSS文件中有三个CSS规则定义：类，如。RedText。BlueText和。BigText等。
对原HTML标签进行标签的重新CSS定义；高级伪类，定义ID元素，全面定义。
规则二，CSS 规则的应用
1。只需要应用“class”样式，class=xxxx可以应用到任何元素。2.class和id 3的区别。标签应用一般使用“bodi”标签一次，不建议定义像“li td”这样在页面上有很大重复性的标签。4.高级更适用，定义“#id li”比“li”好很多。
规则三，CSS规则的执行顺序
1。按照CSS代码2的执行顺序。如果有重复的规则，按照后面的定义执行3。最后的规则是多重定义规则1的综合
规则四，高级规则定义。对于不同表格的文本样式定义，不同的表格使用不同的标识。类样式定义；
2.一页中有多个超链接样式定义；
3.CSS共同定义多个规则相同的对象；
4.考虑一下对于同一个对象定义的多个CSS模式，哪种更科学(扩展性和代码简化)。
网页布局中CSS设计的调试方法
方法一，检查CSS是否书写正确检查拼写错误，忘记结尾，等等。
方法二，检查HTML元素是否有拼写错误、是否忘记结束标记
您可以使用dreamweaver的验证功能来检查错误。即使是老手也经常会弄错div的嵌套关系。
方法三，利用border属性确定出错元素的布局特性
给元素添加border属性确定元素边界，错误原因就清楚了。
方法四，float元素相关的调试
1。浮动元素的父元素不能指定清除属性2。IE的著名bug。不知道的话就绕道了。在IE下，如果把clear属性用于float元素的父元素，那么周围的float元素的布局就会混乱。3.浮动元素的宽度总和应小于100%。请确保宽度之和小于99%。如果浮动元素的宽度总和正好是100%，一些古代浏览器将无法正常显示。4.是否重置了默认样式？更好将所有边距和填充设置为0，将列表样式设置为无，例如边距和填充属性。5.浮动元素必须指定宽度属性。无论float元素的内容是什么，都必须为其指定，因为很多浏览器在显示float元素时，不指定宽度，就会出现bug。另外，在指定元素的时候，尽量用em而不是px作为单位。
方法五，用删除法确定错误发生的位置
如果错误影响了整体布局，请逐个删除div块，直到删除div块后显示恢复正常，然后您就可以确定错误发生的位置。
鲁ICP备15001313号
鲁公网安备 37039402000105号