計劃布局，劃分整體結構

內容區域，從整體到局部，局部中的通用部分，根據上下文應用樣式

公共頭部（html' target='_blank'>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= # >
兼容和細節的處理（放大100%以上，才能看出端倪）
反思HTML結構是否合理
css Hack處理
開始之前
 
如果你還沒有準備好，我們建議您閱讀完這個教程系列的第一部分
: 
用
photoshop
設計一個小型、現代的
產品主頁
 
，
 
因為第二部分需要第一部分做好了的
psd
文件。
 
如果你想跳過第一部分，你可以直接在第一部分中下載源文件，下面將會需要它才能繼續。
 
創建文件結構，準備文件
 
1 
在桌面上創建新的空目錄，取名
portfolio
。
 
2 
在
portfolio
目錄下面繼續創建
images
目錄用于存放圖片。
 
3 
接下來創建兩個空文件
 
styles.css
和
index.html
 
整體結構
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 a href= # img src= alt= /a  h3 a href= # /a /h3  p /p  /li  /ul 
參考資料
什么鬼，又不知道怎么命名class了
HTML整站結構設計
慕課網《從psd到html》
以上就是從psd文件到html教程分享的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。