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

如何讓你瞬間擁有百萬粉絲 前端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/[email protected]" 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/[email protected]" 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/[email protected]" 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/[email protected]" 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/[email protected]" 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/[email protected]" 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/[email protected]" 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/[email protected]" 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/[email protected]" 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/[email protected]" 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/[email protected]" 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/[email protected]" 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/[email protected]" 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/[email protected]" 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/[email protected]" 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/[email protected]" 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/[email protected]" 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/[email protected]" 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/[email protected]" 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/[email protected]" 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/[email protected]" 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/[email protected]" 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/[email protected]" 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/[email protected]" alt="">
                                                <p>1024超級勳章</p>
                                            </div>
                                            <div class="right-box">
                                                授予原創文章總數達到1024篇的博主,感謝你對CSDN社區的貢獻,CSDN與你一起成長。                                            </div>
                                        </div>
                                    </div>
                                </div>

還有更多有意思的圖標就靠小夥伴們自己去發現啦!前面修改完之後的效果圖就是這樣子啦:
在這裏插入圖片描述

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

大家好,我叫亓官劼(qí guān jié ),在CSDN中記錄學習的點滴歷程,時光荏苒,未來可期,加油~博客地址爲:亓官劼的博客亓官劼的博客2

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章