欢迎使用CSDN-markdown编辑器

从psd文件到html

• 计划布局，划分整体结构
• 内容区域，从整体到局部，局部中的通用部分，根据上下文应用样式
  
  • 公共头部（public-header）、尾部（public-footer）
  • 公共容器（public-container/inner-center）
• css文件，html结构，多考虑
  
  • 不要让内联元素与块级元素处于同一级别下
  • reset.css、common.css、index.css
  • 需要浮动的元素，父元素统统进行清理，给予统一的类clearfix
  • 宽高度：使用偶数单位。
• 良好的代码规范和命名
  
  • 不超过三级命名

• 巧妙属性和元素配合，还有没有更好的方案

  • 活用overflow，针对一些图片、文字超出隐藏的情况。
  • text-overflow，超出的文字部分，省略号显示。

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

    <a href="#" class="title">
        <h4>Voluptate cillum fugiat.</h4>
        <p class="comment">Cheese, tomato, mushrooms, onions.</p>
    </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

无边栏设计

section.section-main>.inner-center  

左边栏设计

section.section-main>.inner-center
    aside.aside-left
    main.main>.content

双边栏设计

section.section-main>.inner-center
    aside.aside-left
    main.main>.content
    aside.aside-right

特定需求

• 响应式设计
• 百分比设计
• 固定宽度设计

代码规范

• HTML(fex-team)
• CSS(fex-team)

命名约定与应用

常见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, –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; view, loading…
• 图片命名与图标命名，index-header-logo,index-footer-logo.
  
  • iconfont平台

约定规则

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

实践应用

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

  public-header,article-header，index-banner,index-panel
  

• 通过层级关系特殊化类，一般子元素接着父元素的最后一个单词（继承式）

  ul.card-list 
      li.list-item 
          a.item-img-link>img.item-img 
          h3.item-tt>a.item-tt-link 
          p.item-text
  <ul>
       <li> 
          <a href="#"><img src="" alt=""></a> 
          <h3><a href="#"></a></h3> 
          <p></p> 
      </li> 
  </ul>
  

参考资料

• 什么鬼，又不知道怎么命名class了
• HTML整站结构设计
• 慕课网《从psd到html》