纲要

  • 计划布局,划分整体结构

  • 内容区域,从整体到局部,局部中的通用部分,根据上下文应用样式

    • 公共头部(public-header)、尾部(public-footer)
    • 公共容器(public-container/inner-center)
  • css文件,html结构,多考虑

    • 不要让内联元素与块级元素处于同一级别下,如a标签与div标签
    • reset.css、common.css、index.css
    • 需要浮动的元素,父元素统统进行清理,给予统一的类clearfix
    • 宽高度:使用偶数单位。
  • 良好的代码规范和命名

    • 不超过三级命名
  • 巧妙属性和元素配合,还有没有更好的方案

    • 活用overflow,针对一些图片、文字超出隐藏的情况。

    • text-overflow,超出的文字部分,省略号显示。

    • a标签可以嵌套任何p,h,div等标签(按照新的规范)一般见于同一组标题、图片文字组合等链接同一个地方的,那么大一块地方都需要链接样式去跳转,这样做比较方便。

      1. <a href="#" class="title">
      2. <h4>Voluptate cillum fugiat.</h4>
      3. <p class="comment">Cheese, tomato, mushrooms, onions.</p>
      4. </a>
  • 兼容和细节的处理(放大100%以上,才能看出端倪)

    • 反思HTML结构是否合理

      • 调试错误的时候,让错误的视觉效果极大化,更容易看出问题。
    • css Hack处理

整体结构

  • page-content

    • header
    • section-feature(可增/删)
    • section-main
    • section-postscript(可增/删)
    • footer
  • 公共部分
    • inner-center

or

  • page-content

    • header
    • section-feature(可增/删)
    • section-name-1
    • section-name-2
    • ...
    • footer
  • 公共部分
    • inner-center/public-container

section-main

无边栏设计

  1. section.section-main>.inner-center

左边栏设计

  1. section.section-main>.inner-center
  2. aside.aside-left
  3. main.main>.content

双边栏设计

  1. section.section-main>.inner-center
  2. aside.aside-left
  3. main.main>.content
  4. aside.aside-right

特定需求

固定宽度设计

  1. .inner-center{
  2. width: 980px;
  3. margin-left: auto;
  4. margin-right: auto;
  5. }

所有宽度都以像素为单位,这种布局最简便,适用于一些本身内容比较少的页面。

无论浏览器窗口多大,它们的尺寸总是不变,无法充分利用可用空间。此时可以使用

  1. min-width: 980px

配合min-width的使用,页面部分内容如三栏布局可以使用百分比来设置宽度(流式布局),实现当浏览器窗口宽度小于设计稿宽度时,允许出现横向滚动条,页面内容宽度保持不变,但是当浏览器窗口宽度大于设计稿宽度时,页面内容的宽度保持和浏览器窗口宽度一致

响应式设计

百分比设计

代码规范

命名约定与应用

常见class关键词

  • 布局类:header, footer, container, main, content, aside, page, section

  • 包裹类:wrap, inner

  • 区块类:region, block, box

  • 结构类:hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span

  • 列表类:list, item, field

  • 主次类:primary, secondary, sub, minor

  • 大小类:s, m, l, xl, large, small

  • 状态类:active, current, checked, hover, fail, success, warn, error, on, off

  • 导航类:nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last

  • 交互类:tips, alert, modal, pop(弹出层), panel, tabs, accordion, slide,error --scroll, overlay,

  • 星级类:rate, star

  • 分割类:group, seperate, divider

  • 等分类:full, half, third, quarter

  • 表格类:table, tr, td, cell, row

  • 图片类:img, thumbnail, original, album, gallery

  • 语言类:cn, en

  • 论坛类:forum, bbs, topic, post

  • 方向类:up, down, left, right

  • 其他语义类:btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user, login, register, join, del, add, confirm;message, tab, current, note,guide, service, hot, news, download, vote, partner, copyright, demo, summary, pages, themes, set, blog, photo, guestbook, global; view, status, loading...

  • 对于命名的具体应用,可以查看W3school

  • 图片命名与图标命名,index-header-logo,index-footer-logo.

约定规则

  • 关键词间以中划线-连接 以中划线连接,如.item-img
  • 使用两个中划线表示特殊化,如.item-img.item-img--small表示在.item-img的基础上特殊化
  • 状态类直接使用单词,参考上面的关键词,如.active, .checked
  • 图标以icon-为前缀(字体图标采用.icon-font.i-name方式命名),详情应用见CSS Icons,可以下载参考Bootstrap的图标语义命名。
  • 模块采用关键词命名,如.slide, .modal, .tips, .tabs,特殊化采用上面两个中划线表示,如.imgslide--full, .modal--pay, .tips--up, .tabs--simple
  • js操作的类统一加上js-前缀
  • 不要超过四个class组合使用,如.a.b.c.d
  • 一个类名,不要超过三个单词的连接。
  • 主体结构命名前加上该页的命名,如index-banner,index-main。

实践应用

  • 通过添加前缀修饰关键词

    1. public-header,article-headerindex-banner,index-panel
  • 通过层级关系特殊化类,一般子元素接着父元素的最后一个单词(继承式)

    1. ul.card-list
    2. li.list-item
    3. a.item-img-link>img.item-img
    4. h3.item-tt>a.item-tt-link
    5. p.item-text
    6. <ul>
    7. <li>
    8. <a href="#"><img src="" alt=""></a>
    9. <h3><a href="#"></a></h3>
    10. <p></p>
    11. </li>
    12. </ul>

参考资料

从psd文件到html的更多相关文章

  1. PSD文件在MAC上和在WINDOWS上的大小有本质区别

    因为偷懒在MAC上的美工,发我的PSD文件,我就直接在上面做了= =后来不知道为什么无论我怎么合并图层.PSD的大小永远都是107M....然后忍无可忍重新画就从107M变成2M.....MAC为什么 ...

  2. 通过 imagick 让 PHP 生成 PSD 文件缩略图

    第一步.安装ImageMagick 首先需要安装 ImageMagick ,因为 imagick 是一个可以供 PHP 调用 ImageMagick 功能的PHP扩展.(目前最新版本是:ImageMa ...

  3. 使用 PSD Validator 在线校验 PSD 文件的质量

     PSD Validator 可以帮助你在线校验 PSD 文件的质量,使用的规则来自 Photoshop Etiquette.Photoshop Etiquette 整理了 PSD 文件的规范,例如删 ...

  4. Blend 打开psd文件

    1.创建完项目后->文件->导入ps文件->选择psd文件

  5. psd文件导出为图片教程

    美术给过来PSD文件好多层啊.怎么挨个把需要的图片导出来呢. 1. 选中 要导出的图片的图层 2.ctrl+N 新建个文档  然后把图片拉到 新的里面 然后点图像-裁剪 确定就行了,然后ctrl+s保 ...

  6. Blend_技巧篇_导入PSD文件制作ToggleButton (Z)

    原文:Blend_技巧篇_导入PSD文件制作ToggleButton (Z) 系统: Win7sp1 32位 IDE: Microsoft VisualStudio 2013 Ultimate Ble ...

  7. C# 读写 Photoshop PSD文件 操作类

    分析了PSD的文件....才发现PSD的RGB色彩保存也是 先红 蓝 绿 这样保存的 ....麻烦的.. 另外8BIM好象没什么用..可以直接跳过..直接获取最后的图形信息就可以了.. 我只对一些PS ...

  8. 程序员PS技能(四):程序员创建PSD文件、展示简单PSD设计流程,上传PSD至蓝湖,并下载Demo切图

    前言   本篇是程序员仿照ui设计创建psd且切图五个按钮效果上传至蓝湖,本篇篇幅较长,整体完成一个目标,没有分篇幅了.   前提条件   已经安装了PS,已经在PS上安装了蓝湖插件,并且曾经已经上传 ...

  9. CocoStudio资源区导入Plist/PSD文件

    这两种文件在使用中和普通文件稍有不同,下作简单介绍.如有不适的地方欢迎批评指正. 首先简单说一下Plist文件,Plist文件通常用于储存用户设置,也可以用于存储捆绑的信息,该功能在旧式的Mac OS ...

随机推荐

  1. 洛谷 P1372 又是毕业季I

    可能所有的数论题都是这样玄学.... 题目链接:https://www.luogu.org/problemnew/show/P1372 这道题通过暴力的枚举可以发现是不可做的(当然我也不会做) 然后就 ...

  2. 【MySQL】20个经典面试题

    转自:https://blog.csdn.net/suifenglie/article/details/78919045 Part1:经典题目 1.MySQL的复制原理以及流程 基本原理流程,3个线程 ...

  3. Android中include标签的使用(打开引用布局,隐藏当前布局)

    在开发app的时候,有时候一个布局会反复用到,可以把反复用到的布局单独写一个xml文件,什么时候用到就用includ标签引入xml 下面是我写的反复用到的一个xml,里面有2个button,一个Tex ...

  4. Kibana源码分析--Hapijs路由设置理解笔记

    [ES6解构赋值]:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_ ...

  5. 蓝桥-青蛙跳杯子(bfs)

    问题描述 X星球的流行宠物是青蛙,一般有两种颜色:白色和黑色. X星球的居民喜欢把它们放在一排茶杯里,这样可以观察它们跳来跳去. 如下图,有一排杯子,左边的一个是空着的,右边的杯子,每个里边有一只青蛙 ...

  6. poj3190

    一.题意:有n头牛,每头牛需要占用一个时间段的时间来挤奶,且必须有机器.问最少需要多少个机器 二.思路:区间贪心.把尽量多的牛放在一个棚子里,这样就可以使得用到的棚子数最少.只要任意两头牛的挤奶时间不 ...

  7. 「bzoj1003」「ZJOI2006」物流运输 最短路+区间dp

    「bzoj1003」「ZJOI2006」物流运输---------------------------------------------------------------------------- ...

  8. 一套完整的VI包含哪些元素

    VI设计,即视觉识别系统,企业VI设计是企业品牌建设的重中之重.最近很多人都在问,一套完整的企业VI设计都包括哪些内容?笔者站在一个高级设计师的角度,来简单谈一谈VI设计包括哪些内容.文中指出,一套完 ...

  9. C#中if和#if区别

    if的作用是程序流控制,会直接编译.执行.#if是对编译器的指令,其作用是告诉编译器,有些语句行希望在条件满足时才编译. --------------------------------------- ...

  10. 抓包来看ftp状态码

    1.quit退出 客户端输入退出命令: 退出的抓包数据交换过程: 2.用户登录,输入正确用户名和错误用户名都是返回331请求输入密码,这里不再将错误用户名的抓包数据交换过程截图. 数据交换过程: 服务 ...