你說，上節(jié)課的都聽明白了，就是不懂。

這很正常，現(xiàn)在我們來說一個你以后在網(wǎng)頁前端道路上不可或缺的助手——“審查元素”（這是 Chrome 瀏覽器里的名字，而 Firefox 里叫做“查看元素”）。

其實很簡單，你對著你要研究的元素右鍵，然后選擇審查元素就行了。

然后我們就看到一個如下圖的界面（Firefox 中類似）：

左下方是網(wǎng)頁當(dāng)前用來顯示的代碼，先記住我這個說法，到后面我們研究 JavaScript 的時候你就明白我為什么這么說了。

現(xiàn)在深灰色的那行就是我們剛才右鍵的元素所對應(yīng)的代碼。而右側(cè)上邊的內(nèi)容就是這個元素所對應(yīng)的 CSS 代碼（只是與這個元素有關(guān)的部分哦）。

往下看，右下方那個黃色綠色藍(lán)色一層套一層的方塊，就是當(dāng)前元素的盒模型了，結(jié)合上節(jié)課的內(nèi)容，其實你稍微認(rèn)真看下就能理解了。

然后如果你覺得 CSS 一套一套的看著眼暈，就點擊那個 computed（計算后） 標(biāo)簽，意思就是把重復(fù)的合并，未生效的省略……之后，當(dāng)前元素實際的有效的 CSS 屬性和對應(yīng)的值。非常方便。

我們再回到左邊，用鼠標(biāo)在代碼上滑動（不是點擊，也不是拖動），你會看到一個藍(lán)色的條著重顯示你鼠標(biāo)指向的代碼。同時上面網(wǎng)頁上的某些元素會被用特殊的顏色標(biāo)識出來。所以現(xiàn)在你指哪行代碼，那行代碼所對應(yīng)的元素就會在頁面上標(biāo)記出來，而且你注意他的標(biāo)識顏色，與右下方盒模型的顏色是對應(yīng)的。這樣哪里是外補哪里是內(nèi)補就一目了然了。

然后說說那些小圖標(biāo)，左上那個小手機的標(biāo)志是移動設(shè)備視圖，現(xiàn)在我們還用不上，將來我們講響應(yīng)式網(wǎng)頁的時候會用到。右邊齒輪是設(shè)置，叉是關(guān)閉。那個一半黑一半白的圖標(biāo)是說現(xiàn)在這個面板所處的位置，你可以點擊它調(diào)整位置看看效果，反正再找相應(yīng)的圖標(biāo)點擊還能回來，怎么方便怎么用就是了。

這個簡單吧，你看我就這么幾句話，你還都能聽得懂，就把我們眼下用的到的都講清楚了。來給你講個案例讓你了解他的強大。

我們知道背景圖片是不可以右鍵另存為的，但是有的時候圖片真的很美，怎么把他們搞下來呢？我們打開 500px 來做實驗，在它的首頁大圖上右鍵，然后鼠標(biāo)在代碼上上下滑動找那行可以讓藍(lán)色正好覆蓋整整個圖片的代碼，其實也就是說這個元素的內(nèi)容部分正好和圖片一致，點擊這一行，然后看右側(cè)的 css ，上下滾動尋找 background 后面的網(wǎng)址，鼠標(biāo)放上去看看，會有圖片縮略圖，基本就是這張圖片了。如果沒找到，那么在上一層下一層元素查查也基本差不多了。

你說頁面不允許右鍵？那你按一下 F12 鍵試試看。當(dāng)然了，在這里還是要強調(diào)一下，技術(shù)無罪，但你得用來干正事，反正白茶同學(xué)說過：

長期盜圖，對投胎不好！

順便說一句，如果你在我下方所列出的四個站點之外看到本教程，基本上他們是盜版的?。?！

好了，回歸主題，有一句話說能看到就能改?。▉碜阅承眯≌f）用來形容這個工具還是十分恰當(dāng)?shù)?，反正那些代碼想改哪里雙擊就是了（你別很實在的雙擊里面鏈接就好）。然后盡情的修改和測試吧～～

這東西實在太過強大和有用，建議每天玩一會，玩懂他！

本章學(xué)習(xí)卡片：卡片 19

本書是收費的，不過交費憑自覺。價格定義為每人請我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號：

alay9999@163.com （劉源）

為了讓大家閱讀方便，本書將在如下站點發(fā)布，但最終內(nèi)容以主站為準(zhǔn)：

• 主站首發(fā)： http://coffee.zji.me/
• Gitbook: http://codeme.gitbooks.io/easy-web-code-book/
• 簡書： http://www.jianshu.com/users/d37eaf3de0ff
• 站酷： http://www.zcool.com.cn/u/12927742

未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請聯(lián)系： dms@zji.me