My essay --- blog custom style garden

My essay --- blog custom style garden

Development of CSS code page

/*好看的滚动条*/
::-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 ; 
} / * Delete button opposition, a little evil * / 
.buryit { 
  Run the display : none ; 
} / * directory style * / 
#sideCatalog A { 
  font-size : 12px ; 
  font-weight : Normal ! Important ; 
} / * article title with custom animation style * / 
.postTitle { 
  font-Family : "Lato", Helvetica Neue, Helvetica, Arial, Sans-serif ; 
  the 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;
}

Development of CSS code page

Blog sides bulletin board

// set directory (side HTML code) 
<Script type = "text / JavaScript"> 
// The following are the anchor JS, automatically catalogs 
var A = $ (Document); 
a.ready (function () { 
    var = commentDiv $ ( "#-Blog-placeholder Comments"); 
    IF (commentDiv.length <= 0) { 
      return;
     } 
    var B = $ ( 'body'), 
        D = 'sideToolbar', 
        E = 'sideCatalog', 
        F = ' Catalog-sideCatalog ', 
        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,
    IF (S. length === 0)
        R & lt = to true,
        Q = to true,
        O, P = 100,
        // O, P = 13 is,
        // number of limitations exist, such as the excessive number, only the h2, does not display H3
        = 0 n-,
        S = B;{ 
        Return
     } ; 
    b.append (i); 
    // get directory specified range ------------- This is important, because each person specified range is different, so this is to be where the modified 
    // O = s.find ( ': header'); 
    O = $ ( '# cnblogs_post_body') Find. ( ': header'); 
    IF (o.length> P) { 
        R & lt = to false; 
        var T s.find = ( 'H3'); 
        var s.find U = ( 'H4'); 
        IF (+ u.length t.length> P) { 
            Q = to false
         } 
    }; 
    o.each (function (T) { 
        U $ = var (the this), 
            V = U [0]; 

        var title = u.text (); 
        var = u.text 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 ().
         } the else { 
            $ sideToolbar.css ( 'the display', 'none') 
            $ ( '# gotop') hide ().
         } 
    }) 
}); 
// upper anchor the JS 
</ Script>

Blog sides bulletin board

Home HTML Code

//设置目录（首页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>

Home HTML Code

Footer HTML Code

// set directory (footer HTML code) 
<Script the src = "https://files.cnblogs.com/files/miangao/bootstrap.min.js"> </ Script>

Footer HTML Code

 

So simple --- @ # @ # .....