1. 簡介
本章主要講開發(fā)自己的作品集網(wǎng)頁，其間，遵循響應(yīng)式設(shè)計原則來開發(fā)作品集可以使得作品集在各種設(shè)備上面都能得到最好呈現(xiàn)。
2. 基于網(wǎng)格的設(shè)計
目光移動軌跡 - 從上到下，從左到右.png
基于目光移動軌跡的特性，在設(shè)計網(wǎng)頁時也可，即先看標(biāo)題，再看圖片，后看文章標(biāo)題，最后細(xì)節(jié)文字。這種設(shè)計就是基于網(wǎng)格（grid-based layout）的設(shè)計。
3. 構(gòu)建一個框架
CSS可以控制元素的寬度，因此網(wǎng)格結(jié)構(gòu)當(dāng)從 CSS 當(dāng)中實現(xiàn)。你可以通過各種方式修改CSS從而達(dá)到控制布局，但創(chuàng)建可控制布局的 CSS 類被認(rèn)為是目前最好的做法。這些 CSS 類集被成為框架（framework）。
4. 響應(yīng)式網(wǎng)頁
5. 定義布局
6. 練習(xí)：框架
當(dāng)前許多的網(wǎng)頁設(shè)計會將屏幕分割為
9. 負(fù)空間
凌亂且過于擁擠的文字信息并不利于讀者接收；而適當(dāng)?shù)目瞻卓梢愿纳七@個體驗。在設(shè)計中有一個概念叫負(fù)空間（negative space），也就是不包含任何內(nèi)容的空間。這樣的空白區(qū)域有助于突出文字，使其更易于閱讀，頁面更井井有條。
在Inspect Element種：
element.style {
padding: 10px;
}
內(nèi)邊距（padding）是在元素之間創(chuàng)建負(fù)空間的絕佳手段，也可以利用margin去創(chuàng)建負(fù)空間。
10. 溢出
如果要在很小的區(qū)域內(nèi)放置大量文本，溢出（overflow）功能就可以派上用場。溢出機(jī)制確保用戶可以利用滾動瀏覽所有文本。
.css_class_name {
overflow: auto;
}
11. 媒體查詢（Media Query）
媒體查詢隨著設(shè)備屏幕大小改變CSS。
@media only screen and (max-width: 300px) {}
12. CSS重設(shè) (Resetting)
一些網(wǎng)站在不同的瀏覽器上看上去和操作起來是不同的。為了確保CSS樣式在所有的瀏覽器上得到相同的詮釋
<head> <link rel="stylesheet" src="http://normalize-css.googlecode.com/svn/trunk/normalize.css"> </head>
