于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>
      
  • 配合和细节的拍卖(放大100%上述,才会观看端倪)

    • 反思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的使用,页面部分内容而三栏布局得采用百分比来设置宽度(流式布局),实现当浏览器窗口宽度小于设计稿宽度时,允许出现横向滚动条,页面内容宽度保持无换,但是当浏览器窗口宽度超过设计稿宽度时,页面内容之宽保持与浏览器窗口宽度一致

响应式设计

比例计划

代码规范

  • 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,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.

    • iconfont平台

约定规则

  • 要词间以遭写道-一连 以吃写道连接,如.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。

尽使

  • 由此添加前缀修饰关键词

    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>
    

参考资料

  • 什么不好,又休知晓怎么命名class了
  • HTML整站结构设计
  • 慕课网《从psd到html》
  • Web重构之道

相关文章