如何让你瞬间拥有百万粉丝 前端F12的那些装X小技巧
如何讓你瞬間擁有百萬(wàn)粉絲 前端F12的那些裝X小技巧
大家好，我叫亓官劼（qí guān jié ），在CSDN中記錄學(xué)習(xí)的點(diǎn)滴歷程，時(shí)光荏苒，未來(lái)可期，加油~博客地址為：亓官劼的博客，亓官劼的博客2。
本篇文章就來(lái)教你如何瞬間突破百萬(wàn)粉絲，細(xì)數(shù)前端那些裝X的小技巧
開(kāi)始之前，我們先丟張效果圖出來(lái)，給大家先預(yù)覽下效果。
下面我們就進(jìn)入正題了，我們?nèi)绾蝸?lái)實(shí)現(xiàn)這樣一的效果吧。
首先這個(gè)圖的數(shù)據(jù)呢是假的啦，這里我們只是修改了前端的數(shù)據(jù)，不可以刷新的。這里我們修改了數(shù)據(jù)，并且添加了我們需要的各種大神的圖標(biāo)~很多小伙伴們都會(huì)修改數(shù)值，但是不知道如何去添加這樣的一個(gè)圖片，這篇文章將帶你來(lái)實(shí)現(xiàn)我們這樣的一個(gè)效果圖，帶你在裝X的路上越走越遠(yuǎn)！
修改數(shù)值
??修改數(shù)值很多小伙伴都會(huì)啦，這里大多數(shù)瀏覽器我們按F12即可到我們的網(wǎng)頁(yè)檢查器界面，也是我們?yōu)g覽器前端的一個(gè)調(diào)試頁(yè)面。頁(yè)面為：
Safari瀏覽器的網(wǎng)頁(yè)檢查器的打開(kāi)方式為：
再打開(kāi)網(wǎng)頁(yè)檢查器之后，我們需要定位到我們需要修改的數(shù)據(jù)的位置，這里一個(gè)一個(gè)找當(dāng)然是不存在的啦，博主太懶了！那我們?cè)趺炊ㄎ荒?#xff1f;我們網(wǎng)頁(yè)檢查器中有一個(gè)十字準(zhǔn)星，有的瀏覽器是一個(gè)小箭頭，點(diǎn)擊一下，然后我們就進(jìn)入到了選擇元素的模式。
點(diǎn)擊之后，我們?cè)儆檬髽?biāo)點(diǎn)擊我們需要修改的數(shù)據(jù)，即可跳轉(zhuǎn)到我們html代碼中的位置啦！
??這樣我們就可以定位到我們數(shù)據(jù)的位置了，然后我們只需要修改其中的數(shù)值就可啦，這里<span>現(xiàn)在是6666，我們可以把他修改為任意數(shù)值，然后回車(chē)即可！
??其他地方的數(shù)值的修改也是一樣的啦，我們只需要重復(fù)的定位我們需要修改的數(shù)值的html代碼位置，然后修改他的數(shù)值即可。下面我來(lái)看看如何添加/修改我們的圖標(biāo)吧！
添加圖標(biāo)、博客專(zhuān)家
添加博客專(zhuān)家
??下面我們來(lái)為我們的主頁(yè)添加一個(gè)博客專(zhuān)家的圖標(biāo)吧，博主本來(lái)不是博客專(zhuān)家的，這里的圖標(biāo)是后添加的。
我們首先定位到我們個(gè)人主頁(yè)的這里的一個(gè)div，我們點(diǎn)擊定位之后發(fā)現(xiàn)他是在一個(gè)div里的，然后我們查看其他博客專(zhuān)家的一個(gè)圖標(biāo)位置，他是和TA的個(gè)人主頁(yè)在同一個(gè)div里的，所以我們這里就是直接找一個(gè)博客專(zhuān)家的圖片的div代碼，然后添加到這里就好啦！
我們把下面這段代碼復(fù)制到我們?cè)镜?lt;span>之前即可：
<span class="flag expert"><a href="https://blog.csdn.net/home/help.html#classicfication" target="_blank"><svg class="icon" aria-hidden="true"><use xlink:href="#csdnc-blogexpert"></use></svg>博客專(zhuān)家</a><span class="bubble hide hideAnimate bubble-expert">已認(rèn)證的專(zhuān)家</span></span>這里的<div class = "profile-info-name-boxFooter">的完整代碼為：
<div class="profile-intro-name-boxFooter"><span class="flag expert"><a href="https://blog.csdn.net/home/help.html#classicfication" target="_blank"><svg class="icon" aria-hidden="true"><use xlink:href="#csdnc-blogexpert"></use></svg>博客專(zhuān)家</a><span class="bubble hide hideAnimate bubble-expert">已認(rèn)證的專(zhuān)家</span></span><span class="personal-home-page"><a target="_blank" href="https://me.csdn.net/qq_43422111">TA的個(gè)人主頁(yè) ></a></span> </div>這樣我們的博客專(zhuān)家圖標(biāo)就成功的添加上去啦！效果圖為：
修改等級(jí)圖標(biāo)
??然后我們?cè)賮?lái)修改一下我們的等級(jí)圖片，我們積分上去了，等級(jí)還是那么低，那不就露餡了！！！所以我們要搞就要搞全套。我們先定位我們的等級(jí)圖標(biāo)的位置：
我們發(fā)現(xiàn)我們等級(jí)圖標(biāo)的鏈接的一個(gè)圖片，圖片的名稱(chēng)為#csdnc-bloglevel-6,挺巧的是，我們的等級(jí)也是6級(jí)，那我們把他改為CSDN的最高等級(jí)15看看效果！改完之后，我們發(fā)現(xiàn)他的圖標(biāo)也變成了15級(jí)的圖標(biāo)：
這樣我們的一個(gè)等級(jí)圖標(biāo)的修改也就完成了!
添加榮譽(yù)勛章
下面我來(lái)為我們添加點(diǎn)榮譽(yù)勛章，大佬怎么會(huì)沒(méi)勛章呢？對(duì)吧，我們說(shuō)干就干！還是老套路，限定位到我們的代碼，我們發(fā)現(xiàn)他的每個(gè)圖標(biāo)都是在一個(gè)div中，那我們?nèi)绻覀兿胩砑訄D標(biāo)的話(huà)，只需要將我們想到他圖標(biāo)的對(duì)應(yīng)div復(fù)制過(guò)來(lái)就好啦：
下面提供幾個(gè)勛章的代碼，大家可以自己選擇喜歡的插入到我們的主頁(yè)中：
GitHub:
圖書(shū)勛章：
<div class="icon-badge" title="圖書(shū)勛章"><div class="mouse-box"><img src="https://csdnimg.cn/medal/tushu@120.png" alt=""><div class="icon-arrow"></div></div><div class="grade-detail-box" style="top: -100px;"><div class="pos-box"><div class="left-box d-flex justify-content-center align-items-center flex-column"><img src="https://csdnimg.cn/medal/tushu@120.png" alt=""><p>圖書(shū)勛章</p></div><div class="right-box">CSDN技術(shù)圖書(shū)作者專(zhuān)屬勛章 </div></div></div></div>技術(shù)圈認(rèn)證(專(zhuān)家版)：
<div class="icon-badge" title="技術(shù)圈認(rèn)證（專(zhuān)家版）"><div class="mouse-box"><img src="https://csdnimg.cn/medal/blog_expert_medal@120.png" alt=""><div class="icon-arrow"></div></div><div class="grade-detail-box" style="top: -100px;"><div class="pos-box"><div class="left-box d-flex justify-content-center align-items-center flex-column"><img src="https://csdnimg.cn/medal/blog_expert_medal@120.png" alt=""><p>技術(shù)圈認(rèn)證（專(zhuān)家版）</p></div><div class="right-box">博客專(zhuān)家完成年度認(rèn)證，即可獲得 </div></div></div></div>博客之星-前十名：
<div class="icon-badge" title="博客之星-前十名"><div class="mouse-box"><img src="https://csdnimg.cn/medal/bokezhixing4-10@240.png" alt=""><div class="icon-arrow"></div></div><div class="grade-detail-box" style="top: -100px;"><div class="pos-box"><div class="left-box d-flex justify-content-center align-items-center flex-column"><img src="https://csdnimg.cn/medal/bokezhixing4-10@240.png" alt=""><p>博客之星-前十名</p></div><div class="right-box">授予每年博客之星評(píng)選結(jié)果第4-10名的用戶(hù) </div></div></div></div>大家好，我叫亓官劼（qí guān jié ），在CSDN中記錄學(xué)習(xí)的點(diǎn)滴歷程，時(shí)光荏苒，未來(lái)可期，加油~博客地址為：亓官劼的博客，亓官劼的博客2。
博客之星：
<div class="icon-badge" title="博客之星"><div class="mouse-box"><img src="https://csdnimg.cn/medal/bokezhixing@120.png" alt=""><div class="icon-arrow"></div></div><div class="grade-detail-box" style="top: -100px;"><div class="pos-box"><div class="left-box d-flex justify-content-center align-items-center flex-column"><img src="https://csdnimg.cn/medal/bokezhixing@120.png" alt=""><p>博客之星</p></div><div class="right-box">授予通過(guò)"CSDN博客之星評(píng)選"中脫穎而出的十大博客之星稱(chēng)號(hào)的用戶(hù)。 </div></div></div></div>1024勛章：
<div class="icon-badge" title="1024勛章"><div class="mouse-box"><img src="https://csdnimg.cn/medal/1024@120.png" alt=""><div class="icon-arrow"></div></div><div class="grade-detail-box" style="top: -100px;"><div class="pos-box"><div class="left-box d-flex justify-content-center align-items-center flex-column"><img src="https://csdnimg.cn/medal/1024@120.png" alt=""><p>1024勛章</p></div><div class="right-box">#1024程序員節(jié)#活動(dòng)勛章，當(dāng)日發(fā)布原創(chuàng)博客即可獲得 </div></div></div></div>原力探索：
<div class="icon-badge" title="原力探索"><div class="mouse-box"><img src="https://csdnimg.cn/medal/yuanli_tansuo@120.png" alt=""><div class="icon-arrow"></div></div><div class="grade-detail-box" style="top: -72px;"><div class="pos-box"><div class="left-box d-flex justify-content-center align-items-center flex-column"><img src="https://csdnimg.cn/medal/yuanli_tansuo@120.png" alt=""><p>原力探索</p></div><div class="right-box">參與《原力計(jì)劃【第二季】— 學(xué)習(xí)力挑戰(zhàn)》的文章入選【每日精選】的博主 </div></div></div></div>原力計(jì)劃專(zhuān)屬勛章：
<div class="icon-badge" title="原力計(jì)劃專(zhuān)屬勛章"><div class="mouse-box"><img src="https://csdnimg.cn/medal/yuanlijihua@120.png" alt=""><div class="icon-arrow"></div></div><div class="grade-detail-box" style="top: -72px;"><div class="pos-box"><div class="left-box d-flex justify-content-center align-items-center flex-column"><img src="https://csdnimg.cn/medal/yuanlijihua@120.png" alt=""><p>原力計(jì)劃專(zhuān)屬勛章</p></div><div class="right-box">參與原力計(jì)劃活動(dòng)，成功進(jìn)入英雄榜即可獲得 </div></div></div></div>原力突破：
<div class="icon-badge" title="原力突破"><div class="mouse-box"><img src="https://csdnimg.cn/medal/yuanli_tupo@120.png" alt=""><div class="icon-arrow"></div></div><div class="grade-detail-box" style="top: -72px;"><div class="pos-box"><div class="left-box d-flex justify-content-center align-items-center flex-column"><img src="https://csdnimg.cn/medal/yuanli_tupo@120.png" alt=""><p>原力突破</p></div><div class="right-box">參與《原力計(jì)劃【第二季】— 學(xué)習(xí)力挑戰(zhàn)》的文章入選【學(xué)習(xí)力挑戰(zhàn)周榜】的博主 </div></div></div></div>學(xué)習(xí)力：
<div class="icon-badge" title="學(xué)習(xí)力"><div class="mouse-box"><img src="https://csdnimg.cn/medal/yuanli_xuexili@120.png" alt=""><div class="icon-arrow"></div></div><div class="grade-detail-box" style="top: -72px;"><div class="pos-box"><div class="left-box d-flex justify-content-center align-items-center flex-column"><img src="https://csdnimg.cn/medal/yuanli_xuexili@120.png" alt=""><p>學(xué)習(xí)力</p></div><div class="right-box">參與《原力計(jì)劃【第二季】— 學(xué)習(xí)力挑戰(zhàn)》獲得推薦的原創(chuàng)文章的博主 </div></div></div></div>勤寫(xiě)標(biāo)兵Lv4:
<div class="icon-badge" title="勤寫(xiě)標(biāo)兵Lv4"><div class="mouse-box"><img src="https://csdnimg.cn/medal/qixiebiaobing4@120.png" alt=""><div class="icon-arrow"></div></div><div class="grade-detail-box" style="top: -106px;"><div class="pos-box"><div class="left-box d-flex justify-content-center align-items-center flex-column"><img src="https://csdnimg.cn/medal/qixiebiaobing4@120.png" alt=""><p>勤寫(xiě)標(biāo)兵Lv4</p></div><div class="right-box">授予每個(gè)自然周發(fā)布9篇以上（包括9篇）原創(chuàng)IT博文的用戶(hù)。本勛章將于次周周三上午根據(jù)用戶(hù)上周的博文發(fā)布情況由系統(tǒng)自動(dòng)頒發(fā)。 </div></div></div></div>1024超級(jí)勛章：
<div class="icon-badge" title="1024超級(jí)勛章"><div class="mouse-box"><img src="https://csdnimg.cn/medal/chaoji1024@120.png" alt=""><div class="icon-arrow"></div></div><div class="grade-detail-box" style="top: -86px;"><div class="pos-box"><div class="left-box d-flex justify-content-center align-items-center flex-column"><img src="https://csdnimg.cn/medal/chaoji1024@120.png" alt=""><p>1024超級(jí)勛章</p></div><div class="right-box">授予原創(chuàng)文章總數(shù)達(dá)到1024篇的博主，感謝你對(duì)CSDN社區(qū)的貢獻(xiàn)，CSDN與你一起成長(zhǎng)。 </div></div></div></div>還有更多有意思的圖標(biāo)就靠小伙伴們自己去發(fā)現(xiàn)啦！前面修改完之后的效果圖就是這樣子啦：
這些裝X的小技巧你都學(xué)會(huì)了嗎~可以拿去修改你的主頁(yè)完啦！
大家好，我叫亓官劼（qí guān jié ），在CSDN中記錄學(xué)習(xí)的點(diǎn)滴歷程，時(shí)光荏苒，未來(lái)可期，加油~博客地址為：亓官劼的博客，亓官劼的博客2。
總結(jié)
以上是生活随笔為你收集整理的如何让你瞬间拥有百万粉丝 前端F12的那些装X小技巧的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 超牛逼的异步协程爬虫
- 下一篇： 这年头学爬虫还就得会点 scrapy 框