`
zizipo
  • 浏览: 23099 次
  • 性别: 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切图命名规范,好的规范,能提高质量和效率

    iOS_UI切图规范

    iOS UI切图规范是iOS应用开发中的一个重要环节,它涉及到普通界面、桌面图标以及启动图的制作和管理。切图的目的是为了确保应用在不同设备上以清晰、适配的视觉效果呈现。以下是具体的知识点详解: 1. **普通界面...

    iPhone及iPad切图规范

    本篇文章将详细介绍针对iPhone及iPad平台的切图规范,帮助开发者们更好地理解和掌握这些规范。 #### 二、基础知识 1. **分辨率与密度**: - **分辨率**:单位面积内像素点的数量。 - **屏幕密度**:通常用dpi...

    网页设计及切图规范

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

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

    Google地图切图规范是基于一个特定的切图方案来实现地图数据的组织和展现,该方案被广泛应用于网络地图服务中。其切图原理和细节包括以下几个方面: 1. 瓦片地图系统(Tiling Scheme):Google地图使用了瓦片地图...

    卡特曼-切图工具

    4. **自定义设置**:用户可以根据项目需求自定义切图的尺寸、边距和背景,确保切图符合设计规范。 5. **高效批处理**:允许一次性处理多个图层或整个文档,批量生成切图,提高工作效率。 6. **兼容性强**:...

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

    《29-应急基础底图服务切图技术规范(试行)》是一份针对应急基础底图服务制定的技术规范文件,旨在指导应急基础底图服务中的矢量切片和栅格瓦片数据的制作及管理。该规范由科技和信息化司于2020年12月发布,主要...

    切图工具及切图效果(真的很不错哦)

    5. 切图的命名规范:清晰的命名规则可以帮助团队成员更快地识别和使用切图。 总之,切图是前端开发流程中不可或缺的一部分,熟练掌握切图工具和技巧将有助于提升项目的质量和效率。选择一款合适的切图工具,并结合...

    切图+更新包

    4. **命名规范**:切图文件的命名应具有描述性且统一,便于开发者识别和使用。例如,使用`button_login.png`表示登录按钮的图像。 5. **版本控制**:在更新过程中,版本控制系统如Git是必不可少的,它可以帮助追踪...

    图片轮播,点击切图,鼠标移动切图,广告栏关闭

    在实际开发中,为了确保代码的可维护性和兼容性,应遵循良好的编程规范,使用模块化结构,以及考虑到不同浏览器和设备的适配问题。同时,为了优化性能,可以使用懒加载技术,只在图片即将进入视口时才加载,减少首屏...

    切图工具.7z

    2. **精确尺寸设置**:可以设置裁剪的宽度和高度,确保切出的图片尺寸符合设计规范,满足前端开发的需求。 3. **坐标定位**:通过坐标系统,用户可以精确到像素地定位裁剪位置,对于像素级别的设计工作尤为重要。 ...

    ios通话界面按钮切图

    总之,"ios通话界面按钮切图"这一资源包提供了构建iOS通话界面所需的图标,它们遵循了苹果的设计规范,尺寸多样,可能包含不同状态的按钮设计。这些图标将在应用的UI开发中起到关键作用,帮助实现直观、美观且易于...

    切图@2x@3x重命名工具

    这个"切图@2x@3x重命名工具"的工作原理是,它会自动去除图片文件名中的@2x或@3x后缀,然后根据iOS的文件组织规范,将这些图片分别放入"xh"(对应@1x)和"xxh"(对应@3x)两个文件夹中。这样,开发者可以方便地将这两...

    UI设计规范大全.zip

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

    ps切图小技巧

    8. **优化切图流程**:保持良好的组织习惯,如命名规范、文件分类,可以简化后期的查找和使用过程。同时,合理规划设计稿的图层结构,也能让切图更加顺畅。 总的来说,熟练掌握PS切图技巧是每个设计师和前端开发者...

    生活派切图demo.zip

    4. **命名规范**:为了方便管理和使用,切图通常会遵循一定的命名规则,如按功能、位置或颜色命名。 5. **整理打包**:将所有切图文件按照一定的目录结构打包,便于前端开发人员引用。 在前端开发过程中,这些切图...

    切图工具rar

    4. **版本管理**:保持切图文件的组织和命名规范,方便后期维护和更新。 综上所述,"切图工具rar" 提供的 "ImageSlicer.exe" 是一个方便设计师和开发者快速切割图片的实用工具,它简化了图像处理过程,提高了工作...

    前端切图神器avocode

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

    最新版divbrush自动切图排版DIV+CSS

    2. 文件管理:保持文件命名规范,便于后期查找和管理切图文件。 3. 学习和掌握CSS基础:尽管DivBrush简化了过程,但熟悉CSS语法仍是必要的,以便进行更精细的调整。 综上所述,DivBrush的最新版为网页设计师提供了...

    切图.rar

    在IT行业中,"切图"是一项非常重要的技能,特别是在网页设计和前端开发领域。切图,顾名思义,就是将设计师用图形编辑软件(如...在实际项目中,团队协作、良好的沟通和规范的工作流程对于切图的效率和效果至关重要。

Global site tag (gtag.js) - Google Analytics