アウトライン

レイアウトを計画し、全体構成を分割
コンテンツエリア、全体から部分、部分内の共通部分、コンテキストに応じてスタイルを適用

public-header( public-header)、tail (public-footer)
パブリックコンテナ(public-container/inner-center)

cssファイル、HTML構造、もっと考えてください

インライン要素を許可しないでくださいとブロックレベルの要素は同じレベルにあります
reset.css、common.css、index.css
フロート化する必要がある要素、親要素はすべてクリーンアップされ、統一クラスのclearfixが与えられます
幅と高さ: 偶数単位を使用します。

適切なコーディング標準と名前付け

名前付けのレベルは 3 つまで

属性と要素の賢い組み合わせはありますか

一部の画像を対象とするためにオーバーフローを使用します。、テキストは隠された状況を超えています。
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処理
始める前に
まだ準備ができていない場合は、このチュートリアルシリーズの最初の部分を読み終えることをお勧めします
:
写真を使用して、小さくてモダンな
をデザインしますショップ
製品ホームページ
、
2 番目の部分には
psd
が必要です最初の部分で完成した
ファイル。
最初のパートをスキップしたい場合は、最初のパートのソースファイルを直接ダウンロードできます。続行するには以下で必要になります。
ファイル構造を作成し、ファイルを準備します
1
デスクトップに新しい空のディレクトリを作成し、
という名前を付けますリオ
。
2
ポートフォリオ
の下に
画像
ディレクトリは写真を保存するために使用されます。
3
次に、2 つの空のファイル
styles.css
を作成します
index.html

ページコンテンツ

PSDファイルからHTMLへのチュートリアル共有

セクション-メイン
セクション追記（追加可能） /delete)
フッター
パブリックセクション

ページコンテンツ

ヘッダー

セクション-特集(追加/削除可能)

セクション名-1
セクション名-2
...
フッター
公開セクション

サイドバーデザインなし
```
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)

命名規則とアプリケーション

ラッピングクラス:wrap、inner

ブロッククラス:リージョン、ブロック、ボックス
構造クラス:hd、bd、ft、top 、bottom、left、right、middle、col、row、grid、span
リストクラス: list、item、field
一次および二次クラス: プライマリ、セカンダリ、サブ、マイナー
サイズカテゴリ: s、m、l、xl、大、小
ステータスカテゴリ: アクティブ、現在、チェック済み、ホバー、失敗、成功、警告、エラー、オン、オフ
导航类：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>

ログイン後にコピー