DIV+CSS设计规范.doc

人看人视频网研发中心 前端设计培训 二 DIV CSS 设计规范 文件标识 Company RKANR TM PLAN 当前版本 2 0 作 者 李祝林 文件状态 草稿 正式发布 正在修改 完成日期 2011 12 21 人看人视频网 人看人视频网研发中心 前端设计培训 二 DIV CSS 设计规范 人看人视频网 2011Page 2 of 19 版 本 历 史 版本 状态作者参与者起止日期备注 草稿香伟健杨冬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 人看人视频网研发中心 前端设计培训 二 DIV CSS 设计规范 人看人视频网 2011Page 3 of 19 一 一 页面布局设计及规范页面布局设计及规范 1 11 1 页面布局结构 页面布局结构 注意 注意 一般更新 content 内容 因此页面级 CSS 需从 content 开始定义 1 21 2 页面 页面 CSSCSS 文件加载顺序文件加载顺序 a Reset css 重置的 CSS 统一指明属性 b Base css 默认的 CSS 一般包括一些基本的设置 如字体颜色表 c Default css 包括 header footer 内容及 content 基本样式的 CSS content 基本样式的 CSS 布局框架 栅格系统 Form 基本样式 伪绝对定位 系统 默认控件样式 以上 3 者在编写 PageName css 及控件 css 前提供 PageName css 以页面名称命名的 CSS 文件 定义 content 及其页面内容的 CSS CustomControl css 定义自定义控件的 CSS 文件 方便在多个页面重复使用 1 31 3 ContentContent 之内的布局之内的布局 a 2 栏布局栏布局 b 3 栏布局栏布局 人看人视频网研发中心 前端设计培训 二 DIV CSS 设计规范 人看人视频网 2011Page 4 of 19 1 41 4 常用 常用 HTMLHTML 元素布局元素布局 a 列表 列表 ul ol dl 特点 div 高度自适应 宽度固定 头部 title DIV 里面嵌套一个 H2 以加入标题文字 内容 content DIV 里面嵌套一个 UL 或可省略为一个 UL 直接 UL Class content 技巧注释 这里使用了 li 里面嵌套一个 dl 定义列表 以实现 li 里面内容 2 栏布局 并使 标题加粗 使 XHTML 语义更加准确 人看人视频网研发中心 前端设计培训 二 DIV CSS 设计规范 人看人视频网 2011Page 5 of 19 b 表格 表格 table 特点 高度自适应 TD 宽度自适应 也可指定 注意 注意 表头分隔线需要放在 th 的 CSS 内 才能实现真正的自适应 不然 th 宽度改变了分隔 线仍然停在那里 人看人视频网研发中心 前端设计培训 二 DIV CSS 设计规范 人看人视频网 2011Page 6 of 19 c 表单 表单 form 特点 行布局 通常都有某个地方需要对齐 我采用的是 DIV 的行布局 当然也可以采用 LI 的行布局 但是 LI 布局使用验证有可能会引 起一个不明原因的错误 未确定 注意 注意 这里加入一个 span class txtleft 并设置了 float left 的目的是因为后面的自定义 控件最外围为 DIV 需要以此实现原来的行内元素布局 特殊表单行布局 人看人视频网研发中心 前端设计培训 二 DIV CSS 设计规范 人看人视频网 2011Page 7 of 19 技巧 Checkbox radio 等小体积对象如果旁边有文字描述必须用 label 包住 2 者以加大其点 击区域 这里的提示内容 p class tips 由于属于本行内容 因此并不会另外使用一个 DIV 而需嵌套在同一 DIV 内 d 元素定位元素定位 伪绝对定位 活动进行中 图 使用position absolute 然后再最外层 加上position relative 这样 浏览器中才能正确的显示 在 ie6 下不会出现错位 1 51 5 页面布局中的应用技巧 页面布局中的应用技巧 a 居中的技巧 居中的技巧 一个居中 N 个还是居中 人看人视频网研发中心 前端设计培训 二 DIV CSS 设计规范 人看人视频网 2011Page 8 of 19 往外层 DIV class btns 添加 CSS text align center 然后外层这个 DIV 居中就是使用 margin 0 auto 和指定这个 DIV 的宽度 b 什么时候使用 什么时候使用 margin 什么时候用 什么时候用 padding 这个只能靠个人直观判断 但使用 margin 需注意 float 后加倍计算 margin 的 bug 还 有 margin 重叠等 bug 要了解 bug 的详情请搜索相关关键字 当然最重要的 就是要看 浏览器的效果 我认为对容器使用 padding 还是对容器内的标签使用 margin 的原则 当隐藏这个容器 或者容器内的标签时 现实项目中其实经常需要将某个部件隐藏 显示 对整体布局影 响最小为益 技巧 关于编写 CSS 规则 虽然在考虑兼容性的时候是 IE6 优先于 IE7 优先于 FireFox 但写 CSS 的时候却是应该倒 过来考虑的 根据最先进的浏览器编写标准的 CSS 再为 IE6 写 hacks 这样做才能准确体 会 CSS 的本意 避免对 CSS 规则造成错误理解 使用 FireDebug IE Developer Toolbar 观察页面布局的问题 c 关于浮动关于浮动 注意 注意 浮动结束后一定要 clear 否则会不同浏览器会有不同渲染错误 一般来说里面 2 个对象使用了浮动 外围的对象就使用 clear 清除浮动 或者 display inline 在有宽和高的情况下 加上overflow hidden d 在页面在页面 CSS 样式中使用图片样式中使用图片 i 使用图片的原则 1 尽量压缩图片 大小 颜色 2 无法使用 CSS 规则表现的样式时才使用图片 3 注意指定 background 的顺序 考虑图片加载失败后不能影响页面的可读性 background background color background image background repeat background attachment background position ii 什么时候是 img 什么时候是 background image 人看人视频网研发中心 前端设计培训 二 DIV CSS 设计规范 人看人视频网 2011Page 9 of 19 分析 分析 它是 img 理由 NEW 对于这里来说所以的作用是标识新数据 是有意义的小图片 它是 background image 理由 这里的小图标虽然也是标识状态 但是 旁边已有清晰的文字描述 小图标更多的是装饰的作用 因此需在 CSS 内定义 二 二 CSS 文件书写规范文件书写规范 2 12 1 关于 关于 CLASSCLASS 的命名的命名 采用骆驼命名法 千万不要使用拼音首字母命名 其它命名建议请参考 CSS 命名规范参考 模块间请使用注释分隔以方便往后阅读及提取操作 特殊部分尽量加入注释加以说明 如 hack 的地方 注 在有些浏览器下 会对一些 class 的命名进行拦截 大部分为拦截广告 2 22 2 CSSCSS 兼容方案 能不使用就不使用 兼容方案 能不使用就不使用 class background color FFFF00 所有浏览器 background color 00FF00 IE background color 00FFFF IE6 media all and min width 0 class background color FF00FF Opera 只有 Opera 识别 media all and min width 0 class background color FF00FF Opera 和 Sa 人看人视频网研发中心 前端设计培训 二 DIV CSS 设计规范 人看人视频网 2011Page 10 of 19 html class background color 808080 Sa IE6 IE7 都能识别 标准浏览器 如 FF chrome 不能识别 IE6 能识别 但不能识别 important IE7 IE6 能识别 也能识别 important FF 不能识别 但能识别 important 书写的顺序都是 firefox 的写在前面 IE7 的写在中间 IE6 的写在最后面 注意 的 HACK 必须保证 HTML 顶部有如下声明 DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 Transitional EN http www w3 org TR html4 loose dtd 2 32 3 CSSCSS 编写顺序编写顺序 显示属性 display list style position float clear 自身属性 width height margin padding border background 文本属性 color font text decoration text align vertical align white space other text content 注 这样编写可以提高样式的执行效率 虽说小的变动 对于大型网站是有很大帮助的 人看人视频网研发中心 前端设计培训 二 DIV CSS 设计规范 人看人视频网 2011Page 11 of 19 2 42 4 CSSCSS 文件头部信息文件头部信息 Master Stylesheet Project Smashing Magazine Version 1 1 Last change 05 02 08 fixed Float bug vf Assigned to Vitaly Friedman vf Sven Lennartz sl Primary use Magazine import reset css import layout css import colors css import typography css import flash css import debugging css 同时对于大型项目 你也可以加上 CSS 文件的升级标志或者一些诊断措施 修改内容 这 里不再详述 隐藏及追加模块需要添加 CSS 注释 建立建立 CSS 索引索引 为了能够迅速的了解整个 CSS 文件的结构 在文件开头建立文件索引是一个不错的选择 一 种可行的方法是建立树形的索引 结构上的 id 和 class 都可以成为该树的一个分支 如下 Layout body Header header Content content Left column leftcolumn Right column rightcolumn Sidebar sidebar RSS rss Search search Boxes box 人看人视频网研发中心 前端设计培训 二 DIV CSS 设计规范 人看人视频网 2011Page 12 of 19 Sideblog sideblog Footer footer Navigation navbar Advertisements ads Content header h2 对应的模块就在开始处添加 header 就可以使用类似锚点的功能 搜索 三 三 在各浏览器下的兼容性在各浏览器下的兼容性 3 13 1 各浏览器下一些专有识别写法 各浏览器下一些专有识别写法 所有浏览器 通用 height 100px IE6 专用 height 100px IE6 ie7 专用 height 100px IE7 ie6 专用 height 100px IE7 FF 共用 height 100px important IE6 IE7 都能识别 标准浏览器 如 FF chrome 不能识别 IE6 能识别 但不能识别 important IE7 IE6 能识别 也能识别 important FF 不能识别 但能识别 important 书写的顺序都是 firefox 的写在前面 IE7 的写在中间 IE6 的写在最后面 3 23 2 技巧 技巧 csscss 1 FF 谷歌下给 div 设置 padding 后会导致 width 和 height 增加 但 IE 不会 可用 important 解决 2 居中问题 a 垂直居中 将 line height 设置为 当前 div 相同的高度 再通过 vetical align middle 注意内容不要换行 b 水平居中 margin 0 auto 当然不是万能 3 若需给 a span label 等行内元素标签内容加上样式 需要设置 display block 常 见于导航标签 注 block inline 详解 扩展 Css display 值与解释 人看人视频网研发中心 前端设计培训 二 DIV CSS 设计规范 人看人视频网 2011Page 13 of 19 block 块对象的默认值 用该值为对象之后添加新行 none 隐藏对象 与 visibility 属性的 hidden 值不同 其不为被隐藏的对象保留其物理空间 inline 内联对象的默认值 用该值将从对象中删除行 compact 分配对象为块对象或基于内容之上的内联对象 marker 指定内容在容器对象之前或之后 要使用此参数 对象必须和 after 及 before 伪元 素一起使用 inline table 将表格显示为无前后换行的内联对象或内联容器 list item 将块对象指定为列表项目 并可以添加可选项目标志 run in 分配对象为块对象或基于内容之上的内联对象 table 此元素会作为块级表格来显示 类似 表格前后带有换行符 table caption 将对象作为表格标题显示 table cell 将对象作为表格单元格显示 table column 将对象作为表格列显示 table column group 将对象作为表格列组显示 table header group 将对象作为表格标题组显示 table footer group 将对象作为表格脚注组显示 table row 将对象作为表格行显示 table row group 将对象作为表格行组显示 4 FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float 的 div 在 ie 下 margin 加倍等问题 Box 为盒模型 详解 5 ul 标签在 FF 下面默认有 list style 和 padding 最好事先声明 以避免不必要的 麻烦 常见于导航标签和内容列表 6 作为外部 wrapper 的 div 不要定死高度 最好还加上 overflow hidden 以达到高度 自适应 7 关于手形光标 cursor pointer 而 hand 只适用于 IE 3 33 3 CssCss 样式问题样式问题 1 css 布局中的居中问题 主要的样式定义如下 body TEXT ALIGN center center MARGIN RIGHT auto MARGIN LEFT auto 说明 人看人视频网研发中心 前端设计培训 二 DIV CSS 设计规范 人看人视频网 2011Page 14 of 19 首先在父级元素定义 TEXT ALIGN center 这个的意思就是在父级元素内的内容居中 对于 IE 这样设定就已经可以了 但在 mozilla 中不能居中 解决办法就是在子元素定义时候设定时再加上 MARGIN RIGHT auto MARGIN LEFT auto 需要说明的是 如果你想用这个方法使整个页面要居中 建议不要套在一个 DIV 里 你可以 依次拆出多个 div 只要在每个拆出的 div 里定义 MARGIN RIGHT auto MARGIN LEFT auto 就可以了 3 盒模型不同解释 详细查看 box width 600px for ie6 0 w idth 500px for ff ie6 0 box width 600px important for ff width 600px for ff ie6 0 width 500px for ie6 0 4 浮动 ie 产生的双倍距离 box float left width 100px margin 0 0 0 100px 这种情况之下 IE6 会产生 200px 的距离 display inline 使浮动忽略 这里详细细说一下 block inline 两个元素 Block 元素的特点是 总是在新行上开始 高度 宽度 行高 边距都可以控制 块元素 Inline 元素的特点是 和其他元素在同一行上 不可控制 内嵌元素 行内元素 box display block 可以为内嵌元素模拟为块元素 display inline 实现同一行排 列的的效果 diplay table table 此元素会作为块级表格来显示 类似 表格前 后带有换行符 5 IE 与宽度和高度的问题 IE6 不认得 min 这个定义 但实际上它把正常的 width 和 height 当作有 min 的情况来使 这样问题就大了 如果只用宽度和高度 正常的 浏览器里这两个值就不会变 如果只用 min width 和 min height 的话 IE 下面根本等于没 有设置宽度和高度 比如要设置背景图片 这 个宽度是比较重要的 要解决这个问题 可以这样 box width 80px height 35px html body box width auto height auto min width 80px min height 35px 6 页面的最小宽度 min width 是个非常方便的 CSS 命令 它可以指定元素最小也不能小于某个宽度 这样就能 人看人视频网研发中心 前端设计培训 二 DIV CSS 设计规范 人看人视频网 2011Page 15 of 19 保证排版一直正确 但 IE 不认得这个 而它 实际上把 width 当做最小宽度来使 为了让这一命令在 IE 上也能用 可以把一个 放到 标签下 然后为 div 指定一个类 然后 CSS 这样设计 container min width 600px width e xpression eval document body clientWidth 600 600px auto eval 执行后面的 js CSS expression 它主要用来把 CSS 属性和 Javascript 脚本关联起来 也就是后所 CSS 属性后面可以是一段 Javascript 表达式 CSS 属性的值等于 Javascript 表达式计算的结果 第一个 min width 是正常的 但第 2 行的 width 使用了 Javascript 这只有 IE 才认得 这 也会让你的 HTML 文档不太正规 它实际上通 过 Javascript 的判断来实现最小宽度 7 清除浮动 兼容 box display table 将对象作为块元素级的表格显示 或者 兼容 box clear both 或者加入 after 伪对象 设置在对象后发生的内容 通常和 content 配合使用 IE 不支 持此伪对象 非 Ie 浏览器支持 所以并不影响到 IE WIN 浏览器 这种的最麻烦的 box after content display block height 0 clear both visibility hidden 补充 伪类及伪对象 是一种特殊的类和对象 由 CSS 自动支持 属 CSS 的一种扩展类和对象 名称不能被用户自定义 使 用时只能按标准格式进行应用 a hover backgroud coloir 3f3f3f 本例中的 hover 便是一个伪类 用于指定标签 a 的鼠标移上状态 CSS 内置了几个标准的伪类用于用 户的样式定义 人看人视频网研发中心 前端设计培训 二 DIV CSS 设计规范 人看人视频网 2011Page 16 of 19 同样 CSS 内置了几个标准伪对象用于用户的样式定义 实际上 除了 hover active 几个伪类之外 大多数伪类及伪对象在实际使用上并不常见到 8 DIV 浮动 IE 文本产生 3 象素的 bug 左边对象浮动 右边采用外补丁的左边距来定位 右边对象内的文本会离左边有 3px 的间距 9 ie6 下的position fixed 在 ie6 下 需写成 position absolute bottom auto top expression eval document documentElement scrollTop 才能识别出来 四 四 页面性能优化页面性能优化 参考文档 Jquery 性能优化 Javascript 性能优化 4 14 1 WebWeb 前端优化图片前端优化图片 Image Image 1 优化图片 Optimize Images 使用 GIF JPG 还是 PNG 格式的图片 尽可能的使用 PNG 格式的图片 更多 的功能 更小的尺寸 与 GIF 相比 伪类用途 link a 连接标签的未被访问前的样式 hover 对象在鼠标移上时的样式 active 对象被用户点击及被点击释放之间的样式 visited a 连对象被访问后的样式 focus 对象成为输入焦点的样式 first child 对象的第一个子对象的样式 first 对于页面的第一页使用的样式 伪对象用途 after 设置某一个对象之后的内容 first letter 对象内的第一个字符样式设置 first line 对象内第一行的样式设置 before 设置某一个对象之前的内容 人看人视频网研发中心 前端设计培训 二 DIV CSS 设计规范 人看人视频网 2011Page 17 of 19 对于 PNG 图片 考虑用 Pngcrush 或类似的工具进行优化 常见的工具如下表 pngcrush pngrewrite OptiPNG http www cs toronto edu cosmin pngtech optipng refer 教程 PNGOut 另请参见 Five Tips For the Effective Use of PNG Images 对 JPEG 图片的优化工具 jpegtran http jpegclub org 必需要强调的是 图片设计的同学啊 请考虑设计面向 Web 的图片 不要动不动 就设计超过可接受尺寸之外大家伙 这应该是一种习惯 而不是什么高超的技能 只需 要记住就成了 2 使用 CSS Sprites 技巧对图片优化 Optimize CSS Sprites 之前提到过 简单的说就是 利用 CSS background 相关元素进行背景图绝对定位 把多次 HTTP 调用变为一次调用 更多参考 CSS Sprites Image Slicing s Kiss of Death 补充一下 对于这个技巧我曾经见到有人滥用的 把多个背景图片揉成一个 减少 HTTP 调用 这是一个很好的思路 但一定要记住这个大图片不能太 重 我看到过 100 多 K 的背景图 一个图片就把整个网站拖得很慢 比较好的例子可以参考雅虎关系 的这个图 更新 使用 CSS Sprites 的一个潜在的副作用是客户端将消耗更多内存 参考 3 不要在 HTML 中使用缩放图片 Don t Scale Images in HTML 更多的时候 可能是因为偷懒而没有制作合适大小的图片 如果是批量处理图片的 话 可能一条 ImageMagic 命令 convert 就能搞定 必须提及的是 看到太多的对 图片拉伸很难看的页面 救救这些页面 4 用更小的并且可缓存的 favicon ico Make favicon ico Small and Cacheable 更小 可缓存 这两条可能都不是问题 问题是 太多站点根本没有 favicon ico 有的时候 判断独立域名的 Blog 是否专业 基本看一下是否有 favicon ico 就差不多了 补充 视觉设计者应该尽量考虑控制图片大小 推荐在 200K 以下 4 24 2 WebWeb 前端优化最佳实践第四部分面向前端优化最佳实践第四部分面向 CSSCSS 1 把 CSS 放到代码页上端 Put Stylesheets at the Top 官方的解释我觉得多少有点语焉不详 这一条其实和用户访问期望有关 CS