我的随笔---博客园自定义样式
页面制定CSS代码
/*好看的滚动条*/ ::-webkit-scrollbar{ width:10px!important; height:10px!important; -webkit-appearance:none; } ::-webkit-scrollbar-thumb{ height:5px;border:1px solid transparent; border-top:none;border-bottom:none; -webkit-border-radius:6px; background-color:rgba(0,0,0,.3); background-clip:padding-box; } /* 删除反对按钮,有点邪恶了 */ .buryit{ display: none; } /*目录样式*/ #sideCatalog a{ font-size:12px; font-weight:normal !important; } /* 文章title自定义带动画样式 */ .postTitle { font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif; clear: both; background-color: #FBF9F9; margin-bottom: 8px; padding-top: 5px; padding-bottom: 5px; margin-top: 20px; border-left: 3px solid #21759b; padding-left: 20px; font-size: 20px; border-radius:0px; } .postTitle a:hover { text-decoration: none; margin-left: 20px; color: #E00000; } .postTitle a:link, .postTitle a:visited, .postTitle a:active { transition: all 0.4s linear 0s; }
博客侧边公告栏
//设置目录（侧边HTML代码） <script type="text/javascript"> //以下是锚点JS，自动生成目录 var a = $(document); a.ready(function() { var commentDiv = $("#blog-comments-placeholder"); if (commentDiv.length <= 0) { return; } var b = $('body'), d = 'sideToolbar', e = 'sideCatalog', f = 'sideCatalog-catalog', g = 'sideCatalogBtn', h = 'sideToolbar-up', i = '<div id="sideToolbar"style="display:none;bottom:150px;">\<div class="sideCatalogBg"id="sideCatalog">\<div id="sideCatalog-sidebar">\<div class="sideCatalog-sidebar-top"></div>\<div class="sideCatalog-sidebar-bottom"></div>\</div>\<div id="sideCatalog-catalog">\<ul class="nav"style="width:225px;zoom:1;list-style: none;">\</ul>\</div>\</div>\<a href="javascript:void(0);"id="sideCatalogBtn"class="sideCatalogBtnDisable" style="position:absolute;bottom:10px;"></a>\</div>', j = '', k = 500, l = 0, m = 0, n = 0, //限制存在个数，如数量过多，则只显示h2，不显示h3 //o, p = 13, o, p = 100, q = true, r = true, s = b; if(s.length === 0) { return }; b.append(i); //指定获取目录的范围-------------这一点非常重要，因为每个人指定的范围都不一样，所以这是要修改的地方 //o = s.find(':header'); o = $('#cnblogs_post_body').find(':header'); if(o.length > p) { r = false; var t = s.find('h3'); var u = s.find('h4'); if(t.length + u.length > p) { q = false } }; o.each(function(t) { var u = $(this), v = u[0]; var title = u.text(); var text = u.text(); u.attr('id', 'autoid-' + l + '-' + m + '-' + n) //if (!u.attr('id')) { // u.attr('id', 'autoid-' + l + '-' + m + '-' + n) //}; if(text.length > 12) text = text.substr(0, 12) + "..."; if(v.localName === 'h3') { l++; m = 0; //if(text.length > 12) text = text.substr(0, 12) + "..."; j += '<li><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a><span class="sideCatalog-dot" style="top:8px;"></span></li>'; } else if(v.localName === 'h4') { m++; n = 0; if(q) { //if(text.length > 12) text = text.substr(0, 12) + "..."; j += '<li class="h2Offset"><a href="#' + u.attr('id') + '" title="' + title + '">' + text + '</a></li>'; } } else if(v.localName === 'h5') { n++; if(r) { j += '<li class="h3Offset"><a href="#' + u.attr('id') + '" title="' + title + '">' + u.text() + '</a></li>'; } } }); $('#' + f + '>ul').html(j); b.data('spy', 'scroll'); b.data('target', '.sideCatalogBg'); $('body').scrollspy({ target: '.sideCatalogBg' }); $sideCatelog = $('#' + e); $sideToolbar = $('#' + d); $('#sideCatalogBtn').hover(function () { $sideCatelog.css('display', 'block'); }); $sideToolbar.hover(function(){}, function(){ $sideCatelog.css('display', 'none'); }); $('#' + h).on('click', function() { $("html,body").animate({ scrollTop: 0 }, 500) }); a.on('scroll', function() { var t = a.scrollTop(); if(t > k) { $sideToolbar.css('display', 'block'); $('#gotop').show() } else { $sideToolbar.css('display', 'none') $('#gotop').hide() } }) }); //以上是锚点JS </script>
首页HTML代码
//设置目录（首页HTML代码） <link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/miangao/maodian.css"> //设置小心心 <script type="text/javascript"> (function(window, document, undefined) { var hearts = []; window.requestAnimationFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { setTimeout(callback, 1000 / 60); } })(); init(); function init() { css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}"); attachEvent(); gameloop(); } function gameloop() { for (var i = 0; i < hearts.length; i++) { if (hearts[i].alpha <= 0) { document.body.removeChild(hearts[i].el); hearts.splice(i, 1); continue; } hearts[i].y--; hearts[i].scale += 0.004; hearts[i].alpha -= 0.013; hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color; } requestAnimationFrame(gameloop); } function attachEvent() { var old = typeof window.onclick === "function" && window.onclick; window.onclick = function(event) { old && old(); createHeart(event); } } function createHeart(event) { var d = document.createElement("div"); d.className = "heart"; hearts.push({ el: d, x: event.clientX - 5, y: event.clientY - 5, scale: 1, alpha: 1, color: randomColor() }); document.body.appendChild(d); } function css(css) { var style = document.createElement("style"); style.type = "text/css"; try { style.appendChild(document.createTextNode(css)); } catch(ex) { style.styleSheet.cssText = css; } document.getElementsByTagName('head')[0].appendChild(style); } function randomColor() { return "rgb(" + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + "," + (~~ (Math.random() * 255)) + ")"; } })(window, document); </script>
页脚HTML代码
//设置目录（页脚HTML代码）
<script src="https://files.cnblogs.com/files/miangao/bootstrap.min.js"></script>
如此简单明了 #@---@# .....