博客园页面自定义美化分享。---------随时更新；
Posted jwyblogs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了博客园页面自定义美化分享。---------随时更新；相关的知识，希望对你有一定的参考价值。
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>
以上是关于博客园页面自定义美化分享。---------随时更新；的主要内容，如果未能解决你的问题，请参考以下文章