博客园页面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码。

临时先这样，不定时更新

posted @ 2018-09-22 10:29  洛沐辰  阅读(1825)  评论(3)  编辑  收藏  举报