博客园美化

侧栏字体更改

 1 .catListTitle {
 2 font-weight: bold;
 3 line-height: 1.2;
 4 margin-top: 21px;
 5 margin-bottom: 10.5px;
 6 border-left:10px solid #008000;
 7 padding: 10px 0 10px 14px;
 8 text-align: left;
 9 font-family: 微软雅黑;
10 }
11 #profile_block {
12 font-family: 微软雅黑;
13 }
14 #navigator {
15 font-family: 微软雅黑;
16 }
17 * {
18 font-family: 微软雅黑;
19 }

主页面大小调整

 1 body 
 2 { 
 3    text-align:center; 
 4  }
 5 
 6 #home 
 7 { 
 8    margin: 0px auto; 
 9    text-align:left; 
10    max-width:1060px;
11 }

 背景图片

1 body {
2 color: #000;
3 background: url("http://images2015.cnblogs.com/blog/459873/201509/459873-20150919175458742-1697781612.jpg") fixed;
4 background-size: cover;
5 background-repeat: no-repeat;
6 font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
7 font-size: 12px;
8 min-height: 101%;
9 }

 标题

• 绿色背景标题

 1 /*标题2*/
 2 #cnblogs_post_body h2 {
 3     color: #fff;
 4     padding-left: 15px;
 5     background-color: #00CED1 !important;
 6     text-shadow: 2px 2px 3px #222222;
 7     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
 8     margin-bottom: 5px;
 9 }
10 /*标题3*/
11 #cnblogs_post_body h3 {
12     color: #00CED1;
13     border-left: 13px solid #00CED1;
14     padding: 5px;
15     background-color: #f5f5f5;
16 }

红色背景标题

/*标题2*/
#cnblogs_post_body h2 {
    color: #fff;
    padding-left: 15px;
    background-color: #FF0000 !important;
    text-shadow: 2px 2px 3px #222222;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    margin-bottom: 5px;
}
/*标题3*/
#cnblogs_post_body h3 {
    color: #000000;
    border-left: 13px solid #FF0000;
    padding: 5px;
    background-color: #f5f5f5;
}

小飞机 页脚Html代码

 1 <style>
 2 #back-top {
 3      position: fixed;
 4      bottom: 10px;
 5      right: 5px;
 6      z-index: 99;
 7 }
 8 #back-top span {
 9      width: 50px;
10      height: 64px;
11      display: block;
12      background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;
13 }
14 #back-top a{outline:none}
15 </style>
16 <script type="text/javascript">
17 $(function() {
18     // hide #back-top first
19     $("#back-top").hide();
20     // fade in #back-top
21     $(window).scroll(function() {
22         if ($(this).scrollTop() > 500) {
23             $('#back-top').fadeIn();
24         } else {
25             $('#back-top').fadeOut();
26         }
27     });
28     // scroll body to 0px on click
29     $('#back-top a').click(function() {
30         $('body,html').animate({
31             scrollTop: 0
32         }, 800);
33         return false;
34     });
35 });
36 </script>
37 <p id="back-top" style="display:none"><a href="#top"><span></span></a></p>

 右下角目录博客侧边栏公告(支持HTML代码)(支持JS代码)

传送门

1 <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>   
2 <link href="http://files.cnblogs.com/files/ning-wang/marvin.nav.css" rel="stylesheet">
3 <script type="text/javascript" src="http://files.cnblogs.com/files/ning-wang/marvin.nav.js"></script>

 制作博客园文章签名

猜你喜欢

转载自www.cnblogs.com/sunbines/p/9026662.html