博客定制

CSS代码：

#home {

    margin: 0 auto;

    width: 80%;/*原始65*/

    min-width: 960px;/*页面顶部的宽度*/

    background-color: rgba(245, 245, 245, 0.7);

    padding: 30px;

    margin-top: 50px;

    margin-bottom: 50px;

    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);

}

body {

    background: url('https://img2.huashi6.com/images/resource/global/2022/02/22/16051_8516595285.jpg?imageView2/3/q/90/interlace/1/w/2000/h/2000') fixed no-repeat;/*修改背景图片*/

    background-position: 50% 5%; 

    background-size: cover;

}

/**页首背影图*/

#blogTitle {

margin:10px;

background: rgba(255, 255, 255, 0);

line-height: 44px;

}

.blogStats{

    color: #eee;

}

#navigator{

    background-color:rgba(135,206,205, 0.5);         /*标题栏下的颜色*/   

}

#navList a:link, #navList a:visited, #navList a:active{

    color:#FFFFCC;

    font-size: 18px;

    font-weight: bold;

}

.postTitle {

    border-left: 8px solid rgba(132,112,255, 0);

    margin-left: 10px;

    margin-bottom: 10px;

    font-size: 20px;

    float: right;

    width: 100%;

    clear: both;

}

.postTitle a:link, .postTitle a:visited, .postTitle a:active {

    color:     #996699;

    transition: all 0.4s linear 0s;

}

.postTitle a:hover {

    margin-left: 30px;

    color: #EE6363;

    text-decoration: none;

}

.postCon {

    float: right;

    line-height: 1.5em;

    width: 100%;

    clear: both;

    padding: 10px 0;

}

.day .postTitle a {

    padding-left: 10px;

}

.day {

    background: rgba(255, 255, 255, 0.5);

}

/*文章附加信息*/

.postDesc {   

    background: url(images/posted_time.png) no-repeat 0 1px;

    color: #757575;

    float: left;

    width: 100%;

    clear: both;

    text-align: left;     

    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;

    font-size: 13px;

    padding-right: 20px;/*5px  padding-left: 90px;posted 发表时间左边距离*/

    margin-top: 20px;

    line-height: 1.8;

    padding-bottom: 35px;

}

.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, 

.catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, 

.catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar

{

    background: rgba(255, 255, 255, 0.5);

    margin-bottom: 35px;

    word-wrap: break-word;

}

.CalTitle{

    background: rgba(255, 255, 255, 0);

}

.catListTitle{

    background-color: rgba(194, 91, 245, 0.6);   /*栏目的条纹颜色*/

}

#topics{

    background: rgba(255, 255, 255, 0.5);

}

.c_ad_block{

    display: none;

}

#tbCommentBody{

    width: 100%;

    height: 200px;

    background: rgba(255, 255, 255, 0.5);

}

#q{background: rgba(255, 255, 255, 0);}

.CalNextPrev{background: rgba(255, 255, 255, 0);}

.cnblogs_code{

    background: rgba(255, 255, 255, 0);    

}

.cnblogs_code div{

    background: rgba(255, 255, 255, 0);    

}

.cnblogs_code_toolbar{

    background: rgba(255, 255, 255, 0);  

}

#main{min-width: 640px;}

.entrylist{

    background: rgba(255, 255, 255, 0.5);  

}

/*快速推荐*/

#div_digg {

  position: fixed;

  bottom: 10px;

  right: 15px;

  border: 2px solid #ECD7B1;

  padding: 10px;

  width: 140px;

  background-color: #fff;

  border-radius: 5px 5px 5px 5px !important;

  box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);

}

/* 置顶小火箭样式  start  */

body{height:3000px;}

#rocket-to-top div {

    left: 0;

    margin: 0;

    overflow: hidden;

    padding: 0;

    position: absolute;

    top: 0;

    width: 149px;

}

#rocket-to-top .level-2 {

    background: url("http://images.cnblogs.com/cnblogs_com/hxun/1493052/o_o_rocket_button_up.png") no-repeat scroll -149px 0 transparent;

    display: none;

    height: 250px;

    opacity: 0;

    z-index: 1;

}

#rocket-to-top .level-3 {

    background: none repeat scroll 0 0 transparent;

    cursor: pointer;

    display: block;

    height: 150px;

    z-index: 2;

}

#rocket-to-top {

    background: url("http://images.cnblogs.com/cnblogs_com/hxun/1493052/o_o_rocket_button_up.png") no-repeat scroll 0 0 transparent;

    cursor: default;

    display: block;

    height: 250px;

    margin: -125px 0 0;

    overflow: hidden;

    padding: 0;

    position: fixed;

    right: 0;

    top: 80%;

    width: 149px;

    z-index: 11;

}

/* 置顶小火箭样式  end */

/*生成博客目录的CSS*/

#uprightsideBar{

    font-size:12px;

    font-family:Arial, Helvetica, sans-serif;

    text-align:left;

    position:fixed;/*将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置，距离顶部50px*/

    top:50px;

    right:0px;

    width: auto;

    height: auto; 

}

#sideBarTab{

    float:left;

    width:30px; 

    border:1px solid #e5e5e5;

    border-right:none;

    text-align:center;

    background:#ffffff;

}

#sideBarContents{

    float:left;

    overflow:auto; 

    overflow-x:hidden;!important;

    width:200px;

    min-height:108px;

    max-height:460px;

    border:1px solid #e5e5e5;

    border-right:none; 

    background:#ffffff;

}

#sideBarContents dl{

    margin:0;

    padding:0;

}

#sideBarContents dt{

    margin-top:5px;

    margin-left:5px;

}

#sideBarContents dd, dt {

    cursor: pointer;

}

#sideBarContents dd:hover, dt:hover {

    color:#A7995A;

}

#sideBarContents dd{

    margin-left:20px;

}

 

 

 

 

侧边栏代码

 

 

<img src="https://img2.baidu.com/it/u=910532250,2128158078&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400" alt="博客主小亮的头像" class="img_avatar" width="200px" style="border-radius:50%">

 

 

 

页首代码

<script type="text/javascript">

/* 鼠标特效 */

var a_idx = 0;

jQuery(document).ready(function($) {

    $("body").click(function(e) {

        var a = new Array("❤");

        var $i =$("<span></span>").text(a[a_idx]);

        a_idx = (a_idx + 1) % a.length;

        var x = e.pageX,

        y = e.pageY;

        $i.css({

            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,

            "top": y - 20,

            "left": x,

            "position": "absolute",

            "font-weight": "bold",

            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"

        });

        $("body").append($i);

        $i.animate({

            "top": y - 180,

            "opacity": 0

        },

        1500,

        function() {

            $i.remove();

        });

    });

});

</script>

/* 粒子吸附*/

<script id="c_n_script" src="https://blog-static.cnblogs.com/files/xiaokang01/js.js" color="194, 91, 245" opacity="1" count="200" zindex="-2">

if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {

} else {

}

</script>

<script type="text/javascript">

/*

    功能：生成博客目录的JS工具

    测试：IE8，火狐，google测试通过

    

    2014-5-11

*/

var BlogDirectory = {

    /*

        获取元素位置，距浏览器左边界的距离（left）和距浏览器上边界的距离（top）

    */

    getElementPosition:function (ele) {        

        var topPosition = 0;

        var leftPosition = 0;

        while (ele){              

            topPosition += ele.offsetTop;

            leftPosition += ele.offsetLeft;        

            ele = ele.offsetParent;     

        }  

        return {top:topPosition, left:leftPosition}; 

    },

    /*

    获取滚动条当前位置

    */

    getScrollBarPosition:function () {

        var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;

        return  scrollBarPosition;

    },

    

    /*

    移动滚动条，finalPos 为目的位置，internal 为移动速度

    */

    moveScrollBar:function(finalpos, interval) {

        //若不支持此方法，则退出

        if(!window.scrollTo) {

            return false;

        }

        //窗体滚动时，禁用鼠标滚轮

        window.onmousewheel = function(){

            return false;

        };

          

        //清除计时

        if (document.body.movement) { 

            clearTimeout(document.body.movement); 

        } 

        var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置

        var dist = 0; 

        if (currentpos == finalpos) {//到达预定位置，则解禁鼠标滚轮，并退出

            window.onmousewheel = function(){

                return true;

            }

            return true; 

        } 

        if (currentpos < finalpos) {//未到达，则计算下一步所要移动的距离

            dist = Math.ceil((finalpos - currentpos)/10); 

            currentpos += dist; 

        } 

        if (currentpos > finalpos) { 

            dist = Math.ceil((currentpos - finalpos)/10); 

            currentpos -= dist; 

        }

        

        var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置

        window.scrollTo(0, currentpos);//移动窗口

        if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部，则解禁鼠标滚轮，并退出

        {

            window.onmousewheel = function(){

                return true;

            }

            return true;

        }

        

        //进行下一步移动

        var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; 

        document.body.movement = setTimeout(repeat, interval); 

    },

    

    htmlDecode:function (text){

        var temp = document.createElement("div");

        temp.innerHTML = text;

        var output = temp.innerText || temp.textContent;

        temp = null;

        return output;

    },

    /*

    创建博客目录，

    id表示包含博文正文的 div 容器的 id，

    mt 和 st 分别表示主标题和次级标题的标签名称（如 H2、H3，大写或小写都可以！），

    interval 表示移动的速度

    */

    createBlogDirectory:function (id, mt, st, interval){

         //获取博文正文div容器

        var elem = document.getElementById(id);

        if(!elem) return false;

        //获取div中所有元素结点

        var nodes = elem.getElementsByTagName("*");

        //创建博客目录的div容器

        var divSideBar = document.createElement('DIV');

        divSideBar.className = 'uprightsideBar';

        divSideBar.setAttribute('id', 'uprightsideBar');

        var divSideBarTab = document.createElement('DIV');

        divSideBarTab.setAttribute('id', 'sideBarTab');

        divSideBar.appendChild(divSideBarTab);

        var h2 = document.createElement('H2');

        divSideBarTab.appendChild(h2);

        var txt = document.createTextNode('目录导航');

        h2.appendChild(txt);

        var divSideBarContents = document.createElement('DIV');

        divSideBarContents.style.display = 'none';

        divSideBarContents.setAttribute('id', 'sideBarContents');

        divSideBar.appendChild(divSideBarContents);

        //创建自定义列表

        var dlist = document.createElement("dl");

        divSideBarContents.appendChild(dlist);

        var num = 0;//统计找到的mt和st

        mt = mt.toUpperCase();//转化成大写

        st = st.toUpperCase();//转化成大写

        //遍历所有元素结点

        for(var i=0; i<nodes.length; i++)

        {

            if(nodes[i].nodeName == mt|| nodes[i].nodeName == st)    

            {

                //获取标题文本

                var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g,"");//innerHTML里面的内容可能有HTML标签，所以用正则表达式去除HTML的标签

                nodetext = nodetext.replace(/ /ig, "");//替换掉所有的 

                nodetext = BlogDirectory.htmlDecode(nodetext);

                //插入锚        

                nodes[i].setAttribute("id", "blogTitle" + num);

                var item;

                switch(nodes[i].nodeName)

                {

                    case mt:    //若为主标题 

                        item = document.createElement("dt");

                        break;

                    case st:    //若为子标题

                        item = document.createElement("dd");

                        break;

                }

                

                //创建锚链接

                var itemtext = document.createTextNode(nodetext);

                item.appendChild(itemtext);

                item.setAttribute("name", num);

                item.onclick = function(){        //添加鼠标点击触发函数

                    var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));

                    if(!BlogDirectory.moveScrollBar(pos.top, interval)) return false;

                };            

                

                //将自定义表项加入自定义列表中

                dlist.appendChild(item);

                num++;

            }

        }

        

        if(num == 0) return false; 

        /*鼠标进入时的事件处理*/

        divSideBarTab.onmouseenter = function(){

            divSideBarContents.style.display = 'block';

        }

        /*鼠标离开时的事件处理*/

        divSideBar.onmouseleave = function() {

            divSideBarContents.style.display = 'none';

        }

        document.body.appendChild(divSideBar);

    }

    

};

window.onload=function(){

    /*页面加载完成之后生成博客目录*/

    BlogDirectory.createBlogDirectory("cnblogs_post_body","h2","h3",20);

}

</script>

 

 

 

页尾代码

 

 

<div style="display:none;" id="rocket-to-top">

    <div style="opacity:0;display:block;" class="level-2"></div>

    <div class="level-3"></div>

</div>

<script type="text/javascript">

// jQuery火箭图标返回顶部代码

$(function() {

    var e = $("#rocket-to-top"),

    t = $(document).scrollTop(),

    n,

    r,

    i = !0;

    $(window).scroll(function() {

        var t = $(document).scrollTop();

        t == 0 ? e.css("background-position") == "0px 0px" ? e.fadeOut("slow") : i && (i = !1, $(".level-2").css("opacity", 1), e.delay(100).animate({

            marginTop: "-1000px"

        },

        "normal",

        function() {

            e.css({

                "margin-top": "-125px",

                display: "none"

            }),

            i = !0

        })) : e.fadeIn("slow")

    }),

    e.hover(function() {

        $(".level-2").stop(!0).animate({

            opacity: 1

        })

    },

    function() {

        $(".level-2").stop(!0).animate({

            opacity: 0

        })

    }),

    $(".level-3").click(function() {

        function t() {

            var t = e.css("background-position");

            if (e.css("display") == "none" || i == 0) {

                clearInterval(n),

                e.css("background-position", "0px 0px");

                return

            }

            switch (t){

            case "0px 0px":

                e.css("background-position", "-298px 0px");

                break;

            case "-298px 0px":

                e.css("background-position", "-447px 0px");

                break;

            case "-447px 0px":

                e.css("background-position", "-596px 0px");

                break;

            case "-596px 0px":

                e.css("background-position", "-745px 0px");

                break;

            case "-745px 0px":

                e.css("background-position", "-298px 0px");

            }

        }

        if (!i) return;

        n = setInterval(t, 50),

        $("html,body").animate({scrollTop: 0},"slow");

    });

});

</script>

<script src="https://blog-static.cnblogs.com/files/zhonglinke/jquery-1.7.1.min.js"></script>

<script src="https://files.cnblogs.com/files/zhonglinke/jquery.snow.js"></script>

<!-- 樱花特效 -->

<script src="https://files.cnblogs.com/files/quaint/sakuraPlus.js"></script>