淘寶店鋪裝修教程之學(xué)會此技能6到?jīng)]朋友

這是一篇基礎(chǔ)教程，假如看官連這道坎兒都過不去的話，后面的裝修會讓你夠嗆！假如能成功渡劫的話，后面的代碼玩起來會賊6！

想必很多看官都會碰到這樣的情況：別人家的特效賊6，可惜自己復(fù)制不了代碼；別人家的主圖挺不錯，可惜自己獲取不了原圖；明明是一個很簡單的問題，自己卻要四處找人浪費(fèi)大把的時間才把問題解決......

假如看官有以上癥狀，說明看官是時候需要提升下自己的實(shí)力了！而本文只是眾多轉(zhuǎn)折點(diǎn)中的一個，能否成功6到?jīng)]朋友還需要看看官是否愿意付出了。好了，廢話不多說，開工！

不管看官是從事淘寶美工還是web前端還是后端，要是不會個審查元素簡直沒法見人！

有這么嚴(yán)重嗎？

身為美工，平時找素材、找代碼碰到權(quán)限問題怎么破？

身為前端，頁面布局有問題和js出現(xiàn)報(bào)錯怎么破？

身為后端，返回?cái)?shù)據(jù)到前端時請求異常怎么破？

雖然審查元素并不能完全解決所有問題，但對我們的工作還是非常有幫助的！

下面來介紹下審查元素的用法和一點(diǎn)小功能，讓看官感受下她的神奇！

打開任意一個瀏覽器(推薦360極速)，在頁面空白地方右鍵--點(diǎn)擊審查元素，然后就喚醒了瀏覽器的調(diào)試功能。如圖：

需要注重的是：不同的瀏覽器命名可能不同，但這并不影響功能。

當(dāng)然了，假如看官覺得上面的方法太low的話，可以來個騷操作--按下F12即可(注重這是一個鍵不是3個鍵)。怎么樣，是不是感覺瞬間厲害了許多！

2.1、界面

點(diǎn)擊審查元素后的界面是這個樣子：

藝靈已在圖中大致的標(biāo)識了下，界面分三塊。上面是視圖區(qū)，左側(cè)是代碼區(qū)，右側(cè)是css區(qū)。這三個區(qū)域是一一對應(yīng)的關(guān)系。

2.2、查看淘寶網(wǎng)的logo

下面，藝靈以獲取淘寶網(wǎng)的logo為例，給看官展示下如何使用這個技能。

首先打開淘寶網(wǎng)，然后鼠標(biāo)放到淘寶的logo上面，然后右鍵，然后點(diǎn)擊審查元素，此時我們可以看到高亮的logo和代碼以及可以看到logo的尺寸。如圖：

下面我們點(diǎn)開代碼中的a標(biāo)簽，然后看看里面是不是一個img標(biāo)簽。此時可以看到，a標(biāo)簽里面并沒有img標(biāo)簽，但logo卻是顯示的。如圖：

看官是不是有點(diǎn)迷惑？是不是想不通這個logo是怎么顯示的？

之所以用淘寶來講是因?yàn)檫@個例子比較典型，是一個相對而言技術(shù)含量偏高的一個操作。

藝靈也不賣關(guān)子了，直接開講了。注重前面我們說了，審查元素的界面被分為三塊，現(xiàn)在我們只顧著前兩塊了忘記了第三塊，所以我們來看看第三塊吧。如圖：

注重看右側(cè)css中有一個background屬性。看官是不是猜到了什么？

沒錯！logo就在這里！當(dāng)我們把鼠標(biāo)放到該屬性的值上面時，可以看到淘寶的logo圖像。如圖：

2.3、獲取src

歷經(jīng)千辛萬苦，終于可以大干一場了！下面我們就把淘寶網(wǎng)的logo給拿出來吧！

好的！

10秒鐘后，噗......

咋了？

不知該如何下手啊！

注重了！繼續(xù)右鍵--Copylinkaddress就可以了。如圖：

現(xiàn)在我們就已經(jīng)獲取到了logo的src地址。

2.4、修改src

既然講了獲取，下面就來講下修改。因?yàn)槠饺照{(diào)試時，這些都是必不可少的步驟。

下面藝靈就教在看官如何把百度的logo換成淘寶的logo。

直接在地址欄中打開百度的首頁，然后鼠標(biāo)放到logo上右鍵，然后點(diǎn)擊審查元素，這個時候會定位到代碼上。然后我們雙擊屬性，然后把后面的值刪除選中后進(jìn)行右鍵，然后粘貼，接下來在任意空白地方單擊就行了。如圖：

此時可以看到百度的logo已經(jīng)變成淘寶的了。如圖：

2.5、刪除

這個實(shí)際情況中用的不多，還是來提下吧。

首先在左側(cè)找到要刪除的代碼塊，然后右鍵，點(diǎn)擊Deleteelement即可。

還拿剛才的例子來講，我們已經(jīng)把百度的logo替換成了淘寶的，現(xiàn)在我要刪除這塊代碼。步驟如下：

1、鼠標(biāo)放到logo上；

2、審查元素；

3、鼠標(biāo)放到img標(biāo)簽上右鍵；

4、點(diǎn)擊Deleteelement就完成了操作。如圖：

2.6、復(fù)制

復(fù)制也是經(jīng)常會用到的一個操作，大致步驟：在想要復(fù)制的代碼塊上右鍵，然后點(diǎn)擊Copy，然后點(diǎn)擊Copyelement即可。如圖：

2.7、修改

這個修改跟上面的修改是有區(qū)別的，這個修改也是適用于大范圍的，例如：代碼塊的修改。步驟跟復(fù)制一樣，只是很后一步有變化。大致步驟：在想要修改的代碼塊上右鍵，然后點(diǎn)擊EditasHTML，此時對應(yīng)的代碼塊處于可編輯狀態(tài)，編輯完成后在任意空白地方單擊即可保存。如圖：

上面藝靈已經(jīng)將審查元素的修改、復(fù)制、刪除等功能都講了一遍。假如看官需要把握的話，只有不斷的練習(xí)才行。這樣吧，給看官們留一道簡單的作業(yè)題：把今日頭條的logo換成淘寶的。看官可以在評論區(qū)中進(jìn)行回復(fù)哦~

對于文章中提到的這些演示案例，顯然在工作中是不符合實(shí)際的。這些演示中是為了給看官講解下大致的操作方法，所以看官在實(shí)際中需要靈活運(yùn)用。