寫在前面:最近申請了博客,想自己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碼。
- CSS代碼來源 brsjdys
(元素審查獲得)
臨時先這樣,不定時更新