博客园自定义样式

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

页面定制CSS代码

  1 /*博客皮肤：SimpleMemory*/
  2 /*自定义样式如下：*/
  3 #google_ad_c1,
  4 #google_ad_c2 {
  5     display: none;
  6 }
  7 
  8 .syntaxhighlighter a,
  9 .syntaxhighlighter div,
 10 .syntaxhighlighter code,
 11 .syntaxhighlighter table,
 12 .syntaxhighlighter table td,
 13 .syntaxhighlighter table tr,
 14 .syntaxhighlighter table tbody,
 15 .syntaxhighlighter table thead,
 16 .syntaxhighlighter table caption,
 17 .syntaxhighlighter textarea {
 18     font-size: 14px !important;
 19 }
 20 
 21 #home {
 22     opacity: 0.90;
 23     margin: 0 auto;
 24     width: 75%;
 25     min-width: 950px;
 26     background-color: #fff;
 27     padding: 30px;
 28     margin-top: 200px;
 29     margin-bottom: 50px;
 30     box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
 31 }
 32 
 33 #blogTitle h1 {
 34     font-size: 40px;
 35     font-weight: bold;
 36     font-family: "Comic Sans MS";
 37     line-height: 1.5em;
 38     margin-top: 20px;
 39     color: #515151;
 40 }
 41 
 42 #blogTitle h2 {
 43     font-weight: normal;
 44     font-size: 13px;
 45     font-size: 0.928571429rem;
 46     line-height: 1.846153846;
 47     color: #000;
 48     float: left;
 49 }
 50 
 51 #navList a:hover {
 52     color: #4C9ED9;
 53     text-decoration: none;
 54 }
 55 
 56 #navList a {
 57     display: block;
 58     width: 5em;
 59     height: 22px;
 60     float: left;
 61     text-align: center;
 62     padding-top: 18px;
 63 }
 64 
 65 #navigator {
 66     font-size: 15px;
 67     border-bottom: 1px solid #000;
 68     border-top: 1px solid #000;
 69     height: 55px;
 70     clear: both;
 71     margin-top: 35px;
 72 }
 73 
 74 .blogStats {
 75     float: right;
 76     color: #000;
 77     margin-top: 19px;
 78     margin-right: 2px;
 79     text-align: right;
 80 }
 81 
 82 
 83 .catListTitle {
 84     margin-top: 21px;
 85     margin-bottom: 10.5px;
 86     text-align: left;
 87     border-left: 10px solid rgba(255, 97, 0, 0.8);
 88     padding: 10px 0 14px 10px;
 89     background-color: #f5f5f5;
 90 }
 91 
 92 #ad_under_post_holder #google_ad_c1,
 93 #google_ad_c2 {
 94     display: none !important;
 95 }
 96 
 97 body {
 98     color: #000;
 99     background: url(https://img2018.cnblogs.com/blog/1336165/201908/1336165-20190820121359731-568214352.jpg
100 ) fixed;
101     background-size: cover;
102     background-repeat: repeat;
103     font-family: "微软雅黑", "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif;
104     font-size: 12px;
105     min-height: 100%;
106 }
107 
108 #topics .postTitle {
109     border: 0px;
110     font-size: 200%;
111     font-weight: bold;
112     float: left;
113     line-height: 1.5;
114     width: 100%;
115     padding-left: 5px;
116 }
117 
118 
119 .postTitle {
120     border-left: 3px solid #e74c3c;
121     margin-bottom: 10px;
122     font-size: 20px;
123     float: right;
124     width: 100%;
125     clear: both;
126 }
127 /*文章主题样式*/
128 .postTitle a:link, .postTitle a:visited, .postTitle a:active {
129     color: #21759b;
130     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s;
131 }
132 
133 
134 
135 .feedbackItem {
136     font-size: 14px;
137     line-height: 24px;
138     margin: 10px 0;
139     padding: 20px;
140     background: #F2F2F2;
141     box-shadow: 0 0 5px #aaa;
142 }
143 
144 .feedbackListSubtitle {
145     font-weight: normal;
146 }
147 
148 
149 .feedback_area_title {
150     margin-bottom: 15px;
151     font-size: 1.8em;
152 }
153 
154 .feedbackItem {
155     border-bottom: 1px solid #CCC;
156     margin-bottom: 10px;
157     padding: 5px;
158     background: rgb(248, 248, 248);
159 }
160 
161 .color_shine {
162     background: rgb(226, 242, 255);
163 }
164 
165 .feedbackItem:hover {
166     -webkit-animation-name: color_shine;
167     -webkit-animation-duration: 2s;
168     -webkit-animation-iteration-count: infinite;
169 }
170 
171 
172 
173 
174 /*代码样式*/
175 /*! Color themes for Google Code Prettify | MIT License | github.com/jmblog/color-themes-for-google-code-prettify */
176 .pln {
177     color: #131513
178 }
179 
180 ol.linenums {
181     margin-top: 0;
182     margin-bottom: 0;
183     color: #809980
184 }
185 
186 li.L0,
187 li.L1,
188 li.L2,
189 li.L3,
190 li.L4,
191 li.L5,
192 li.L6,
193 li.L7,
194 li.L8,
195 li.L9 {
196     padding-left: 1em;
197     background-color: #f4fbf4;
198     list-style-type: decimal
199 }
200 
201 @media screen {
202     .str {
203         color: #29a329
204     }
205 
206     .kwd {
207         color: #ad2bee
208     }
209 
210     .com {
211         color: #809980
212     }
213 
214     .typ {
215         color: #3d62f5
216     }
217 
218     .lit {
219         color: #87711d
220     }
221 
222     .pun {
223         color: #131513
224     }
225 
226     .opn {
227         color: #131513
228     }
229 
230     .clo {
231         color: #131513
232     }
233 
234     .tag {
235         color: #e6193c
236     }
237 
238     .atn {
239         color: #87711d
240     }
241 
242     .atv {
243         color: #1999b3
244     }
245 
246     .dec {
247         color: #87711d
248     }
249 
250     .var {
251         color: #e6193c
252     }
253 
254     .fun {
255         color: #3d62f5
256     }
257 }
258 
259 
260 /*markdown设置背景色，字体大小和字体*/
261 code {
262     padding: 1px 3px;
263     margin: 0 3px;
264     background: #ddd;
265     border: 1px solid #ccc;
266     font-family: Menlo, Monaco, Andale Mono, lucida console, Courier New, monospace;
267     word-wrap: break-word;
268     font-size: 14px;
269 }
270 
271 .cnblogs-markdown code {
272     background: #fff !important;
273 }
274 
275 .cnblogs_code,
276 .cnblogs_code span,
277 .cnblogs-markdown .hljs {
278     font-size: 14px !important;
279     font-family: consolas, "Source Code Pro", monaco, monospace !important;
280 }
281 
282 
283 /*文章标题样式*/
284 #cnblogs_post_body h1 {
285     background: #000000;
286     border-radius: 6px 6px 6px 6px;
287     color: #FFFFFF;
288     font-family: FZShuTi, "微软雅黑", "宋体", "黑体", Arial;
289     font-size: 20px;
290     font-weight: bold;
291     height: 24px;
292     line-height: 23px;
293     margin: 18px 0 !important;
294     padding: 12px 0 8px 5px;
295     padding-left: 5px;
296     text-shadow: 2px 2px 3px #222222;
297     box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
298     text-align: left;
299     margin: 12px 0 !important;
300     width: 95%
301 }
302 
303 #cnblogs_post_body h2 {
304     background-color: #8bc34a;
305     border-radius: 6px;
306     border: none;
307     color: #fff;
308     font-family: "微软雅黑", "宋体", "黑体", Arial;
309     font-weight: 700;
310     font-size: 1.4em;
311     line-height: 1.4em;
312     text-shadow: 2px 2px 3px #222;
313     box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
314     padding: 10px;
315     margin: 18px 0 18px 0 !important;
316     width: 95%;
317 }
318 
319 #cnblogs_post_body h3 {
320     background-color: #2b6695;
321     border-radius: 6px;
322     border: none;
323     color: #fff;
324     font-family: "微软雅黑", "宋体", "黑体", Arial;
325     font-weight: 700;
326     font-size: 1.2em;
327     line-height: 1.2em;
328     text-shadow: 2px 2px 3px #222;
329     box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
330     padding: 10px;
331     margin: 12px 0 !important;
332     width: 95%;
333 }
334 
335 #cnblogs_post_body h4 {
336     background-color: #33cb97;
337     border-radius: 5px;
338     text-align: left;
339     color: white;
340     text-shadow: 1px 1px 2px #222222;
341     font-family: "微软雅黑", "宋体", "黑体", Arial;
342     font-size: 14px;
343     font-weight: bold;
344     height: 21px;
345     line-height: 20px;
346     box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
347     padding: 10px;
348     margin: 12px 0 !important;
349     width: 95%;
350 }
351 
352 /*文章表格样式*/
353 #cnblogs_post_body table {
354     text-align: center;
355     width: 100%;
356     border: 1px solid #dedede;
357     margin: 15px 0;
358     border-collapse: collapse;
359 }
360 
361 #cnblogs_post_body table thead tr {
362     background: #f8f8f8;
363 }
364 
365 #cnblogs_post_body table tbody tr:hover {
366     background: #efefef;
367 }
368 
369 /*文章内容字体样式*/
370 #cnblogs_post_body {
371     color: black;
372     font-family: 'comic sans ms', sans-serif;
373     font-size: 16px;
374 }
375 
376 /* 去除a标签下划线 */
377 .postBody a:link,
378 .postBody a:visited,
379 .postBody a:active {
380     text-decoration: none;
381 }
382 
383 /* adblock去除广告 */
384 #ad_t2 {
385     display: none;
386 }
387 
388 .c_ad_block {
389     display: none;
390 }
391 
392 /* 定制公告栏时钟位置 */
393 #clockdiv {
394     text-align: center;
395 }
396 
397 /* 定制公告栏音乐插件的样式 */
398 .aplayer {
399     /*音乐插件字体*/
400     font-family: Arial, Helvetica, sans-serif;
401     margin: 0px;
402     /*音乐插件与公告栏左边的边距，0px就是直接抵到公告栏左边的边上*/
403     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);
404     border-radius: 2px;
405     overflow: hidden;
406     -webkit-user-select: none;
407     -moz-user-select: none;
408     -ms-user-select: none;
409     user-select: none;
410     line-height: normal;
411 }
412 
413 /*隐藏反对按钮*/
414 .buryit {
415     display: none;
416 }
417 
418 /*版权声明*/
419 #MySignature {
420     border: solid 1px #E5E5E5;
421     padding: 10px;
422     background: #E5EEF7 url(https://files-cdn.cnblogs.com/files/acgoto/o_o_o_info.ico) no-repeat scroll 15px 50%;
423     padding-left: 80px;
424 }
425 
426 #MySignature div {
427     line-height: 20px;
428 }
View Code

版权声明

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

<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 <script type="text/javascript">
 53 /* 鼠标特效 */
 54 ! function(e, t, a) {
 55   function n() { c(".heart{ 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: ''; inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r() }
 56 
 57   function r() {
 58     for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
 59     requestAnimationFrame(r)
 60   }
 61 
 62   function o() {
 63     var t = "function" == typeof e.onclick && e.onclick;
 64     e.onclick = function(e) { t && t(), i(e) }
 65   }
 66 
 67   function i(e) {
 68     var a = t.createElement("div");
 69     a.className = "heart", d.push({ el: a, x: e.clientX - 5, y: e.clientY - 5, scale: 1, alpha: 1, color: s() }), t.body.appendChild(a)
 70   }
 71 
 72   function c(e) {
 73     var a = t.createElement("style");
 74     a.type = "text/css";
 75     try { a.appendChild(t.createTextNode(e)) } catch (t) { a.styleSheet.cssText = e } t.getElementsByTagName("head")[0].appendChild(a)
 76   }
 77 
 78   function s() { return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")" }
 79   var d = [];
 80   e.requestAnimationFrame = function() { return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function(e) { setTimeout(e, 1e3 / 60) } }(), n()
 81 }(window, document);
 82 </script>
 83 
 84 
 85 <!-- 为博客侧边栏添加音乐组件 -->
 86 <div id="player" class="aplayer"></div>
 87 <link href="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.css" rel="stylesheet">
 88 <script src="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.js"></script>
 89 
 90 <script type="text/javascript">
 91     var ap = new APlayer({
 92         element: document.getElementById('player'),
 93         narrow: false,
 94         autoplay: false,          // 是否自动播放
 95         showlrc: false,
 96         theme: '#F5F5F5',      // 建议插件背景颜色和公告栏背景色一样
 97         music: [{
 98             title: '曲名',
 99             author: '歌手名',
100             url: '歌曲链接',
101             pic: '歌曲封面'
102         }]
103     });
104     ap.init();
105 </script>
106 
107 
108 <!-- 给网页背景添加动态线条 -->
109 <script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
View Code

页首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>

页脚HTML代码

1 <script src="http://files.cnblogs.com/files/flipped/prettify.js"></script>
2 <script type="text/javascript">
3 (function() {
4      $("pre").addClass("prettyprint");
5      prettyPrint();
6 })();
7 </script>

高清背景图

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/acgoto/p/11354964.html