很多剛進(jìn)入前端行業(yè)的小伙伴在寫(xiě)頁(yè)面的時(shí)候，很容易出現(xiàn)錯(cuò)誤，這時(shí)候很多小伙伴就會(huì)一行行查看自己的代碼哪里有問(wèn)題，或者仔細(xì)的對(duì)比網(wǎng)上代碼，這樣查看錯(cuò)誤很浪費(fèi)時(shí)間，而且陷入了自己的思維里面看不出錯(cuò)誤在哪里。

　　下面呢，教大家如何快速的查找錯(cuò)誤及解決問(wèn)題。其實(shí)，咱們的瀏覽器就有控制臺(tái)及一些輔助工具等幫助我們查找錯(cuò)誤，在這里我使用的Chrome(谷歌瀏覽器)的控制臺(tái)來(lái)進(jìn)行錯(cuò)誤的查找。打開(kāi)控制臺(tái)方式有兩種，一種在瀏覽器中點(diǎn)擊鼠標(biāo)右鍵，選擇檢查，如下圖：

　　另一種，直接通過(guò)快捷鍵F12(如果F12不行，可以試一下Fn+F12)，調(diào)出來(lái)控制臺(tái)。

　　好了，了解完這些以后，我們來(lái)看一下都有哪些錯(cuò)誤，以及如何通過(guò)控制臺(tái)查看錯(cuò)誤進(jìn)行更改。

　　先寫(xiě)一個(gè)比較簡(jiǎn)單的效果，寫(xiě)一個(gè)div標(biāo)簽，給這個(gè)div寫(xiě)一個(gè)寬200px，高100px，背景顏色為粉色

　　HTML結(jié)構(gòu)

　　CSS樣式

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

　　上面是想象中的樣子，完美。但實(shí)現(xiàn)效果上可能是這樣的：

　　出現(xiàn)問(wèn)題的時(shí)候，穩(wěn)住別慌，通過(guò)控制臺(tái)查看一下，首先看一下css樣式有沒(méi)有引入成功，上面說(shuō)到過(guò)控制臺(tái)左邊為html標(biāo)簽，右邊是css屬性，我們先選中div看一下右邊有沒(méi)有寫(xiě)的css屬性

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

　　2、另一種可能我們寫(xiě)的這個(gè)標(biāo)簽的css修飾前多寫(xiě)了標(biāo)點(diǎn)符號(hào)。如下圖:

　　3、那如果我們?cè)谶@里使用了class選擇器、id選擇器或者其他的選擇器，要注意選擇器的使用及名字的設(shè)置。不然也會(huì)出現(xiàn)顯示不了咱們的css修飾。

　　4、好了，在往下看，如果css還是沒(méi)有出來(lái)，就看一下單詞是否拼對(duì)、屬性和屬性值是否匹配。單詞不對(duì)，或?qū)傩院蛯傩灾挡黄ヅ淠敲纯刂婆_(tái)的css屬性前面會(huì)出現(xiàn)一個(gè)黃色的感嘆號(hào)，并且會(huì)把錯(cuò)誤的屬性劃掉，如下圖，這個(gè)時(shí)候就需要你查一下單詞和屬性了。

　　5、還有我們?cè)诰W(wǎng)頁(yè)導(dǎo)航的時(shí)候會(huì)給導(dǎo)航項(xiàng)加邊框，代碼如下：

　　HTML結(jié)構(gòu)：

　　CSS樣式：

　　我們要取消第一個(gè)或者最后一個(gè)的邊框，我們給第一個(gè)或最后一個(gè)li加class名取消邊框，發(fā)現(xiàn)取消不了，而且屬性和屬性值檢查了一遍是對(duì)的，在控制臺(tái)中也顯示了，只不過(guò)被劃掉了(注意只是劃掉，但沒(méi)有黃色感嘆號(hào))，這個(gè)時(shí)候可能是選擇器權(quán)重不夠

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

　　css代碼修改

　　.nav .noborder{border-left:0}

　　這樣就解決了。

　　最后總結(jié)一下：

　　1. 沒(méi)有相應(yīng)CSS屬性，查引入路徑或看選擇符前是否多加標(biāo)點(diǎn)

　　2. 控控制臺(tái)出現(xiàn)感嘆號(hào)并且被劃掉，單詞拼寫(xiě)錯(cuò)誤或?qū)傩詫傩灾挡黄ヅ?/p>

　　3. 控控制臺(tái)出現(xiàn)屬性被劃掉但沒(méi)有感嘆號(hào)，權(quán)重不夠

　　再有前端的小伙伴遇到了上述幾種錯(cuò)誤，可以嘗試通過(guò)上面的方式去解決一下，這些問(wèn)題一般都是常見(jiàn)的，遇到幾次解決之后注意避免就可以啦~更多關(guān)于“前端培訓(xùn)”的問(wèn)題，歡迎咨詢(xún)千鋒教育在線(xiàn)名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬(wàn)人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時(shí)歡迎你來(lái)試聽(tīng)。