如圖，選中某一個(gè)元素，然后在開發(fā)者工具的過(guò)濾器當(dāng)中有一個(gè)：HOV值點(diǎn)擊它，然后選取你需要查找的偽類。

注：因?yàn)檎Ｇ闆r下點(diǎn)擊一個(gè)元素屬性，你是看不到它的偽類的。

點(diǎn)擊出現(xiàn)偽類后，你就可以在這個(gè)上面直接更改樣式了。

比如顏色，可以直接在開發(fā)者工具中自帶的畫板中吸取頁(yè)面中你想要的顏色，然后確定就可以更改了。

咱們?cè)谥谱骶W(wǎng)頁(yè)時(shí)，UI圖上的顏色也可以拿開發(fā)者自帶的畫板吸取確定顏色。

6，如何添加新的類，復(fù)制和刪除原來(lái)的類？

過(guò)濾器欄中最右邊有一個(gè).CLS選項(xiàng)，它可以添加新的類，這個(gè)功能主要是添加CSS原樣式中存在的類，通過(guò)調(diào)用其它類樣式到當(dāng)前元素中來(lái)，從而查看新的樣式。

.CLS右邊的十號(hào)作用是復(fù)制當(dāng)前類，可重新在新類中布置新的樣式。特別是在舊類樣式代碼非常多的情況下重新布局樣式，這時(shí)候用新增一個(gè)類的方法就很方便，新類復(fù)制到編碼器當(dāng)中也省不少事。

7，如何快速增加元素的樣式？

谷歌瀏覽器自帶了4個(gè)快速增加屬性的按鈕，如圖上4個(gè)圖標(biāo)，從左到右分別是應(yīng)：

文本shadow-文本元素陰影效果

箱型shadow-塊級(jí)元素陰影效果

color-字體顏色

背景color-背景顏色

有人可能會(huì)問(wèn)怎么才能找到它們呢？可能細(xì)心的同學(xué)已經(jīng)發(fā)現(xiàn)了。

當(dāng)鼠標(biāo)懸浮在類欄中，右邊會(huì)出現(xiàn)一個(gè)三個(gè)小點(diǎn)的按鈕，點(diǎn)擊它便會(huì)出現(xiàn)這四個(gè)按鈕了。

最后，頁(yè)面樣式修改完成后，我們就該保存啦?？梢杂腥N方式保存修改后的代碼。

①?gòu)拈_發(fā)者工具類里面復(fù)制代碼到你的代碼編輯器。

②直接在頁(yè)面上CTRL + S另存為即可，這種比較暴力，適合F12大幅度修改后的頁(yè)面。

③也可以對(duì)照開發(fā)者工具，在WebStorm或VScode代碼編輯器中敲上去····

四，思考

1，如何通過(guò)F12開發(fā)者工具來(lái)學(xué)習(xí)優(yōu)秀網(wǎng)站的設(shè)計(jì)？

比如在開發(fā)過(guò)程中遇到了一些很難的布局，或者產(chǎn)品經(jīng)理的一些要求你沒(méi)有想到一些很好的方法來(lái)實(shí)現(xiàn)的，大家就可以借鑒一下別的網(wǎng)站的設(shè)計(jì)。

如圖上，我們可以打開F12的源來(lái)查看HTML或者CSS樣式，JavaScript的的的樣式。通過(guò)借鑒別的網(wǎng)站的代碼來(lái)參悟自己想要實(shí)現(xiàn)的布局。

五。一些常見(jiàn)問(wèn)題

問(wèn)題一：如何用F12查詢偽類？

在F12中有一個(gè)：HOV值，點(diǎn)擊它然后勾選你需要查找的偽類就能在底下顯示出來(lái)了。

問(wèn)題二：如何用F12查看CSS文件？

點(diǎn)擊F12中的資源，就能看見(jiàn)頁(yè)面中包含的文件，然后找到CSS文件，JS文件的查找也是同樣的辦法。

問(wèn)題三：如何使用F12修改文字陰影效果？

在F12中有四個(gè)按鈕是專門修改陰影效果，塊級(jí)元素效果，字體顏色，塊級(jí)顏色的。

點(diǎn)擊需要修改的元素，在元素里面點(diǎn)擊Ť圖標(biāo)就可以形象的同步更改字體的陰影效果了。

最新評(píng)論