做一个简约的博客园皮肤

花了一天时间做了这个皮肤，单纯记录一下。用了各种布局（弹性浮动网格定位），当做是复习了！除了用头像之外好像没什么特别。注释有点乱啊感觉时间花费的最多的也就是配色了（-.-），皮肤嘛，最重要的就是看着开心。其中自动生成目录的功能是在网上找到。这里用到了自定义属性，方便一键更改主题~代码涉及到的css知识都可以在我之前写过的文章笔记中找到，就不在这里班门弄斧了

ok放代码

:root{
    --main-font:"微软雅黑","宋体",Arial;
    --white-color:#fff;
    --bg-color:#ebf1ed;
    --font-color:#595c5f;
    --post-titleColor:#657569;
    --other-color:#acacac;
    --tag:#a3b6a9;
    --p:#757070;
    font-size: 1em;
    box-sizing:border-box
}
*,::before,::after{box-sizing:inherit}
body{
    --font-slim:.8rem;
    --font-normal:1rem;
    --font-big:1.2rem;
    --font-bigger:1.4rem;
    --font-max:2rem;
}

/* 公用 */
html,body,*{
    padding:0;
    margin:0;
    font-size:var(--font-normal);
    font-family:var(--main-font);
    color: var(--font-color);
}
body{
    background-color: var(--bg-color);
}
/* 覆盖默认样式 */
ul {list-style:none;padding:0;}
a {color:var(--font-color);text-decoration:none;}
a:hover{text-decoration:none;}
h1,h2,h3,h4{margin:0;font-size: var(--font-normal);padding:0;}
#myposts{margin: 0}

/* 首页 */
#home {
    margin:0 auto;
    max-width:960px;
    overflow: hidden;
}
#header{
    background-color: var(--white-color);
    border-radius: .4em;
    height: 3em;
}
/* 头部 *//*导航栏容器*/
#navigator {
    font-size:var(--font-bigger);
    display: flex;
    justify-content: space-between;
}
#navigator ul {
    line-height: 3em;
}
/*导航栏*/
#navigator li{
    display: inline-block;
}   
#navigator li:hover{
    background:var(--tag);
}
#navigator li a {
    padding:0 2em;
    line-height:3em;
    display:inline-block;
}
#navigator li a:hover{
    color:var(--white-color);
}
#blogTitle{
    float: right;
    position: relative;
}

#blogTitle h1{
    margin-right: 8.5em;
}
#blogTitle a{
color:var(--post-titleColor);
}
/* 更换头像 */
#blogTitle h1:after{
    content: "";
    width: 2.5em;
    height: 2.5em;
    display: inline-block;
    position: absolute;
    top: .3em;
    border-radius: .3em;
    margin-left: 1em;
    background-image: url(https://i.loli.net/2020/09/26/CZA6B4PfjFVYT8e.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

/* 内容区域布局 */
#main {display: flex;min-width: 960px;}
/*主板*//* 标签管理主板 */
#mainContent,#taglist_main{flex:3;}
/*侧栏*/
#sideBar{flex: 1;margin-left: 2em;}
#sideBarMain{margin-top: 1em;}

/* 首页文章显示 */
.day *+*{
    margin-top: 1em;
}
.day,.entrylistItem,#taglist_main,.post{
    border-radius: .4em;
    margin-top: 1em;
    padding: 1em;
    background-color: var(--white-color);
}

#taglist_main #taglist{
    font-size: var(--font-slim);
}
/*博客标题*//*随笔档案标题 */
.postTitle,#mainContent a span {
    border-bottom: .5px solid var(--other-color);
}
.postTitle span{
    color: var(--post-titleColor)
}

/* 摘要 (包含档案的摘要)*/
.c_b_p_desc,.entrylistPostSummary{
    color: var(--other-color);
    font-size: var(--font-slim);
}
.entrylistPostSummary{
    margin-top: 1em;
}

/* 首页 *//* 博文日期 */
.dayTitle a{color: var(--post-titleColor);font-weight: bolder;}
.dayTitle{margin-bottom: 1em}
/*随笔档案日期标题*/
.entrylist h1,.PostListTitle{
    background-color: var(--tag);
    color: var(--white-color);
    padding: 0px .5em;
    display: inline-block;
    font-weight: normal;
    position: absolute;
    right: 1em;
    box-shadow: 0 .2em .2em var(--tag);
}


.post a{
    color: var(--tag);
}
#sideBarMain a{
    color: var(--other-color);
}
#sideBarMain a:hover,.post a:hover {
    color:var(--post-titleColor);
}
/* 侧栏容器*/
#leftcontentcontainer {margin-top: 10px;}
/* 模块标题基本样式 */
#sidebar_toptags h3,#sidebar_categories h3,#sidebar_news h3,#sidebar_recentposts h3,#sidebar_search h3,#sidebar_topviewedposts h3, #sidebar_topdiggedposts h3,#sidebar_shortcut h3{
    margin-bottom: 1em;
    text-align: center;
    color: var(--post-titleColor);
}
#sidebar_toptags li{
    display: inline-block;
    background: var(--tag);
    padding: .3em .5em;
    border-radius: .3em;
    margin-bottom: .2em;
}
#sidebar_toptags li+li{
    margin-left: .2em;
}
#sidebar_toptags a,span{
    color: var(--bg-color);
}

/* 侧栏 模块基本样式 */
#sidebar_categories div,#sidebar_toptags,#sidebar_news,#sidebar_recentposts,#sidebar_search,#sidebar_topviewedposts, #sidebar_topdiggedposts,#sidebar_shortcut{
    margin-bottom: 1em;
    background-color: var(--white-color);
    padding: 1em .7em;
    border-radius: .5em;
}

/* 标签管理主板 *//* 标题 */
#taglist_title_wrap *{
    color: var(--tag);
}
#taglist span, a {
    color: var(--post-titlecolor);
    font-size: var( --font-normal);
}

/* 博文 */
.post{
    width: 960px;
    padding: 3em;
}
.post h1.postTitle{
    text-align: right;
    margin-bottom: 4em;
}
.post a,a:hover{
    color: var(--tag);
}
/* 博文样式 */
#cnblogs_post_body h1{
    font-size:var(--font-max);
    margin-top: 2em;
}

#cnblogs_post_body h2{
    color: var(--post-titleColor);
    margin-top: 1.5em;
    font-size: var(--font-bigger);
    border-bottom: 1px solid var(--tag);
    display: inline-block;
}
#cnblogs_post_body h3{
    font-weight: normal;
    font-size: var(--font-normal);
    border-left: 5px solid var(--tag);
    padding-left: .5em;
    margin: 1em 0;
}

#cnblogs_post_body p,p sub{
    font-size: var(--font-normal);
    color: var(--p);
    margin-left: 1em;
    line-height:1.8em;
}
/* 代码块 */
.cnblogs-markdown .hljs, .cnblogs-post-body .hljs{
    background-color: #38423a !important;
    padding: 1em 2em !important;
    border-radius: 3px !important;
    margin: 1em;
    display: block;
    overflow-x: auto;
    color: whitesmoke;
    font-size: var(--font-normal) !important;
    font-weight: normal;
    font-family: Sans-serif !important;
    word-spacing: .3em;
}
.hljs-keyword{color:tan}
.hljs-title{color: antiquewhite;}
.hljs-comment{color: #9e959b;}
.hljs-string{color: #c5b399;}
.hljs-name{color:#ffffbf;}
.hljs-attr{color: #97cec8;}
.hljs-tag{color: azure;}
.hljs-selector-class{color:#eddbc3;}
.hljs-attribute{color: #c4d6be ;}
.hljs-built_in{color: #eef1c4;}
.hljs-selector-tag{color: #c58fa9;}
#cnblogs_post_body ul li{
    color: var(--p);
    line-height: var(--font-max);
}
#cnblogs_post_body ol li{
    color: var(--p);
}
#cnblogs_post_body ul table{
    width: 600px;
}

/* 内联块代码块 */
.cnblogs-markdown code, .cnblogs-post-body code{
    font-family: "Courier New",sans-serif !important;
    font-size: var(--font-normal) !important;
    line-height: var(--font-bigger);
    background-color: var(--bg-color) !important;
    padding: 0 .5em !important;
    margin: 0 1em;
    vertical-align: middle;
    display: inline-block;
    color: #c58fa9;
    box-sizing: 0 .2em .2em red;
    box-shadow: 0 0.1em 0.1em;
    font-weight: bold;
}
/* 引用 */
blockquote{
    padding: 5px 20px;
    display: grid;
    background-color: #fafaf6;
    border: .3em dash #f3f1d6;
    border-left: .2em dashed var(--tag);
    width: 70%;
    margin-left: 1.5em;
}
blockquote strong{
    font-weight: normal;
    color: var(--post-titleColor);
}
blockquote:before {
    content: "说明:";
    font-weight: bolder;
    color: var(--post-titleColor);
}


/* 目录 */
#sidebar_scroller{
    height: 700px;
    overflow: auto;
    line-height: 1.5em;
    background: white;
    padding: 0 .8em;
    width: auto !important;
    font-size: var(--font-big);
}

/* 博文下方的标签 */
div#EntryTag:before{
    content: ">";
    position: absolute;
    left: -1em;
    font-size: var(--font-big);
    top: -.1em;
}
#EntryTag a{
    color:var(--post-titlecolor)
}
#EntryTag{
    color: var(--post-titlecolor);
    display: inline-block;
    padding: .1em 1.5em;
    border-radius: .2em;
    background: var(--bg-color);
    position: relative;
}
/* 博文下方的标签 *//* 博主信息 */
#author_profile{
    line-height:var(--font-bigger);
    margin-top: 1em;
    position: relative;
}
.author_profile_info{
    margin-bottom: 1em;
    margin-left: 4em;
    margin-top: 1em;
    line-height: var(--font-bigger);
}
/* 更换头像 */
#author_profile_info:before{
    content: "";
    position: absolute;
    width: 4em;
    height: 4em;
    background-image: url(https://i.loli.net/2020/09/26/CZA6B4PfjFVYT8e.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    left: 2em;
    top: 2em;
    border-radius: 2em;
    overflow-x: auto; 
    border: 1px solid var(--tag);
    display: inline-block;
}
#post_next_prev{
    font-size: var(--font-normal);
}

/* 点赞 */
.diggit span:after{
    content: '点赞';
    position: absolute;
    left: 2.5em;
    top: .3em;
    color: var( --tag);
}
.diggit{
    text-align: center;
    cursor: pointer;
    margin-top: 2em;
    padding: .4em 3em .4em .6em;
    border-radius: .2em;
    background: var(--bg-color);
    position: relative;
    width: 5.5em;
    height: 2em;
}
.diggnum{
    color: var(--post-titlecolor);
    font-size: var(--font-normal);
}



/*评论框*/
#comment_form {
    margin-top: 1em;
    border-radius: .4em;
    padding: 3em;
    background:var(--white-color);
}
#blog_post_info_block {
    margin-top: 8em;
}


/* 标签页 */
#myposts{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-right: -1.5em;
    margin-top: 1em;
}
/* 标签页\日期档案标题 */
#myposts span,.entrylistPosttitle span{
    color: var(--post-titleColor);
    font-size: var(--font-slim);
}
#myposts>*{
    padding: 1em;
    border-radius: 0.5em;
    background-color: var(--white-color);
}

#myposts .PostList{
    margin-right: 2em;
    margin-top: 0;
    margin-bottom: 1em;
    font-size: var(--font-slim);
}

.postDesc2,.postDesc2 a{
    font-size: var(--font-slim);
    color: var(--other-color);
}


/* 评论 */
#commentform_title {
    color: var(--post-titlecolor);
    background-image: none;
    padding: 1em 0 0;
    font-size: var(--font-bigger);
}
.comment_textarea{
    width: auto;
    padding: 1em;
    border: 1px solid var(--bg-color);
    margin-bottom: 1em;
    border-radius: .3em;
}
.commentbox_title{
    border-bottom: none;
}
#tbCommentBody {
    border: 2px solid var(--bg-color);
    padding: 1em 1em 4em 1em;
    height: auto;
}
/*评论按钮*/
.comment_btn {
    font-size: var(--font-normal);
    cursor: pointer;
    background: var(--bg-color);
    color: var(--tag);
    padding: .4em 1em;
    border-radius: .2em;
    border: none;
    height: auto;
    width: auto;
    float: right;
}

.commentbox_tab:hover, .commentbox_tab.active{
    border-bottom: 2px solid var(--tag);
}

/* 公告*/
#profile_block {
    color: var(--other-color);
}

/* 找找看模块按钮 */
input.btn_my_zzk{
    height: auto;
    width: auto;
    padding: .4em 1em;
    border-radius: .2em;
    background: var(--bg-color);
    margin-left: .5em;
    color: var(--tag);
    border: none;
}

/* 主板标题定位 */
.entrylist,.forFlow{position: relative;}

/*尾部*/
#footer {
    font-size: var(--font-slim);
    margin: 2em 0;
}


/* 隐藏 */
.buryit,.diggword,#green_channel,.c_ad_block,.author_avatar,.c_b_p_desc a,.postDesc,.entrylistItemPostDesc,#under_post_news,#ad_t2,#myposts>*:last-child,.postDesc2 span,#commentbox_opt a,.blogStats{
    display:none;
}

后来发现手机查看有bug，然后就简单的补了一下响应式。可能有些重复性代码，但不想细细磋磨了就酱吧(-.-)

@media screen and (max-width: 960px){
    #home{
        overflow: auto;
    }
}


@media screen and (max-width:766px){
    #navigator{
        display: none;
    }
    #blogTitle{
        width: 100vw !important;
        text-align: center;
    }
    #blogTitle h1{
        margin-right:0;
        position: relative;
    }
    #blogTitle h1:after{
        left: 45%;
        margin-left:0;
        top: 6vh;
    }
    .day, .entrylistItem, #taglist_main, .post{
        width: 96vw;
        margin-left: 2vw;
        padding: 4vw;
    }
    .cnblogs-markdown .hljs, .cnblogs-post-body .hljs{
        overflow: auto;
        padding: 1em 1em !important;
        margin: 0;
    }
    blockquote{
        width: 76vw;
    }
    #div_digg{
        width: auto;
        margin-top: -8vh;
        margin-right:0
    }
    #comment_form{
        padding: 4vw;
        width: 96vw;
        margin-left: 2vw;
    }
    #comment_nav{
        display: none;
    }
    #EntryTag:before{
        content: "";
    }
    #footer{
        text-align: center;
    }
    #header{
        background-color: var(--bg-color);
    }
    #cnblogs_post_body p, p sub{
        margin-left:0;
    }
    li code.language-css.hljs{
        margin-left: 0;
    }
    blockquote code.language-css.hljs{
        margin: 0;
        width: auto;
    }
    .cnblogs-markdown code, .cnblogs-post-body code{
        margin: 0 .2em;
    }
    #myposts{
        display: block;
    }
}