`
zizipo
  • 浏览: 22618 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
最近访客 更多访客>>
社区版块
存档分类
最新评论

切图的一些规范和要求

 
阅读更多
1.相同的局部页面,DIV和CSS要完全一致,因为后台代码是引用关系。
  (1).对于可能复用的DIV,宽度尽量自适应。
2.简化DIV结机构
  (1).能够一层DIV,绝对不要用2层。
  (2)菜单的当前状态,尽量在<li>这种一层搞定,不要<li><a>都加新类来表示当前状态。
  (3)大部分clear可以采用:
.clearfix:after {display:block;clear:both;content'.';height:0px;visibility:hidden;font-size:0;}
.clearfix{*zoom:1;}
来实现,不用增加新的div结构,包含浮动div的DIV高度可以自适应。
3.浏览器兼容性
  (1)所有浏览器测试
  (2)js也同时测试。一些交互的风格,比如鼠标hover时的样式,最好在不同浏览器中也有测试。
4.CSS规范
  (1)CSS开始要清理元素的风格,越彻底越好。
  (2)默认字体,行高的全局设置。链接样式的全局设置。
  (3)注释,已经做得很好了,要坚持
  (4)命名,要有意义,且尽量不要与样式相关。如果有一天想把green_btn换成红色,还是叫green_btn这个就比较让人疑惑了。
   比如mt10,green_btn.比较好的account_subnav,audit_categories
  (5)对于特殊的属性,可以用上下文关系来定义,不要太多的定义类。
  (6)css hack的写法尽量统一。
  (7)表单,表格的规范切图方法请咨询师金龙。
思考的内容。
  1。CSS类是什么?类是指对相同元素属性的归集。如果DIV类太多,一个DIV有4-5个类,表示你归类不够,同样,如果每个DIV都有一个自己的类,说明你分类不够。这个度的把握比较艺术,请在实践中不断掌握。目标就是要保持CSS文件的大小适度。
  2.CSS的基本目的是风格和内容分离,请在切图的时候思考,未来哪些风格,表现会变化,现在的切图是否能再是修改CSS文件,不修改html文件的情况下适应变化。
分享到:
评论

相关推荐

    UI切图命名规范

    UI切图命名规范,好的规范,能提高质量和效率

    iPhone及iPad切图规范

    iPhone及iPad切图规范

    网页设计及切图规范

    网页布局设计相关内容,颜色设计,设计及切图规范。常用技巧包括图片装饰(圆角,外发光,阴影,透明度 渐变,旋转,透视,等)。切图时注意事项, 图片格式选择等。

    google地图的切图规范以及技术原理

    google 地图的切图规范说明。介绍 Google map 切图方式 ,切图原理。

    iOS_UI切图规范

    普通界面、桌面图标、启动图等。

    29-应急基础底图服务切图技术规范(试行).pdf

    29-应急基础底图服务切图技术规范(试行).pdf

    前端切图神器avocode

    完成设计一键上传,标注和切图自动生成,支持Sketch、PS、XD的设计原稿和设计图,全貌画板展示流程,页面任务完成度一目了然,设计规范自动采样生成,还可分类管理、同步应用、一键导出设计风格指南.前端工程师开心了,...

    UI设计规范大全.zip

    本文整理汇总了最新的界面设计中常用的一些ui尺寸规范和方法大全以及ui设计语言和原则,如控件间距、适配、标注、切图等,设计师在设计时并不一定要严格遵守,但对这些规范应有所了解,并融会贯通。

    严选视觉规范(移动端).pdf

    本文整理汇总了2020年最新的界面设计(iOS系统)中常用的一些ui尺寸规范和方法大全以及ui设计语言和原则,如控件间距、适配、标注、切图等,设计师在设计时并不一定要严格遵守,但对这些规范应有所了解,并融会贯通...

    sketchup规范命名插件NameOrganizer

    Name Organizer是一款由国人开发的sketchup图层及画板的快速命名插件,其实很多设计是在切图的时候总是不注意图层的命名,这样会导致后期与你进行协作的人总要话费时间修改图层名称或者找到需要的切图。这里西西提供...

    一款APP,从设计稿到切图

    依旧声明:这里写的不是一种规范,只是一种工作方法,大家在具体工作中,一定要灵活运用。另外,技术的更新是非常快的,我写的这些可能某些东西已经和你们的工程师搭档所用的方法不一样了,所以,还是要灵活运用~我...

    Watch系列表盘设计工具

    Watch系列表盘设计指导及规范 1. 制作流程 2. 预览图规格 3. 切图资源说明 4. 亮屏表盘的数据和默认数值要求 5. 熄屏表盘的数据和默认数值要求 6. 四大元素 7. 测试、自检和发布流程 1. 制作流程 1.1 表盘效果设计 ...

    UIDesigner(UI设计软件) v2.5.5.1 Beta1 官方安装版

    支持操作系统:XP/WIN7 需要.Net Framework 4.0的运行环境 可以让你的原型运行在iOS真机设备上,通过iTunes把 .uidp 文件复制到...团队协作,一气呵成:能够快速搭建交互原型,导入视觉切图、规范,最终生成演示Demo.

    Android资源命名规范

    对于复杂的应用而言,资源命名的规范很有必要。除了开发人员之外,UI设计人员(或者切图相关人员)也需要对资源使用的位置非常清楚,这样,沟通就会直接。缺点是资源名字长一些,但是从整体价值来看,值得。 命名...

    前端开发规范文档.zip

    前端开发:根据设计稿进行页面切图,将页面的设计转化为代码,然后使用HTML、CSS和JavaScript等技术语言进行页面的搭建和开发,同时关注页面的交互效果、动画效果等。 前端测试:测试页面的兼容性、响应式布局、用户...

    环球易购前端开发规范手册.zip

    前端开发:根据设计稿进行页面切图,将页面的设计转化为代码,然后使用HTML、CSS和JavaScript等技术语言进行页面的搭建和开发,同时关注页面的交互效果、动画效果等。 前端测试:测试页面的兼容性、响应式布局、用户...

    一份全面的前端开发规范手册.zip

    前端开发:根据设计稿进行页面切图,将页面的设计转化为代码,然后使用HTML、CSS和JavaScript等技术语言进行页面的搭建和开发,同时关注页面的交互效果、动画效果等。 前端测试:测试页面的兼容性、响应式布局、用户...

    Android资源命名规范 分享

    除了开发人员之外,UI设计人员(或者切图相关人员)也需要对资源使用的位置非常清楚,这样,沟通就会直接。缺点是资源名字长一些,但是从整体价值来看,值得。命名模板为:缩写_主界面_功能部分(一) 缩写:ic ——...

    div+css有实例,易学易懂

    3.3.2 一些CSS 的实用技巧 3.3.3 怎样调试CSS 3.4 关于CSS 的学习 第4 章 网页头部元素的详细定义 第41 页 4.1 DOCTYPE 的选择 4.1.1 什么是DOCTYPE 4.1.2 选择什么样的DOCTYPE 4.2 名字空间 4.3 编码问题 4.4 meta ...

Global site tag (gtag.js) - Google Analytics