From psd file to html tutorial sharing

Outline

• Plan layout, divide the overall structure

• Content area, from the whole to the part, the common part in the part, according to the context Application style

• Public header (public-header), tail (public-footer)

• Public container (public-container /inner-center)

• css file, html structure, think more

• Don’t let inline elements and blocks Level elements are at the same level

• reset.css, common.css, index.css

• Elements that need to be floated, parent elements are all processed Clean, give uniform classes clearfix

• Width and height: use even units.

• Good coding standards and naming

• No more than three levels of naming

• Ingenious combination of attributes and elements, is there any better solution?

• Use overflow to deal with the situation where some pictures and text are beyond hiding.

• text-overflow, the excess text part will be displayed with ellipses.

• a tag can be nested in any p, h, div and other tags (according to the new specifications). It is generally seen in the same group of titles, picture and text combinations, etc. that link to the same place, so large. Link styles are needed to jump to places, which is more convenient.

  <a href="#" class="title">
      <h4>Voluptate cillum fugiat.</h4>
      <p class="comment">Cheese, tomato, mushrooms, onions.</p>
  </a>

• Compatibility and detailed processing (zoom in more than 100% to see the clues)

• Reflect on HTML structure Is it reasonable

• css Hack processing

• Before starting

• If you are not ready yet, we recommend that you read the first part of this tutorial series

• :

• Use

• photoshop

• Design a small, modern

• product homepage

• ,

• Because the second part requires the first part Prepared

• psd

• file.

• If you want to skip the first part, you can download the source file directly in the first part, you will need it to continue below .

• Create the file structure and prepare the file

• 1

• Create a new empty directory on the desktop and name it

• portfolio

• .

• 2

• 在

• Continue to create the

• images

• directory below the portfolio

• ## directory to store images.

• 3

• Next create two empty files

• styles.css

• and

• index.html

Overall structure

• page -content

• header

• section-feature (can be added/deleted)

• section-main

• section-postscript (can be added/delete)

• footer

##Public part
inner-center
##or

page-content

• ##header

• section-feature (can be added/deleted)

• section-name-1

• section-name-2

• ...

• footer

• Public section

• inner-center/public-container

• section-main
No sidebar design

section.section-main>.inner-center

Left sidebar design

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

Double sidebar design

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

Specific needs

Responsive design

• Percent design

• ##Fixed width design

• Code specification

HTML(fex-team)

##CSS(fex-team)
Naming convention and application

• Common class keywords

Layout classes: header, footer, container, main, content, aside, page, section

Wrap class: wrap, inner
Block class: region, block, box
Structure Class: hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
List class: list, item, field
Primary and secondary categories: primary, secondary, sub, minor

• ##Size categories: s, m, l, xl, large, small

• Status class: 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》

The above is the detailed content of From psd file to html tutorial sharing. For more information, please follow other related articles on the PHP Chinese website!