1.開發(fā)者工具（chrome）

此工具是我們的必備工具，以后代碼出了問題

我們首先第一反應(yīng)就是：

• “按F12”或者是 “shift+ctrl+i” 打開 開發(fā)者工具。
• 菜單： 右擊網(wǎng)頁空白出---檢查

<img src='./media/11開發(fā)人員工具.jpg'>

• 通過開發(fā)人員工具小指針工具，查找頁面元素
• 左側(cè)是html頁面結(jié)構(gòu)，右側(cè)是css樣式

<img src="media/good.png" />小技巧：

1. ctrl+滾輪 可以 放大開發(fā)者工具代碼大小。
2. 左邊是HTML元素結(jié)構(gòu) 右邊是CSS樣式。
3. 右邊CSS樣式可以改動數(shù)值和顏色查看更改后效果。
4. ctrl + 0 復(fù)原瀏覽器大小

2. sublime快捷操作emmet語法

Emmet的前身是Zen coding,它使用縮寫,來提高h(yuǎn)tml/css的編寫速度。

1. 生成標(biāo)簽 直接輸入標(biāo)簽名 按tab鍵即可 比如 div 然后tab 鍵， 就可以生成 <div></div>

2. 如果想要生成多個相同標(biāo)簽 加上 * 就可以了 比如 div*3 就可以快速生成3個div

3. 如果有父子級關(guān)系的標(biāo)簽，可以用 > 比如 ul > li就可以了

4. 如果有兄弟關(guān)系的標(biāo)簽，用 + 就可以了 比如 div+p

5. 如果生成帶有類名或者id名字的， 直接寫 .demo 或者 #two tab 鍵就可以了

6. 如果生成的div 類名是有順序的， 可以用 自增符號 $

   .demo$*3        
   <div class="demo1"></div>
   <div class="demo2"></div>
   <div class="demo3"></div>