从psd文件到html

纲要

  • 安顿布局,划分全部布局
  • 剧情区域,从完整到一些,局地中的通用部分,依照上下文应用样式
    • 公物底部(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等标签(遵照新的标准)一般见于同一组标题、图片文字组合等链接同二个地点的,那么大学一年级块地方都急需链接样式去跳转,那样做相比较便利。

      <a href="#" class="title">
          <h4>Voluptate cillum fugiat.</h4>
          <p class="comment">Cheese, tomato, mushrooms, onions.</p>
      </a>
      
  • 匹配和细节的处理(放大百分百之上,才能收看端倪)

    • 反思HTML结构是还是不是创立
      • 调剂错误的时候,让错误的视觉效果非常的大化,更便于看到问题。
    • css Hack处理

总体布局

图片 1

  • 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

一定须求

永恒宽度设计

.inner-center{
    width: 980px;
    margin-left: auto;
    margin-right: auto;
}

抱有宽度都以像素为单位,那种布局最便捷,适用于有个别本人内容对比少的页面。
不管浏览器窗口多大,它们的尺码总是不变,不可能足够利用可用空间。此时得以行使

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操作的类统Nokia上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="图片 2"></a> 
            <h3><a href="#"></a></h3> 
            <p></p> 
        </li> 
    </ul>
    

参考资料

相关文章