綱要

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

公共頭部（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="#" class="title">
    <h4>Voluptate cillum fugiat.</h4>
    <p class="comment">Cheese, tomato, mushrooms, onions.</p>
</a>
```
登入後複製

相容與細節的處理（放大100%以上，才能看出端倪）

反思HTML結構是否合理
css Hack處理
#
如果你還沒準備好，我們建議您閱讀完這個教學系列的第一部分
#:
用
photoshop
設計一個小型、現代的
產品首頁
，
#
因為第二部分需要第一部分做好了的
psd
#檔。
如果你想跳過第一部分，你可以直接在第一部分下載來源文件，下面將會需要它才能繼續。
建立檔案結構，準備檔案
1
在桌面上建立新的空目錄，取名
portfolio
。
2
#在
portfolio
目錄下方繼續建立
images
目錄用於存放圖片。
3
#接下來建立兩個空白檔案
styles.css
#和
##index.html

整體結構

從psd檔案到html教學分享

section-feature（可增/刪除）
section-main
section-postscript（可增/刪）

##公共部分

# #page-content
##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
<ul>
     <li> 
        <a href="#"><img src="" alt=""></a> 
        <h3><a href="#"></a></h3> 
        <p></p> 
    </li> 
</ul>

登入後複製