网页设计html+css代码编写建议

发布于:2010/11/16来源:千日红 作者:千日红 点击: 421 次

1.浮动时记得清除浮动
    在没有清楚浮动的情况下,会出现跑格。页面会发生变形。
    2.有效利用padding和border
    边界重合时,使用padding和border可以避免,可以防止上下div的“塌陷”,合理的控制上下div的间距。
    3.记住“TRBL”写法
    border,margin与padding的简写语法有特定顺序,从上方开始顺时针方向转动:top,right,bottom,left. 所以margin:0 1px 3px 5px;的结果是上方无边界,右边1像素,以此类推。
    4.不是零的值,都要指定单位
    CSS需要对每个font,margin等各种值指定单位。
    5.解决IE6的浮动元素的双倍边距问题
    对一个div设置了float:left 和 margin-left:100px 在IE6中,这个bug就会出现。只需要多设置一个display就行了。
    6.!important;
    如果实在没有办法解决一些细节问题,可以用这个方法.火狐对于”!important”会自动优先解析,IE则会忽略。
    7. 所有的xhtml代码小写
    8. 属性的值一定要用双引号(”")括起来,且一定要有值
    9. 每个标签都要有开始和结束,且要有正确的层次
    10. 空元素要有结束的tag或于开始的tag后加上”/”
    11. 表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
    12.h1到h6的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。
    13. 给每一个表格和表单加上一个唯一的、结构标记id
    14. 给重要的区块加上注释,如:
    15. 给图片加上alt标签
    16. 所有的标签必须进行合理的嵌套
    17. 根元素前必须有元素,宣告使用那一种DTD
    18.检查HTML元素是否有拼写错误、是否忘记结束标记
    即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。
    19. 检查CSS是否正确
    检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误。
    20. 确定错误发生的位置
    如果错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置。
    21. 利用border属性确定出错元素的布局特性
    使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界,错误原因即水落石出。
    22. float元素的父元素不能指定clear属性
    MacIE下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。这是MacIE的著名的bug,倘若不知道就会走弯路。
    23. float元素务必指定width属性
    很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。
另外指定元素时尽量使用em而不是px做单位。
    24. float元素不能指定margin和padding等属性
    IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。 
    25. float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

------分隔线----------------------------
------分隔线----------------------------
[相关文章]