1.页面定制CSS代码：
1 /* 公共样式区域开始 */
2
3 body,ol,ul,h1,h2,h3,h4,h5,h6,p,dl,dd,fieldset,legend,input,textarea,select {
4 margin: 0;
5 padding: 0;
6 }
7
8 body {
9 font: 12px "幼圆";
10 word-wrap: break-word;
11 }
12
13 /* 去掉线 */
14 a,u,s,del {
15 color: #666;
16 text-decoration: none
17 }
18
19 /* 去掉默认属性 */
20
21 i,em,b {
22 font-style: normal;
23 font-weight: 100;
24 }
25
26 /* 去掉上下结构时img下面的空隙 */
27
28 img {
29 vertical-align: middle;
30 }
31
32 /* 合并相邻边框(细线边框) */
33
34 table {
35 border-collapse: collapse;
36 }
37
38 /* 去除前面点 */
39
40 li {
41 list-style: none;
42 }
43
44
45 /* 公共样式区域结束 */
46
47
48 /* --------------------------- 设置背景及样式 ----------------------------- */
49
50 body {
51 background: rgba(12, 100, 129, 1) url(‘https://images.cnblogs.com/cnblogs_com/jwyblogs/1576071/o_bg.jpg‘) fixed no-repeat;
52 background-position: 50% 5%;
53 background-size: cover;
54 }
55
56
57 /* --------------------------- 整个页面 ----------------------------- */
58
59 #home {
60 margin: 0 auto;
61 width: 90%;
62 /*原始65*/
63 min-width: 980px;
64 /*页面顶部的宽度*/
65 background-color: rgba(245, 245, 245, 0.4);
66 padding: 30px;
67 margin-top: 50px;
68 margin-bottom: 50px;
69 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
70 }
71
72 /* --------------------------- 头部：标题加导航区域start----------------------------- */
73
74 #header {
75 overflow: hidden;
76 }
77
78 #blogLogo {
79 display: none;
80 }
81
82 /* 头部的标题区域 */
83
84 #blogTitle {
85 height: 100px;
87 clear: both;
88 background-color: rgba(240, 255, 255, 0.5);
89 margin-top: 30px;
90 width: 100%;
91 overflow: hidden;
92 border-radius: 5px;
93 }
94
95 #blogTitle h1 {
96 font: 700 36px/36px "宋体";
97 width: 50%;
98 margin-top: 25px;
99 overflow: hidden;
100 }
101
102
103 /* 昵称 */
104
105 #blogTitle h1 #Header1_HeaderTitle {
106 margin-left: 30px;
107 color: #000;
108 text-shadow: #0d1218 1px 1px;
109 }
110
111
112 /* 签名 */
113
114 #blogTitle h2.bounceInRight {
115 font: 17px/2 "幼圆";
116 color: #FF1493;
117 float: right;
118 width: 30%;
119 }
120
121
122 /* 第二块导航区域 */
123
124 #navigator {
125 background-color: rgba(135, 206, 205, 0.5);
126 margin-top: 20px;
127 height: 54px;
128 }
129
130
131 /* 左边的导航 */
132
133 #navList {
134 float: left;
135 margin-left: 20px;
136 }
137
138 #navList li {
139 float: left;
140 margin: 0 20px;
141 font: 700 18px/3 "幼圆";
142 }
143
144 #navList li a {
145 display: block;
146 padding: 0 15px;
147 height: 54px;
148 text-align: center;
149 color: #fff;
150 }
151
152 #navList li a:hover {
153 background: #CC99FF;
154 color: #000;
155 transition-duration: .3s;
156 text-shadow: 0 0 1px #000;
157 }
158
159
160 /* 右边的count */
161
162 .blogStats {
163 color: #eee;
164 float: right;
165 font: 12px/3 "幼圆";
166 margin: 10px 10px 0 0;
167 text-align: center;
168 }
169
170
171 /* --------------------------- 头部：标题加导航区域end----------------------------- */
172
173
174 /* --------------------------- 主体区域start----------------------------- */
175
176 #main {
177 min-width: 640px;
178 clear: both;
179 margin-top: 20px;
180 }
181
182
183 /* --------------------------- 主体内容区域start----------------------------- */
184
185 #mainContent {
186 float: left;
187 width: 80%;
188 padding: 30px;
189 box-sizing: border-box;
190 background: rgba(255, 255, 255, 0.5);
191 }
192
193
194 /* 主体区域侧边栏 */
195
196 #sideBar {
197 float: right;
198 width: 18%;
199 }
200
201
202 /* 主体区域博客列表— - - - >博客发布的日期 */
203
204 .day {
205 /* .day表示整个博文的所有区域，包括标题，内容，统计 */
206 border-bottom: 1px dashed #FF0099;
207 }
208
209
210 /* 发布日期 */
211
212 .day .dayTitle{
213 overflow:hidden;
214
215 }
216
217 .day .dayTitle a {
218 display: block;
219 font: 16px/2 "微软雅黑";
220 color: #9900FF;
221 text-align: right;
222 width: 15%;
223 float: right;
224 }
225
226
227 /* 标题 */
228
229 .day .postTitle {
230 font: 700 20px/2 "幼圆";
231 width: 100%;
232 clear: both;
233 }
234
235 .postTitle a {
236 color: #000000;
237 text-shadow: 0 0 1px #669966;
238 }
239
240 .postTitle a:link,
241 .postTitle a:visited,
242 .postTitle a:active {
243 transition: all 0.4s linear 0s;
244 }
245
246 .postTitle a:hover {
247 margin-left: 30px;
248 text-decoration: none;
249 }
250
251
252 /* 博客的简要内容 */
253
254 .day .postCon {
255 width: 100%;
256 clear: both;
257 padding: 10px 0;
258 font: 14px/2 "微软雅黑";
259 }
260
261 .day .postCon .c_b_p_desc {
262 text-indent: 20px;
263 margin-left: 15px;
264 font: 14px/2 "微软雅黑";
265 }
266
267
268 /* 阅读全文按钮 */
269
270 .day .postCon .c_b_p_desc .c_b_p_desc_readmore {
271 display: block;
272 text-align: right;
273 font: 700 12px/2 "微软雅黑";
274 color: #FF0000;
275 }
276
277
278 /*附加信息*/
279
280 .day .postDesc {
281 color: #757575;
282 width: 100%;
283 clear: both;
284 text-align: left;
285 font-family: "微软雅黑", "宋体", "黑体", Arial;
286 font-size: 13px;
287 padding-right: 20px;
288 line-height: 1.8;
289 padding-bottom: 35px;
290 }
291
292
293 /* --------------------------- 主体内容区域end----------------------------- */
294
295
296 /* --------------------------- 侧边栏start----------------------------- */
297
298
299 /* 侧边栏父元素公共样式 */
300
301 #sidebar_news,#blog-calendar,#sidebar_search,#sidebar_shortcut,#sidebar_postcategory,#sidebar_postarchive,#sidebar_imagecategory,#sidebar_topviewedposts {
302 background: rgba(255, 255, 255, 0.5);
303 margin-bottom: 20px;
304 border-radius: 3px;
305 }
306
307 #sidebar_news,#blog-calendar,#sidebar_search,#sidebar_shortcut,#sidebar_postcategory,#sidebar_postarchive,#sidebar_imagecategory,
308 #sidebar_topviewedposts ul li a {
309 text-indent: 9px;
310 }
311
312 /* 侧边栏的h3.catListTitle公共样式 */
313
314 .catListTitle {
315 background-color: rgba(255, 110, 180, 0.6);
316 font: 16px/2 "幼圆";
317 text-align: center;
318 }
319
320
321 /* --------------------------- 侧边栏公告 ------------------------------------ */
322
323 #sidebar_news {
324 font: 14px/20px "幼圆";
325 margin-bottom: 20px;
326 text-indent: 0;
327 }
328
329 #sidebar_news.newsItem #blog-news #profile_block {
330 padding: 0 9px;
331 }
332
333 h3.catListTitle{
334 margin:0px;
335 }
336 /* -------- DIY头像 -------- */
337 .headimg{
338 display:block;
339 width:80px;
340 height:80px;
341 border-radius:50%;
342 margin: 12px auto;
343 }
344
345
346 /* --------------------------- 侧边栏日历 ------------------------------------ */
347
348
349 #blog-calendar td {
350 padding: 5px 3px;
351 font-size: 14px;
352 }
353
354 #blog-calendar td a {
355 font-weight: bold;
356 color: #59a020;
357 }
358
359 #blog-calendar table a:hover {
360 color: #59a020;
361 text-decoration: underline;
362 background: transparent;
363 }
364
365 #blog-calendar table u {
366 text-decoration: none;
367 }
368
369
370 /* --------------------------- 侧边栏搜索 ------------------------------------ */
371
372
373 #sidebar_search {
374 text-indent: 0;
375 }
376
377 #sidebar_search .div_my_zzk {
378 margin: 7px 0;
379 padding:0 5px;
380 }
381
382 #sidebar_search .div_my_zzk .input_my_zzk {
383 width: 59%;
384 border: 1px solid #ccc;
385 background: #F4F4F7;
386 border-radius: 3px;
387 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
388 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
389 -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
390 -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
391 transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
392 }
393
394 #sidebar_search .div_my_zzk .input_my_zzk:focus {
395 border-color: #66afe9;
396 outline: 0;
397 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
398 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
399 }
400
401
402 /* 按钮样式 */
403
404 #sidebar_search .btn_my_zzk {
405 position: relative;
406 display: inline-block;
407 font-weight: 400;
408 white-space: nowrap;
409 text-align: center;
410 background-image: none;
411 border: 1px solid transparent;
412 -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
413 box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
414 cursor: pointer;
415 -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
416 transition: all .3s cubic-bezier(.645, .045, .355, 1);
417 -webkit-user-select: none;
418 -moz-user-select: none;
419 -ms-user-select: none;
420 user-select: none;
421 -ms-touch-action: manipulation;
422 touch-action: manipulation;
423 border-radius: 4px;
424 color: rgba(0, 0, 0, 0.65);
425 background-color: #fff;
426 border-color: #d9d9d9;
427 }
428
429
430 /* 找找看的input */
431
432 #q {
433 background: rgba(255, 255, 255, 0);
434 margin: 5px 0;
435 border: 1px solid #000;
436 }
437
438 #google_q {
439 background: rgba(255, 255, 255, 0);
440 margin: 5px 0;
441 border: 1px solid #000;
442 }
443
444
445 /* --------------------------- 侧边栏常用链接 ------------------------------------ */
446
447
448 /* #sidebar_shortcut {
449 background: rgba(255, 255, 255, 0.5);
450 margin-bottom: 20px;
451 } */
452
453 #sidebar_shortcut ul li a {
454 display: block;
455 font: 14px/2 "幼圆";
456 text-decoration: underline;
457 text-indent: 9px;
458 }
459
460
461 /* --------------------------- 侧边栏随笔分类------------------------------------ */
462
463
464 /*
465 #sidebar_postcategory {
466 background: rgba(255, 255, 255, 0.5);
467 } */
468
469 #sidebar_postcategory ul li a {
470 display: block;
471 font: 14px/2 "幼圆";
472 text-decoration: underline;
473 text-indent: 9px;
474 }
475
476
477 /* --------------------------- 侧边栏随笔档案------------------------------------ */
478
479
480 /* #sidebar_postarchive {
481 background: rgba(255, 255, 255, 0.5);
482 margin-bottom: 20px;
483 } */
484
485 #sidebar_postarchive ul li a {
486 font: 14px/2 "幼圆";
487 }
488
489
490 /* --------------------------- 侧边栏相册------------------------------------ */
491
492
493 /* #sidebar_imagecategory {
494 background: rgba(255, 255, 255, 0.5);
495 margin-bottom: 20px;
496 } */
497
498 #sidebar_imagecategory ul li a {
499 display: block;
500 font: 14px/2 "幼圆";
501 }
502
503 /* --------------------------- 侧边栏阅读排行榜----------------------------------- */
504
505
506 /* #sidebar_topviewedposts {
507 background: rgba(255, 255, 255, 0.5);
508 margin-bottom: 20px;
509 } */
510
511 #sidebar_topviewedposts ul li{
512 margin:10px 0;
513 }
514 #sidebar_topviewedposts ul li a {
515 font: 14px/20px "幼圆";
516
517 }
518 #TopViewPostsBlock{
519 padding:0 9px;
520 }
521
522
523 /* 个性签名 */
524 #MySignature {
525 box-shadow: 8px 1px 10px #989898;
526 padding: 10px;
527 text-shadow: 1px 1px 1px #FFF;
528 font-size: 17px;
529 border-left: solid 5px #55895B;
530 background: #F3F3F3;
531 border-radius: 10px 10px 50% 10px;
532 line-height: 2.4;
533 margin: 40px 0;
534 }
535
536 #MySignature a {
537 text-decoration: none;
538 color: #4183c4;
539 font-weight: bold;
540 }
541
542 #MySignature a:hover {
543 text-decoration: underline;
544 color: #f60;
545 }
546
547 /*底部隐藏作者，隐藏推荐和反对*/
548 #author_profile {
549 display: none;
550 }
551
552 #div_digg {
553 display: none;
554 }
555
556 /*隐藏广告*/
557 #ad_t2, #cnblogs_c1, #under_post_news, #cnblogs_c2, #under_post_kb {
558 display: none;
559 }
560
561 #footer{
562 font: 12px/2 "微软雅黑";
563 text-align: center;
564 margin-top:15px;
565 }
2.博客侧边栏公告：
说明：需要现申请JS权限；
<!-- 头像 -->
<img src="https://images.cnblogs.com/cnblogs_com/jwyblogs/1576071/o_img.jpg" class="headimg">
<!-- 看板娘 -->
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/clwydjgs/waifu.css"/>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/clwydjgs/waifu.css"/>
<div class="waifu" id="waifu">
<div class="waifu-tips" style="opacity: 1;"></div>
<canvas id="live2d" width="280" height="250" class="live2d"></canvas>
<div class="waifu-tool">
<span class="fui-home"></span>
<span class="fui-chat"></span>
<span class="fui-eye"></span>
<span class="fui-user"></span>
<span class="fui-photo"></span>
<span class="fui-info-circle"></span>
<span class="fui-cross"></span>
</div>
</div>
<script src="https://blog-static.cnblogs.com/files/clwydjgs/live2d.js"></script>
<script src="https://blog-static.cnblogs.com/files/clwydjgs/waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>
<!-- 鼠标特效 -->
<script type="text/javascript">
(function() {
var coreSocialistValues = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"],
index = Math.floor(Math.random() * coreSocialistValues.length);
document.body.addEventListener(‘click‘,
function(e) {
if (e.target.tagName == ‘A‘) {
return;
}
var x = e.pageX,
y = e.pageY,
span = document.createElement(‘span‘);
span.textContent = coreSocialistValues[index];
index = (index + 1) % coreSocialistValues.length;
span.style.cssText = [‘z-index: 9999999; position: absolute; font-weight: bold; color: #ff6651; top: ‘, y - 20, ‘px; left: ‘, x, ‘px;‘].join(‘‘);
document.body.appendChild(span);
animate(span);
});
function animate(el) {
var i = 0,
top = parseInt(el.style.top),
id = setInterval(frame, 16.7);
function frame() {
if (i > 180) {
clearInterval(id);
el.parentNode.removeChild(el);
} else {
i += 2;
el.style.top = top - i + ‘px‘;
el.style.opacity = (180 - i) / 180;
}
}
}
} ());
</script>
3.页脚HTML代码
<script type="text/javascript">
$(function(){
$(‘#blogTitle h1‘).addClass(‘bounceInLeft animated‘);
$(‘#blogTitle h2‘).addClass(‘bounceInRight animated‘);
// 删除反对按钮
$(‘.buryit‘).remove();
initCommentData();
});
function initCommentData() {
$(‘.feedbackItem‘).each(function() {
var text = $(this).find(‘.feedbackListSubtitle .layer‘).text();
// 将楼层信息放到data里面
// $(this).find(‘.blog_comment_body‘).attr(‘data-louceng‘, text.replace(/^#/g, ‘‘));
if($(this).find(‘.feedbackListSubtitle .louzhu‘).length>0) $(this).addClass(‘myself‘);
var avatar = $(this).find(‘> .feedbackCon > span‘).html() || ‘http://pic.cnitblog.com/face/sample_face.gif‘;
$(this).find(‘> .feedbackCon > .blog_comment_body‘).append(‘<img class="user-avatar" src="‘+avatar+‘"/>‘)
});
}
$(document).ajaxComplete(function(event, xhr, settings) {
// 监听获取评论ajax事件
if(settings.url.indexOf(‘/mvc/blog/GetComments.aspx‘) >= 0) {
initCommentData();
}
});
</script>
<script src="https://files.cnblogs.com/files/hafiz/jquery-migrate-1.2.1.js"></script>
<div id="scrollTop" style="display:none;">
<div class="level-2"></div>
<div class="level-3"></div>
</div>
<script src="http://files.cnblogs.com/files/hafiz/scroll2top.js"></script>
<script type="text/javascript">
UI.global_search();
var uvOptions = {};
// !important
(function() {
initScrollTop();
})();
</script>
原文地址：https://www.cnblogs.com/jwyblogs/p/11742921.html
时间： 2024-10-09 06:28:27