html+css文档.docVIP

Html+Css规范文档 一、基本概要 总体要求 网页制作最基本要求：页面效果，既与psd设计稿效果达到统一。 注：如果在psd设计稿效果无法实现，或者效果很难实现的情况下，可以修改psd设计稿。 2． 代码尽量简洁，符合W3C标准；达到符合多个主流浏览器标准效果； 注：此文档实例都是在W3C标准下实现效果，如果不在W3C标准下，某些效果可能会有差别。 多个浏览器标准 网页效果是基于浏览器来实现的，所以在不同的浏览器中，达到统一的页面效果是非常重要的。 不同开发商的浏览器，或者同一开发商推出的不同版本浏览器之间，存在着对html+css的解释差别，也就是不同浏览器之间的兼容问题，所以在制作+测试的时候，要统一不同浏览器之间的效果。 当前主流浏览器，有 IE6.0、IE7.0、Firefox (火狐) 、遨游 (Maxthon) 、Opra...基于浏览器内核，测试页面至少要达到 IE6.0、IE7.0、Firefox (火狐)效果相同。 目前浏览器使用状况大致如下: 一般来说，版本越高的浏览器，对代码的解释及兼容越好，测试时检查出错误的机会也就越小。 在代码没有要求的情况下，可以针对浏览器，单独写一些css具体属性，以达到浏览器效果统一，比如 !important、*+、+、_不过建议尽量不用这种hack技术； HTML+CSS 编辑工具以及代码格式 html+css编辑器，一般的文本编辑器即可对html+css进行编辑。 dreamweaver版本，制作与维护人员最好使用相同的版本，不同的版本之间的兼容性会有差别，版本越高兼容性越好，但是当其他人员使用低版本的dreamweaver时，就是出现一些问题，比如：编码规则，解释属性。 html+css代码书写时，要结构清晰，能够手动书写，尽量少用套用源格式 (dreamweaver中优化格式) 如：在html代码中，父级标签跟子级标签，最好换行之后空出2个空格 (套用源格式的本质) div p/p p/p /div 在css代码中，第一种书写方法，可以用空格划分各属性。 body {background:#fff;　font-size:12px;　color:#000;　margin:0px;　padding:0px;} 第二种方法，相同类型的属性可以放在同一行中，分别几行表示属性。 body {background:#fff;　 font-size:12px;　color:#000;　 margin:0px;　padding:0px;} 一般这种情况，代码量的多少，决定文件的大小，同时也决定书写格式。 编码规则gb2312、“gbk、 utf-8在不做特殊要求的情况下，默认的编码使用utf-8。 代码注释 良好的html、css注释，不仅可以使得代码的结构、层次更加清晰，同样会为日后维护，修改带来很大的方便。 注：注释的内容，可以使用具有一定意义的英文 、中文拼音 、汉字。使用前提，如果编码规则统一，编辑器版本统一的情况下，可以使用汉字进行注释，其他情况下，推荐使用英文、中文拼音注释，这样可以避免页面出现乱码，以至于页面样式错乱。 文件存放位置 总体来说每个栏目有单独文件夹，这样方便管理；公用的图片和css放在根目录里，每个栏目单独的文件放在单独的栏目文件夹里； 以栏目为例，在每个栏目的根目录下，有以下文件。 静态页面 images(图片文件夹) css(css样式表文件夹) js(页面调用的js方法文件夹) 注：文件存放方式，决定栏目统一调试，维护。 制作思路 制作页面的基本是效果，思路则是拆分。 如何拆分页面结构： a) 以内容、功能、样式为模块逐步划分，将页面按所需结构用不同的层(div、table...)封装。 b) 页面内的所有元素都可以用css样式表控制。 布局结构完成后，在来更改css样式表，设置页面样式。 利用iedom、firebug等插件，进行页面调试。 浏览器插件测试，以ie dom explorer为例。 左侧区域：页面结构 中间区域：页面html代码 右侧区域：所有样式属性(html样式属性+css样式属性) 注：在测试页面效果时 首先检查页面的结构，当前浏览页面是否与自己所写结构相同，从而判断html代码是否出现标签层级关系选择错误，或标签结束位置是否正确。 其次检查页面样式属性(右侧区域)，当前浏览样式属性，是否与设置属性相同，设置样式属性与当前浏览样式不同，可能原因如下： 一.修改样式表内属性位置是否正确。 二.添加的属性书写是否正确。 三.样式书写是否标准，如结束标签{}是否完整，属性之前是否使用;分隔，是否有多余字符... 可以在中间区域做临时