前端开发规部分.doc

Zving前端开发规范（CSS部分）为了保持页面规范，避免错误，加快学习和开发效率，以下列出Zving前端开发中CSS的一些规范及注意事项，此规范适用于项目前端页面。（2009年7月31日初稿 2012年11月22日修正） 页面制作最重要的就是CSS，定义合理的CSS命名规范，可以大幅提高页面制作的效率和方便开发及相关人员修改编写。关于CSS的命名我们采用下划线命名法或骆驼式命名法，不要使用中划线命名法。 骆驼式命名法：是指混合使用大小写字母来构成变量和函数的名字,即函数名中的每一个逻辑断点都有一个大写字母来标记。例如：mianNav footNav 下划线命名法：是指函数名中的每一个单词都用一个下划线来隔开。例如：mian_nav foot_nav 1.通用命名规则： 1)所有ID或者class字母和数字之间用“_”连接，如: #col_left、#col_right 2)或所有ID或者class两个单词之间的链接采用骆驼式命名法，如:mianNav、footNav 3)页面主体框架布局命名：lay_left、lay_center、lay_right 4)栏目布局容器命名一律采用:?col_left、col_right 5)栏目标题块命名一律采用title元素标签采用: 如：标题 6)页面所有图片区域全部采用：pic_banner、pic_logo 7)页面文本列表区域全部采用：?list_pic、list_item 8)页面上按钮采用：btn_submit、btn_search 9)广告区域：ad_left,ad_right,ad_top,ad_bottom 2.主框架命名规则： 1)#header (页面头部) 2)#main (页面主体) 3)#footer (页面尾部) 3.通用命名规则： 主 体：main外层：wrap功能条：funcBar主导航：mainNav子导航：subNav友情链接：friendLink版 权：copyright页眉：header页脚：footer标题：title主导航：mainNav子菜单：subMenu注释：note面包屑：breadcrumb容器：container内容：content搜索：search登陆：Login当前状态：current页头：header标志：logo侧栏：sidebar广告：banner导航：nav子导航：subnav菜单：menu子菜单：submenu搜索：search滚动：scroll页面主体：main内容：content标签页：tab文章列表：list信息：msg提示技巧：tips栏目标题：title指南：guide服务：service热点：hot新闻：news下载：download注册：reg（register）状态：status按钮：btn投票：vote 4.常用简写命名规则： bd：Bodyhd：Headerfnt：字体nav：导航tb：表格lnk：链接ml/mr：margin-left/margin-rightlst：列表pl / pr / pd：padding-left/-right/paddingcol：栏目frm：表单con：内容inf：信息lg：Logoinp：Inputft：Footerbtn：Buttonmore：更多fl /fr float:left/float:righttit 标题栏spr 空行?t / d / mid / l / r：上 / 下?/?中 / 左 / 右bdr：边w：宽h：高 网站布局和样式文件命名 1.网站样式文件命名和样式从属关系 1)全局布局共用CSS文件：common（s包括cssreset（用来清除默认值）、全局性的一些属性值的定义，还有网站布局容器的共用的CSS部分：页眉、页脚、搜索共用CSS） 2)频道私有CSS文件：home.css（当前频道或者页面的CSS独有属性值以及为了兼容不同的浏览器的所采用的hack） 2.?网站布局： 网站采用目前最流行的960宽度布局；布局类型分为3栏和2栏两种方式。分栏宽度参考设计稿，如果没有设计稿就按下面的规则 两栏布局：主容器宽度为700px 副容器宽度为240px 三栏布局：依次为190px、510px、240px； 3.网站栏目： web页面上不同内容的组合方式：图片展示、图文组合、文字列表、标题段落、按钮等几种。所以common样式文件中按照如下规则定义： 1)全局框架通用样式 2)页眉 3)导航 4)搜索 5)页脚 6)内容列表通用样式 7)图片通用样式 8)表单通用样式 4.频道私有CSS文件：针对网站频道不同风格所以