從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處理

總體結構

• 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=""></a> 
            <h3><a href="#"></a></h3> 
            <p></p> 
        </li> 
    </ul>

參考資料

• 什麼鬼，又不知道怎麼命名class了
• HTML整站結構設計
• 慕課網《從psd到html》
• Web重構之道