下载此文档

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


文档分类:IT计算机 | 页数:约9页 举报非法文档有奖
1/9
下载提示
  • 1.该资料是网友上传的,本站提供全文预览,预览什么样,下载就什么样。
  • 2.下载该文档所得收入归上传者、原创者。
  • 3.下载的文档,不会出现我们的网址水印。
1/9 下载此文档
文档列表 文档介绍
规范目的
为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.
基本准则
符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度. 开发过程中严格按分工完成页面, 以提高css复用率, 避免重复开发;减小沉冗代码, 书写所有人都可以看的懂的代码. 简洁易懂是一种美德. 为用户着想, 为服务器着想.
1. 目录结构和文件夹,文件命名规范
文件夹命名采用英文,长度一般不超过20个字符,命名采用小写字母。文件夹命名如:
Images(存放图形文件)
flash(存放Flash文件)
style/css(存放CSS文件)
scripts(存放Javascript脚本)
link(存放友情链接)
media(存放多媒体文件)等
.html文件命名应遵循页面的内容或用途(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
顶部

前端开发规范,UI设计规范,css规范.doc 来自淘豆网www.taodocs.com转载请标明出处.

非法内容举报中心
文档信息
  • 页数9
  • 收藏数0 收藏
  • 顶次数0
  • 上传人yinjiong623147
  • 文件大小0 KB
  • 时间2015-10-30