很多剛進入前端行業的小伙伴在寫頁面的時候，很容易出現錯誤，這時候很多小伙伴就會一行行查看自己的代碼哪里有問題，或者仔細的對比網上代碼，這樣查看錯誤很浪費時間，而且陷入了自己的思維里面看不出錯誤在哪里。

　　下面呢，教大家如何快速的查找錯誤及解決問題。其實，咱們的瀏覽器就有控制臺及一些輔助工具等幫助我們查找錯誤，在這里我使用的Chrome(谷歌瀏覽器)的控制臺來進行錯誤的查找。打開控制臺方式有兩種，一種在瀏覽器中點擊鼠標右鍵，選擇檢查，如下圖：

　　另一種，直接通過快捷鍵F12(如果F12不行，可以試一下Fn+F12)，調出來控制臺。

　　好了，了解完這些以后，我們來看一下都有哪些錯誤，以及如何通過控制臺查看錯誤進行更改。

　　先寫一個比較簡單的效果，寫一個div標簽，給這個div寫一個寬200px，高100px，背景顏色為粉色

　　HTML結構

　　CSS樣式

　　div{width: 200px; height: 100px; background-color: pink;}

　　上面是想象中的樣子，完美。但實現效果上可能是這樣的：

　　出現問題的時候，穩住別慌，通過控制臺查看一下，首先看一下css樣式有沒有引入成功，上面說到過控制臺左邊為html標簽，右邊是css屬性，我們先選中div看一下右邊有沒有寫的css屬性

　　1、在這里看到右邊css那里沒有我們寫的寬高背景顏色，一種可能是我們css沒有引入成功，如果使用的是外部樣式表，可以去查一下自己寫的路徑對不對;如果路徑不對，一般在控制臺會顯示一個紅色的×，如下圖：

　　2、另一種可能我們寫的這個標簽的css修飾前多寫了標點符號。如下圖:

　　3、那如果我們在這里使用了class選擇器、id選擇器或者其他的選擇器，要注意選擇器的使用及名字的設置。不然也會出現顯示不了咱們的css修飾。

　　4、好了，在往下看，如果css還是沒有出來，就看一下單詞是否拼對、屬性和屬性值是否匹配。單詞不對，或屬性和屬性值不匹配那么控制臺的css屬性前面會出現一個黃色的感嘆號，并且會把錯誤的屬性劃掉，如下圖，這個時候就需要你查一下單詞和屬性了。

　　5、還有我們在網頁導航的時候會給導航項加邊框，代碼如下：

　　HTML結構：

　　CSS樣式：

　　我們要取消第一個或者最后一個的邊框，我們給第一個或最后一個li加class名取消邊框，發現取消不了，而且屬性和屬性值檢查了一遍是對的，在控制臺中也顯示了，只不過被劃掉了(注意只是劃掉，但沒有黃色感嘆號)，這個時候可能是選擇器權重不夠

　　那么我們可以通過包含選擇題增加權重，找到父元素的class名，添加到前面就可以

　　css代碼修改

　　.nav .noborder{border-left:0}

　　這樣就解決了。

　　最后總結一下：

　　1. 沒有相應CSS屬性，查引入路徑或看選擇符前是否多加標點

　　2. 控控制臺出現感嘆號并且被劃掉，單詞拼寫錯誤或屬性屬性值不匹配

　　3. 控控制臺出現屬性被劃掉但沒有感嘆號，權重不夠

　　再有前端的小伙伴遇到了上述幾種錯誤，可以嘗試通過上面的方式去解決一下，這些問題一般都是常見的，遇到幾次解決之后注意避免就可以啦~更多關于“前端培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學，課程大綱緊跟企業需求，更科學更嚴謹，每年培養泛IT人才近2萬人。不論你是零基礎還是想提升，都可以找到適合的班型，千鋒教育隨時歡迎你來試聽。