博客园美化

更新时间：2020-01-10

参考了很多大贤的博客，总结尝试后，随笔记录。原帖网址如下：

静默虚空：https://www.cnblogs.com/jingmoxukong/p/7826982.html

Penn000：https://www.cnblogs.com/Penn000/p/6947472.html

Menxin:  https://www.cnblogs.com/menxin-/p/11154509.html

一、页面CSS代码

    将以下代码复制粘贴到页面css代码栏中，不同参数代表的页面目标我已经在代码注释里标出来了，自行调节就好，以rgba（255,0,0,0.5）为例，255,0,0表示红色，0.5表示透明度。可使用颜色在线转换器将颜色的16进制转换为rgba格式。

    要构想出一个大致的样式，事先想好风格、效果，修改颜色后将代码粘入，最后进行微调。

#home {
    margin: 0 auto;/*元素外边距*/
    width: 80%;/*原始65*/
    min-width: 980px;/*页面顶部的宽度*/
    background-color: rgba(254,254,254, 0.5);/*页面背板颜色，建议如果有背景图片的话，透明度高一些，不会遮挡*/
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(255,0,0,0.7);/*背板边缘光晕*/
}
body {
    background:rgba(154,252,0,0.05);/*网页背景颜色*/
    background-position: 50% 5%; 
    background-size: cover;
}
#blogTitle {
    height: 90px;
    clear: both;
    background-color: rgba(245, 245, 245, 0);/*名字栏背景颜色，建议为白色，其他颜色有点怪，不好协调*/
}
#blogTitle h1 {
    font-size: 36px;
    font-weight: bold;
    line-height: 1.8em;/*原始 1.6em*/
    margin-top: 10px;/*原始 15px */
    color: #548B54;
}
#blogTitle h2 {
    font-weight: normal;
    font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/      
    line-height: 1.8;
    color: #111;
    font-weight: bold;
    text-align: right;
    float: right; 
}
#navigator{
    background-color: rgba(255,0,0,0.8);/*主页面大标题框颜色*/
}
#navList a:link, #navList a:visited, #navList a:active{
    color: #eee;
    font-size: 18px;
    font-weight: bold;
}
.blogStats{
    color: #eee;
}
.postTitle {
    border-left: 8px solid rgba(255,0,0, 0.8);/*随笔小标题前小方块颜色*/
    margin-left: 10px;
    margin-bottom: 10px;
    font-size: 20px;
    float: right;
    width: 100%;
    clear: both;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: #FF0000;/*随笔小标题颜色*/
    transition: all 0.4s linear 0s;
}
.postTitle a:hover {
    margin-left: 10px;
    color: #030303;/*随笔小标题鼠标点击时颜色颜色*/
    text-decoration: none;
}
.postCon {
    float: right;
    line-height: 1.5em;
    width: 100%;
    clear: both;
    padding: 10px 0;
}

.day .postTitle a {
    padding-left: 10px;
}
.day {
    background: rgba(255,255,255,0.5);/*纯白*/
}
/*文章附加信息*/
.postDesc {   
    background: url(images/posted_time.png) no-repeat 0 1px;
    color: #030303;
    float: left;
    width: 100%;
    clear: both;
    text-align: left;     
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 13px;
    padding-right: 20px;/*5px  padding-left: 90px;posted 发表时间左边距离*/
    margin-top: 20px;
    line-height: 1.8;
    padding-bottom: 35px;
}
.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, 
.catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, 
.catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
{
    background: rgba(255, 255, 255, 0.5);/*侧边栏小背板颜色*/
    margin-bottom: 35px;
    word-wrap: break-word;
}

.CalTitle{
    background:  rgba(255, 255, 255, 0.5);/*日历栏标题栏颜色*/
}
.catListTitle{
    background-color: rgba(255,0,0,0.8);/*侧边栏标题框颜色*/
}

#topics{
    background: rgba(255, 255, 255, 0.5);
}

.c_ad_block{
    display: none;
}

#tbCommentBody{
    width: 100%;
    height: 200px;
    background: rgba(255, 255, 255, 0.5);
}

#q{background: rgba(255, 255, 255, 0);}

.CalNextPrev{background: rgba(255, 255, 255, 0);}

.cnblogs_code{
    background: rgba(255, 255, 255, 0);
}

.cnblogs_code div{
    background: rgba(255, 255, 255, 0); 
}

.cnblogs_code_toolbar{
    background: rgba(255, 255, 255, 0); 
}
#main{min-width: 640px;}
.entrylist{
    background: rgba(255, 255, 255, 0.5); 
}

css代码

二、页首HTML代码

<!-- ............自定义首部代码开始............ -->
<!-- 自定义进度条 -->
<div id="myProgressBar"></div>

<!-- 自定义导航条 -->
<div id="mynavbar">
    <div style="position:relative;65pc;height:70px;margin:0 auto;">
        <a style=" auto;height: 22px;margin-left: 25px;" href="https://www.cnblogs.com/Piggio/">
            <img style=" auto;height: 22px;outline: 0;margin-top: 25px;" src="">
        </a>
        <div id="mynavbar_menu">
            <a href="https://www.cnblogs.com/Piggio/">首页</a>
            <a href="https://i.cnblogs.com/Configure.aspx">设置</a>
            <a href="javascript;">联系</a>
            <a href="javascript;">Github</a>
            <a href="https://www.cnblogs.com/">博客园</a>
        </div>
    </div>
</div>

<!-- 自定义头部锚点 -->
<a name="mtop"></a>

<!-- 自定义头部 -->
<div id="myheader">
    <!-- 背景图片 -->
    <div id="myheader_bg"></div>
    <!-- 遮罩层 -->
    <div id="myheader_cover" title="点我点我">
        <!-- 博客标题 -->
        <div id="mypost_title">
            <div id="mypost_title_h" style="font-weight: 500;font-size: 21px;">SanEr丶</div>
            <div id="mypost_title_f">Published on 2017-09-02 11:31 in 暂未分类 with SanEr丶</div>
            <div id="mypost_title_e">
                <a href="https://www.cnblogs.com/Piggio/p/12171171.html" style="">暂未分类</a>
            </div> 
        </div>  
    </div>
</div>