博客園頁面DIY


寫在前面:最近申請了博客,想自己DIY,奈何水平太差,所以就只好選了個順眼的皮膚...

關於如何在公告欄顯示自己的頭像

看到別人博客公告欄可以顯示自己的頭像,所以去搜了搜怎么弄,emm,還是比較簡單的。

首先去自己的個人首頁

右鍵自己的頭像-選擇查看源代碼,或者是右鍵頭像-查看元素。

<img src="//pic.cnblogs.com/avatar/1494602/20180919234417.png" alt="洛沐辰的頭像" class="img_avatar">

選擇這一句復制,進入博客-設置

在如圖所示的地方粘貼。

大功告成!

注意:公告欄頭像不會更新,所以每次更換頭像都得重新配置。

關於如何在設置鼠標點擊的效果

由於自己不知道怎么寫這種代碼,只好拿別人的然后改一下。

關於設置自己博客的背景

一直以為CSS代碼需要自己寫,其實並不用,利用審查元素就可以。

body {
    color: #000;
    background: url(https://www.cnblogs.com/images/cnblogs_com/luoxiaoyi/1310432/o_psb.jpg) fixed;
    background-size: cover;
    background-repeat: no-repeat;
    font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
    font-size: 12px;
    min-height: 101%;
}

background后面括號里的網址是你要作為背景的圖片。
博客-管理-相冊,把想作為背景的大圖上傳。
點擊上傳的圖片,就會進入大圖的頁面,獲取地址方式同頭像。
改完之后發現博文頁面並不是透明的,加上以下代碼

#home {
    opacity: 0.80;
    margin: 0px auto;
    width: 70%;
    min-width: 950px;
    background-color: #fff;
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}

opacity后面的數字就是更改透明度。
注意:有些皮膚會有自帶的一些圖片,改背景可能會導致這些圖片顯得突兀。
我用的是simplememory,一個十分簡潔的皮膚。

公告欄的一些美化

用CSS把公告欄的代碼大改了一下
在左邊加上了一個小色塊。

.catListTitle {
    margin-top: 21px;
    margin-bottom: 10.5px;
    text-align: left;
    border-left: 10px solid rgba(102, 204, 255, 0.8);
    padding: 10px 0 14px 10px;
    background-color: #fff;
}

border-left 后面10px是色塊的大小,rgba括號里前三個數是顏色RGB碼。

臨時先這樣,不定時更新


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM