前端开发规范,ui设计规范，css规范.doc

规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, , 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度. 开发过程中严格按分工完成页面, 以提高css复用率, 避免重复开发;减小沉冗代码, 书写所有人都可以看的懂的代码. 简洁易懂是一种美德. 为用户着想, ,文件命名规范文件夹命名采用英文,长度一般不超过20个字符,命名采用小写字母。文件夹命名如:Images(存放图形文件)flash(存放Flash文件)style/css(存放CSS文件)scripts(存放Javascript脚本)link(存放友情链接)media(存放多媒体文件)(SEO)进行命名(语义化),,用下划线隔开,头部分表示此图片的大类性质例如广告、标志、菜单、按钮等等。放置在页面顶部的广告、装饰图案等长方形的图片取名:banner标志性的图片取名为:logo在页面上位置不固定并且带有链接的小图片我们取名为button在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名:menu装饰用的照片我们取名:pic不带链接表示标题的图片我们取名:title下面是几个范例:、、、、、、、。:①命名考虑元素本身的作用和语义,通俗易懂。如red/left/big②组合命名[元素类型]-[元素作用/内容]如:搜索按钮:btn-search登录表单:form-login新闻列表:list-news③涉及到交互行为的元素命名凡涉及交互行为的元素通常会有正常、悬停、点击和已浏览等不同样式,命名可参考以下规则:鼠标悬停::hover  点击:click  已浏览:visited如:搜索按钮:btn-search、btn-search-hover、btn-search-visited备注1:常用标签命名对照表(注:命名尽量做到简短,规范,语义化。)标签标签说明备注wrapper/container外层容器包含(外套)header网页头部main-nav主导航/菜单top-nav顶部导航sub-nav侧导航/菜单drop-nav下拉导航/菜单sidebar侧栏main网站主要内容footer/copyright网站底部区域logo标志banner广告条tab切换书签login-bar登录条search-bar搜索条list列表(文章,企业,行业)ment评论order订单sh