如何讓你瞬間擁有百萬粉絲 前端F12的那些裝X小技巧

大家好，我叫亓官劼（qí guān jié ），在CSDN中記錄學習的點滴歷程，時光荏苒，未來可期，加油~博客地址為：亓官劼的博客，亓官劼的博客2。

本篇文章就來教你如何瞬間突破百萬粉絲，細數前端那些裝X的小技巧
開始之前，我們先丟張效果圖出來，給大家先預覽下效果。

---

下面我們就進入正題了，我們如何來實現這樣一的效果吧。
首先這個圖的數據呢是假的啦，這里我們只是修改了前端的數據，不可以刷新的。這里我們修改了數據，并且添加了我們需要的各種大神的圖標~很多小伙伴們都會修改數值，但是不知道如何去添加這樣的一個圖片，這篇文章將帶你來實現我們這樣的一個效果圖，帶你在裝X的路上越走越遠！

修改數值

??修改數值很多小伙伴都會啦，這里大多數瀏覽器我們按F12即可到我們的網頁檢查器界面，也是我們瀏覽器前端的一個調試頁面。頁面為：

Safari瀏覽器的網頁檢查器的打開方式為：

再打開網頁檢查器之后，我們需要定位到我們需要修改的數據的位置，這里一個一個找當然是不存在的啦，博主太懶了！那我們怎么定位呢？我們網頁檢查器中有一個十字準星，有的瀏覽器是一個小箭頭，點擊一下，然后我們就進入到了選擇元素的模式。

點擊之后，我們再用鼠標點擊我們需要修改的數據，即可跳轉到我們html代碼中的位置啦！

??這樣我們就可以定位到我們數據的位置了，然后我們只需要修改其中的數值就可啦，這里<span>現在是6666，我們可以把他修改為任意數值，然后回車即可！

??其他地方的數值的修改也是一樣的啦，我們只需要重復的定位我們需要修改的數值的html代碼位置，然后修改他的數值即可。下面我來看看如何添加/修改我們的圖標吧！

添加圖標、博客專家

添加博客專家

??下面我們來為我們的主頁添加一個博客專家的圖標吧，博主本來不是博客專家的，這里的圖標是后添加的。
我們首先定位到我們個人主頁的這里的一個div，我們點擊定位之后發現他是在一個div里的，然后我們查看其他博客專家的一個圖標位置，他是和TA的個人主頁在同一個div里的，所以我們這里就是直接找一個博客專家的圖片的div代碼，然后添加到這里就好啦！

我們把下面這段代碼復制到我們原本的<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>博客專家</a><span class="bubble hide hideAnimate bubble-expert">已認證的專家</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>博客專家</a><span class="bubble hide hideAnimate bubble-expert">已認證的專家</span></span><span class="personal-home-page"><a target="_blank" href="https://me.csdn.net/qq_43422111">TA的個人主頁 &gt;</a></span> </div>

這樣我們的博客專家圖標就成功的添加上去啦！效果圖為：

修改等級圖標

??然后我們再來修改一下我們的等級圖片，我們積分上去了，等級還是那么低，那不就露餡了！！！所以我們要搞就要搞全套。我們先定位我們的等級圖標的位置：

我們發現我們等級圖標的鏈接的一個圖片，圖片的名稱為#csdnc-bloglevel-6,挺巧的是，我們的等級也是6級，那我們把他改為CSDN的最高等級15看看效果！改完之后，我們發現他的圖標也變成了15級的圖標：

這樣我們的一個等級圖標的修改也就完成了!

添加榮譽勛章

下面我來為我們添加點榮譽勛章，大佬怎么會沒勛章呢？對吧，我們說干就干！還是老套路，限定位到我們的代碼，我們發現他的每個圖標都是在一個div中，那我們如果我們想添加圖標的話，只需要將我們想到他圖標的對應div復制過來就好啦：

下面提供幾個勛章的代碼，大家可以自己選擇喜歡的插入到我們的主頁中：
GitHub:

<div class="icon-badge" title="GitHub"><div class="mouse-box"><img src="https://csdnimg.cn/medal/github@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/github@120.png" alt=""><p>GitHub</p></div><div class="right-box">綁定GitHub第三方賬戶獲取 </div></div></div></div>

圖書勛章：

<div class="icon-badge" title="圖書勛章"><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>圖書勛章</p></div><div class="right-box">CSDN技術圖書作者專屬勛章 </div></div></div></div>

技術圈認證(專家版)：

<div class="icon-badge" title="技術圈認證（專家版）"><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>技術圈認證（專家版）</p></div><div class="right-box">博客專家完成年度認證，即可獲得 </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">授予每年博客之星評選結果第4-10名的用戶 </div></div></div></div>

大家好，我叫亓官劼（qí guān jié ），在CSDN中記錄學習的點滴歷程，時光荏苒，未來可期，加油~博客地址為：亓官劼的博客，亓官劼的博客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">授予通過"CSDN博客之星評選"中脫穎而出的十大博客之星稱號的用戶。 </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程序員節#活動勛章，當日發布原創博客即可獲得 </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">參與《原力計劃【第二季】— 學習力挑戰》的文章入選【每日精選】的博主 </div></div></div></div>

原力計劃專屬勛章：

<div class="icon-badge" title="原力計劃專屬勛章"><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>原力計劃專屬勛章</p></div><div class="right-box">參與原力計劃活動，成功進入英雄榜即可獲得 </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">參與《原力計劃【第二季】— 學習力挑戰》的文章入選【學習力挑戰周榜】的博主 </div></div></div></div>

學習力：

<div class="icon-badge" title="學習力"><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>學習力</p></div><div class="right-box">參與《原力計劃【第二季】— 學習力挑戰》獲得推薦的原創文章的博主 </div></div></div></div>

勤寫標兵Lv4:

<div class="icon-badge" title="勤寫標兵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>勤寫標兵Lv4</p></div><div class="right-box">授予每個自然周發布9篇以上（包括9篇）原創IT博文的用戶。本勛章將于次周周三上午根據用戶上周的博文發布情況由系統自動頒發。 </div></div></div></div>

1024超級勛章：

<div class="icon-badge" title="1024超級勛章"><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超級勛章</p></div><div class="right-box">授予原創文章總數達到1024篇的博主，感謝你對CSDN社區的貢獻，CSDN與你一起成長。 </div></div></div></div>

還有更多有意思的圖標就靠小伙伴們自己去發現啦！前面修改完之后的效果圖就是這樣子啦：

這些裝X的小技巧你都學會了嗎~可以拿去修改你的主頁完啦！

大家好，我叫亓官劼（qí guān jié ），在CSDN中記錄學習的點滴歷程，時光荏苒，未來可期，加油~博客地址為：亓官劼的博客，亓官劼的博客2。

總結

以上是生活随笔為你收集整理的如何让你瞬间拥有百万粉丝 前端F12的那些装X小技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。