DIV+CSS设计规范.doc

人看人视频网研发中心 前端设计培训（二） DIV+CSS设计规范 文件状态： [ ] 草稿 [√] 正式发布 [ ] 正在修改 文件标识： Company-RKANR-TM-PLAN 当前版本： 2.0 作 者： 李祝林 完成日期： 2011-12-21 版 本 历 史 版本/状态 作者 参与者 起止日期 备注 草稿 香伟健 杨冬 2008-8-26 修订 香伟健 杨冬 2008-11-11 修订 李祝林 杨冬 2011-12-21 目录 一、 页面布局设计及规范 3 1.1、页面布局结构： 3 1.2、页面CSS文件加载顺序 3 1.3、Content之内的布局： 3 1.4、常用HTML元素布局 4 1.5、页面布局中的应用技巧 8 二、 CSS文件书写规范 10 2.1、关于CLASS的命名 10 2.2、CSS兼容方案（能不使用就不使用） 10 2.3、CSS编写顺序 11 2.4、CSS文件头部信息 12 三、 在各浏览器下的兼容性 13 3.1、各浏览器下一些专有识别写法 13 3.2、技巧css 13 3.3、Css样式问题 14 四、 页面性能优化 17 4.1、Web 前端优化图片(Image) 17 4.2、Web 前端优化最佳实践第四部分面向 CSS。 18 五、 参考文献： 19 页面布局设计及规范 1.1、页面布局结构： 注意：一般更新content内容，因此页面级CSS需从#content开始定义。 1.2、页面CSS文件加载顺序 、Reset.css（重置的CSS,统一指明属性） 、Base.css(默认的CSS，一般包括一些基本的设置，如字体颜色表) 、Default.css（包括header，footer内容及content基本样式的CSS） 『content基本样式的CSS：布局框架（栅格系统）Form基本样式（伪绝对定位，系统默认控件样式）』 以上3者在编写PageName.css及控件css前提供） PageName.css（以页面名称命名的CSS文件。定义content及其页面内容的CSS） CustomControl.css(定义自定义控件的CSS文件，方便在多个页面重复使用） 1.3、Content之内的布局： 、2栏布局： 、3栏布局 1.4、常用HTML元素布局 、列表（ul，ol，dl）： 特点：div高度自适应，宽度固定。 头部.title，DIV里面嵌套一个H2以加入标题文字。 内容.content，DIV里面嵌套一个UL，或可省略为一个UL，直接UL Class=“content”。 技巧注释：这里使用了li里面嵌套一个dl（定义列表），以实现li里面内容2栏布局，并使标题加粗，使XHTML语义更加准确。 、表格（table） 特点：高度自适应，TD宽度自适应（也可指定）。 注意：表头分隔线需要放在th的CSS内，才能实现真正的自适应，不然th宽度改变了分隔线仍然停在那里 、表单（form） 特点：行布局，通常都有某个地方需要对齐。 我采用的是DIV的行布局，当然也可以采用LI的行布局，但是LI布局使用验证有可能会引起一个不明原因的错误（未确定）。 注意：这里加入一个span class=“txtleft”并设置了float：left；的目的是因为后面的自定义控件最外围为DIV，需要以此实现原来的行内元素布局。 特殊表单行布局： 技巧：Checkbox，radio等小体积对象如果旁边有文字描述必须用label包住2者以加大其点击区域。这里的提示内容（p class=“tips”）由于属于本行内容，因此并不会另外使用一个DIV而需嵌套在同一DIV内。 、元素定位 伪绝对定位： /yuzhongwusan/archive/2008/09/22/1295736.html 活动进行中(图) 使用position:?absolute; 然后再最外层 加上position:?relative; 这样 浏览器中才能正确的显示，在ie6下不会出现错位 1.5、页面布局中的应用技巧 、居中的技巧： 一个居中 N个还是居中 往外层DIV （class=“btns”）添加CSS text-align:center； 然后外层这个DIV居中就是使用margin：0 auto；和指定这个DIV的宽度； 、什么时候使用margin，什么时候用padding？ 这个只能靠个人直观判断，但使用margin需注意float后加倍计算margin的bug，还有margin重叠等bug（要了解bug的详情请搜索相关关键字），当然最重要的，就是要看浏览器的效果。 我认为对容器使用padding还是对容器内的标签使用margin的原则：当隐藏这个容器或者容器内的标签