DIY博客的页面

写在前面：

　　申请了博客第一件事当然是整一个炫酷的界面。

　　自己水平不够，选了个比较顺眼的皮肤，大部分是套用网上现成的模板完成的。

 

具体定制的内容：

　　1.字体的修改

　　2.版面占比的调整　　

　　3.UI细节的修改

　　4.加入了用户头像 和 一些修饰动图

　　5.时钟，访问统计，Github conner，天气，Live2d看板娘，分享栏，回到顶部按钮 等小插件

　　6.图片放大功能

　　7.3D效果标签云

　　8.背景图更换

　　9.背景漂浮线段的动态效果

　　10.鼠标点击现字的特效

　　11.QQ联系 和 打赏功能

　　12.更改了推荐按钮

　　13.段落标题hover效果

 

需要先申请JS权限

代码：

　　标题：

1 
YukiRinLL
SutsuharaYuki

　　子标题：

1 
 2  3 我知道,痛苦乃是唯一的高贵,无论人世和地狱都不能将其侵蚀. 4 
 5     为了把我那神秘的冠冕编缀,须将一切时代一切领域征集. 6  7 
 8  9     ——波德莱尔 《恶之花》· 祝福10 11 12 13 

　　皮肤：

　　页面定制CSS代码：

1 /*字体修改*/  2 body {  3     font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;  4     font-size: 14px;  5     line-height: 2;  6     color: #555;  7 }  8 /*博客标题*/  9 #blogTitle h1 { 10     font-size: 26px; 11     font-weight: bold; 12     line-height: 1.5em; 13     margin-top: 10px; 14     margin-bottom: 20px; 15     text-align: center; 16  17 } 18  19 .headermaintitle { 20     display: inline-block; 21     vertical-align: top; 22     line-height: 36px ！calc; 23     font-size: 26px; 24     font-weight: normal; 25    color:#fff !important; 26     font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif; 27 } 28  29 #home { 30     opacity: 0.80;/*透明度*/ 31     margin: 0 auto; 32     width: 38.2%;/*原始65*/ 33     min-width: 980px;/*页面顶部的宽度*/ 34     background-color: rgba(245, 245, 245, 0.7); 35     padding: 30px; 36     margin-top: 50px; 37     margin-bottom: 50px; 38     box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); 39 } 40 body { 41     color: #000; 42     background: url('https://images.cnblogs.com/cnblogs_com/SutsuharaYuki/1470874/o_c8422da75ab12a5776fe4647d352665df16c6a21.jpg')fixed; 43     background-size: cover; 44     background-repeat: no-repeat; 45     font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif; 46     font-size: 12px; 47     min-height: 101%; 48 } 49  50  51  52 #blogTitle { 53     height: 100px;  /*高度*/ 54     clear: both; 55     background-color: rgba(245, 245, 245, 0); 56 } 57 #blogTitle h1 { 58     font-size: 36px; 59     font-weight: bold; 60     line-height: 1.8em;/*原始 1.6em*/ 61     margin-top: 10px;/*原始 15px */ 62     color: #548B54; 63 } 64 #blogTitle h2 { 65     font-weight: normal; 66     font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/       67     line-height: 1.8; 68     color: #111; 69     font-weight: bold; 70     text-align: right; 71     float: right;  72 } 73 #navigator{ 74     background-color: rgba(33, 160, 139, 0.9); 75 } 76 #navList a:link, #navList a:visited, #navList a:active{ 77     color: #eee; 78     font-size: 18px; 79     font-weight: bold; 80 } 81 .blogStats{ 82     color: #eee; 83 } 84  85 .postTitle { 86     border-left: 8px solid rgba(33, 160, 139, 0.68); 87     margin-left: 10px; 88     margin-bottom: 10px; 89     font-size: 20px; 90  91     clear: both; 92 } 93 .postTitle a:link, .postTitle a:visited, .postTitle a:active { 94     color: #21759b; 95     transition: all 0.4s linear 0s; 96 } 97 .postTitle a:hover { 98     margin-left: 30px; 99     color: #0f3647;100     text-decoration: none;101 }102 103 .postCon {104     float: right;105     line-height: 1.5em;106     width: 100%;107     clear: both;108     padding: 10px 0;109 }110 111 .day .postTitle a {112     padding-left: 10px;113 }114 .day {115     background: rgba(255, 255, 255, 0.5);116 }117 /*文章附加信息*/118 .postDesc {   119     background: url(images/posted_time.png) no-repeat 0 1px;120     color: #757575;121     float: left;122     width: 100%;123     clear: both;124     text-align: left;     125     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;126     font-size: 13px;127     padding-right: 20px;/*5px  padding-left: 90px;posted 发表时间左边距离*/128     margin-top: 20px;129     line-height: 1.8;130     padding-bottom: 35px;131 }132 133 .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, 134 .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, 135 .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar136 {137     background: rgba(255, 255, 255, 0.5);138     margin-bottom: 35px;139     word-wrap: break-word;140 }141 142 .CalTitle{143     background: rgba(255, 255, 255, 0);144 }145 .catListTitle{146     background-color: rgba(33, 160, 139, 0.9);147 }148 149 #topics{150     background: rgba(255, 255, 255, 0.5);151 }152 153 .c_ad_block{154     display: none;155 }156 157 #tbCommentBody{158     width: 100%;159     height: 200px;160     background: rgba(255, 255, 255, 0.5);161 }162 163 #q{
    background: rgba(255, 255, 255, 0);}164 165 .CalNextPrev{
    background: rgba(255, 255, 255, 0);}166 167 .cnblogs_code{168     background: rgba(255, 255, 255, 0);    169 }170 171 .cnblogs_code div{172     background: rgba(255, 255, 255, 0);    173 }174 175 .cnblogs_code_toolbar{176     background: rgba(255, 255, 255, 0);  177 }178 179 .entrylist{180     background: rgba(255, 255, 255, 0.5);  181 }182 183 184 185 /* 看板娘 */186 canvas#live2dcanvas {187 border: 0 !important;188 position:absolute; bottom:0; right:0;189 }190 /* 看板娘 */191 192 193 /*宠物pet*/194 195 196 /*推荐置顶设置*/197  #div_digg{198      position:fixed;199      bottom:5px;200      width:140px;201      right:650px;202      border:2px solid #6FA833;203      padding:10px;204      background-color:#fff;205      border-radius:5px 5px 5px 5px !important;206      box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);207    }208    #div_digg:hover {209       box-shadow:0 0 0 1px #5F5A4B, 2px 2px 10px 2px rgba(10, 10, 0, 0.5);210    }211 212  /*段落标题Hover效果设置*/213    #cnblogs_post_body214    {215        color: black;      216        font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif;217        font-size: 15px;218    }219    #cnblogs_post_body h1    {220        background: #169FE6;221        border-radius: 4px 4px 4px 4px;222          font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;223          font-size: 23px;224          font-weight: bold;225          height: 25px;226          line-height: 25px;227        margin: 18px 0 0 0;228        padding: 5px 0 5px 5px;229        transition: all 0.8s;230    }231    #cnblogs_post_body h2    {232        background: #169FE6;233        border-radius: 4px 4px 4px 4px;234        color: #FFFFFF;235          font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;236          font-size: 20px;237          font-weight: bold;238          height: 25px;239          line-height: 25px;240        margin: 18px 0 0 0;241        padding: 5px 0 5px 5px;242        transition: all 0.8s;243    }244    #cnblogs_post_body h3    {245        background: #6FA833;246        border-radius: 4px 4px 4px 4px;247        color: #FFFFFF;248          font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;249          font-size: 18px;250          font-weight: bold;251          height: 25px;252          line-height: 25px;253        margin: 18px 0 0 0;254       padding: 5px 0 5px 5px;255        transition: all 0.8s;256    }257    #cnblogs_post_body h4{258       background: #A8D08D;259        border-radius: 4px 4px 4px 4px;260        color: #FFFFFF;261          font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;262          font-size: 18px;263          font-weight: bold;264         height: 25px;265          line-height: 25px;266        margin: 18px 0 0 0;267        padding: 5px 0 5px 5px;268        transition: all 0.8s;269    }270    #cnblogs_post_body h1:hover {271        transform: rotateX(360deg);272        background-color: #0066FF;273    }274    #cnblogs_post_body h2:hover {275        transform: rotateX(360deg);276        background-color: #0066FF;277    }278    #cnblogs_post_body h3:hover {279        transform: rotateX(360deg);280    }281    #cnblogs_post_body h4:hover {282        transform: rotateX(360deg);283 }284 285 286 /*QQ联系*/

　　

　　博客侧边栏公告（支持HTML代码）（支持JS代码）：

1 
        2 
      116 
      
       
        您的浏览器不兼容canvas
       
       
        117 118 119 120 121 122 123 124 125 126 
         127 
        128 129 130 131 
        132 
        133 134 135 136 
         137 138 
        139 
        140 
        141 142 
        143 
        144 
        145 
        146 
        147 148 
        149 
        162 163 
        164 
        171 172 173 
        174 
        175 
        176 
        177 
        178 
        186 187 188 
        189 
        200  
        201 202 203 204 205 206 207 208 209 210 211 212 
        213 214  215  216  
        217  218  219     
        
         联系：220          
         221              223              224      
        
225  226 227 228 229 230 231 232 233 234 
        235 
        275 276 277 
        
         278     
         
279 
        
    280 281 282 
        297 298 299 300 301 302 
        303 
        304 
        305 
        306 
        314 315 316 317 318 319 
        320 
        321 322 323 324 325 326 327 328 329 330 331 332 333 334 
        335 
        
       
      

　　页首Html代码：

1 
       2 37 38 39 40 41 
      42 43 44 
      45 
      46 57 58 
      

　　页脚Html代码：

1 31 32 33 
      34 
       
        
        
        
       35 36 
      37 38 41 42 43 44  45 
      46 49 50 51 52 53 
      54 
      55 
      
        56 
       分享到： 57 
        58 
        59 
        60 
        61 
        62 
        63 
      
 64  65  66  69 
      

 

　　部分模板在套用的时候根据自己的情况做了一些改变

　　后续可能会添加 音乐播放器 之类的新功能

　　呈上源码以供分享