欢迎光临
我们一直在努力

衡水网站建设之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块后显示恢复正常,即可确定错误发生的位置。

赞(0)
未经允许不得转载:衡水seo博客 » 衡水网站建设之CSS的布局规则和调试方法
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

建站优化更专业 更敬业 更负责

建站报价联系我们