博客园自定义样式参考

样式一

#home {
    margin: 0 auto;
    width: 80%;/*原始65*/
    min-width: 980px;/*页面顶部的宽度*/
    background-color: rgba(245, 245, 245, 0.7);
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body {
    background: rgba(12, 100, 129, 1) url('http://images.cnblogs.com/cnblogs_com/Penn000/1013849/o_123.jpg') fixed no-repeat;
    background-position: 50% 5%; 
    background-size: cover;
}
#blogTitle {
    height: 100px;  /*高度*/
    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(33, 160, 139, 0.9);
}
#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(33, 160, 139, 0.68);
    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: #21759b;
    transition: all 0.4s linear 0s;
}
.postTitle a:hover {
    margin-left: 30px;
    color: #0f3647;
    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: #757575;
    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);
}
.catListTitle{
    background-color: rgba(33, 160, 139, 0.9);
}

#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);}

侧边栏

<a target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=FWJ0e2J0eyIgIyMtISQiIlVjfGU7ZGQ7dnp4" style="text-decoration: none"><img src="http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_22.png"></a>

<img src="http://s01.flagcounter.com/countxl/iy9m/bg_FFFFFF/txt_000000/border_CCBCA3/columns_1/maxflags_1/viewers_Tinywan/labels_1/pageviews_1/flags_0/percent_0/" alt="Flag Counter" border="0">
<br>
<a href="https://github.com/Tinywan" id="TabFiles">Github</a>
<a href="https://hehuiyun.github.io/" id="TabFiles">he</a>

第二套方案

代码

#home {
    margin: 0 auto;
    width: 80%;/*原始65*/
    min-width: 980px;/*页面顶部的宽度*/
    background-color: rgba(240, 248, 255, 0);
    padding: 30px;
    margin-top: 0px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
#topics{
 background: rgba(255, 255, 255,0.9)!important;
}
body {
   background: url("https://images2018.cnblogs.com/blog/1021265/201808/1021265-20180804162319216-822493274.jpg");
}
#blogTitle {
    height: 100px;  /*高度*/
    clear: both;
    background-color: rgba(245, 245, 245, 0);
}
#blogTitle h1 {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.8em;/*原始 1.6em*/
    margin-top: 10px;/*原始 15px */
    color: #548B54;
}
#blogTitle h2 {
    font-weight: normal;
    font-size: 16px;/*原始 16px ；font-size: 1.0rem;*/      
    line-height: 1.8;
    color: #111;
    font-weight: bold;
    text-align: right;
    float: right; 
}

#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(60, 173, 154, 0.68); */
    margin-bottom: 2px;
    font-size: 16px;
    float: right;
    width: 100%;
    clear: both;
   border-bottom: none;
    margin-left: -13px;
}
    
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: #191818;
    transition: all 0.4s linear 0s;
}
.postTitle a:hover {
    margin-left: 20px;
    color: #0f3647;
    text-decoration: none!important;
}
.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: #757575;
    float: left;
    width: 100%;
    clear: both;
    text-align: left;     
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 14px;
    padding-right: 20px;/*5px  padding-left: 90px;posted 发表时间左边距离*/
    margin-top: 10px;
    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);
}
.catListTitle{
    background-color: rgba(38, 37, 41, 0.9);
    border-top-left-radius: 0px!important;
    border-top-right-radius: 0px!important;
}

#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);}

.day {
    _height: 10px;
    background: #fff;
    box-shadow: 1px 1px 2px #A7A8AD;
    color: #666666;
    margin: 0px 0px -17px 0;
    padding: 5px 20px -1px;
    border-radius: initial!important;
}

#mainContent {
    min-height: 200px;
    padding: 0px 0px 10px 0;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    float: right;
    margin-left: -20em;
   margin-right: 0px!important;
    width: 100%;
}

#sideBar {
    width: 260px!important;
    /* min-height: 200px; */
    /* padding: 0px 0 0px 5px; */
    /* float: left; */
    -o-text-overflow: ellipsis;
    /* text-overflow: ellipsis; */
    /* overflow: hidden; */
    /* word-break: break-all; */
}

.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory, #blog-calendar {
    background: rgba(255, 255, 255, 1)!important;
    margin-bottom: 20px!important;
    word-wrap: break-word;
}

.dayTitle a
{
display:none;
}

.dayTitle {
border-bottom:none;
}

#navigator {
    background-color: transparent;
    height: 53px;
    line-height: 60px;
}
.CalNextPrev{background: rgba(255, 255, 255, 0);}

.newsItem, #blog-calendar {
    border-radius: 0px!important;
}

.avatar-box{
          padding-left: 49px;
}
.avatar-box img.avatar_pic {
    display: block;
    width: 128px;
    height: 128px;
    border-radius: 50%;
}

.catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory {
    border-radius: 0px!important;
   background-color: rgba(255,255,255, 0.9)!important;
}

.postDesc {
    background: url(images/posted_time.png) no-repeat 0 1px;
    color: #aba4a4;
    float: left;
    width: 100%;
    clear: both;
    text-align: left;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 14px;
    padding-right: 20px;
    margin-top: 0px;
    line-height: 1.8;
    padding-bottom: 20px!important;
}

#blogTitle {
     height:0px!important;
}

#myposts {
    margin-left: 20px;
    background-color: #ffffff;
    margin-left: 10px;
    padding-left: 35px;
    padding-top: 29px;
}

a#Header1_HeaderTitle {
    color: #ffa200;
    font-size: 32px;
}

.day .postTitle a {
    padding-left: 0px!important;
}

#profile_block {
    line-height: 1.9!important;
}

图片