博客园自定义样式

本站点采用的博客皮肤是SimpleMemory！

页面定制CSS代码

由于代码比较多，这里只给出一些代码，后续有空再整理，网上一搜一大把的?

 1 /* adblock去除广告 */
 2 #ad_t2 {
 3     display: none;
 4 }
 5 
 6 .c_ad_block {
 7     display: none;
 8 }
 9 
10 /* 定制公告栏时钟位置 */
11 #clockdiv {
12     text-align: center;
13 }
14 
15 /* 定制公告栏音乐插件的样式 */
16 .aplayer {
17     /*音乐插件字体*/
18     font-family: Arial, Helvetica, sans-serif;
19     margin: 0px;
20     /*音乐插件与公告栏左边的边距，0px就是直接抵到公告栏左边的边上*/
21     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
22     border-radius: 2px;
23     overflow: hidden;
24     -webkit-user-select: none;
25     -moz-user-select: none;
26     -ms-user-select: none;
27     user-select: none;
28     line-height: normal;
29 }
30 
31 /*隐藏反对按钮*/
32 .buryit {
33     display: none;
34 }
35 
36 /*版权声明样式*/
37 #MySignature {
38     border: solid 1px #E5E5E5;
39     padding: 10px;
40     background: #E5EEF7 url(https://files-cdn.cnblogs.com/files/acgoto/o_o_o_info.ico) no-repeat scroll 15px 50%;
41     padding-left: 80px;
42 }
43 
44 #MySignature div {
45     line-height: 20px;
46 }

版权声明

添加版权声明要去博客后台设置博客签名，标题为“版权声明”，内容自行修改，如下设置：

<div>作者：<a href="http://www.cnblogs.com/acgoto/" target="_blank">霜雪千年</a></div>
<div>出处：<a href="http://www.cnblogs.com/acgoto/" target="_blank">http://www.cnblogs.com/acgoto/</a></div>
<div>本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须在文章页面给出原文连接，否则保留追究法律责任的权利。 </div>

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

 1 <p class="p">弱校挣扎的一名蒟蒻</p>
 2 <p>--------------------------------------</p>
 3 
 4 
 5 <!-- 添加公告栏时钟 -->
 6 <div id="clockdiv">
 7     <canvas id="dom" width="120" height="120">时钟canvas</canvas>
 8 </div>
 9 <script type="text/javascript" src="https://files.cnblogs.com/files/shwee/clock.js"></script>
10 <p>--------------------------------------</p>
11 
12 
13 <!-- 各国访问流量统计 -->
14 <a href="http://s05.flagcounter.com/more/UuA"><img src="https://s05.flagcounter.com/count/UuA/bg_55FF00/txt_000000/border_CCCCCC/columns_2/maxflags_10/viewers_0/labels_1/pageviews_1/flags_0/percent_0/" alt="Flag Counter" border="0"></a>
15 <p>--------------------------------------</p>
16 
17 
18 <!-- 鼠标点击效果 -->
19 <script type="text/javascript">
20 /* 鼠标特效 */
21 var a_idx = 0;
22 jQuery(document).ready(function($) {
23     $("body").click(function(e) {
24         var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
25         var $i = $("<span></span>").text(a[a_idx]);
26         a_idx = (a_idx + 5) % a.length;
27         var x = e.pageX, // 参照点为浏览器内容区域的左上角
28         y = e.pageY;
29         $i.css({
30             "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
31             "top": y - 20,
32             "left": x,
33             "position": "absolute",
34             "font-weight": "bold",
35             "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
36         });
37         $("body").append($i);
38         $i.animate({
39             "top": y - 180,
40             "opacity": 0
41         },
42         1500,
43         function() {
44             $i.remove();
45         });
46     });
47 });
48 </script>
49 <p>--------------------------------------</p>
50 
51 
52 <!-- 为博客侧边栏添加音乐组件 -->
53 <div id="player" class="aplayer"></div>
54 <link href="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.css" rel="stylesheet">
55 <script src="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.js"></script> 
56 
57 <script type="text/javascript">
58     var ap = new APlayer({
59         element: document.getElementById('player'),
60         narrow: false,
61         autoplay: false,          // 是否自动播放
62         showlrc: false,
63         theme: '#F5F5F5',      // 建议插件背景颜色和公告栏背景色一样
64         music: [{
65             title: '曲名',
66             author: '歌手名',
67             url: '歌曲链接',
68             pic: '歌曲封面'
69         }]
70     });
71     ap.init();
72 </script>
73 
74 
75 <!-- 给网页背景添加动态线条 -->
76 <script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

页首Html代码

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

高清背景图

转载于:https://www.cnblogs.com/acgoto/p/11354964.html