【拓展知识】博客页面个性化设置

第一步：皮肤设置

　　管理 - 设置 - 基本设置 - 博客皮肤【LessIsMore】

　　

 

 

第二步：页面定制CSS代码　　【勾选 禁用模板默认CSS】

设置背景

#home {
    margin: 0 auto;
    width: 80%;/*原始65*/
    min-width: 980px;/*页面顶部的宽度*/
    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: rgba(12, 100, 129, 1) url('https://images.cnblogs.com/cnblogs_com/blogs/701705/galleries/2142702/o_220412024749_a16814f39ded17cca08e756f8d625cf0.jpeg') fixed no-repeat;
    background-position: 50% 5%;
    background-size: cover;
}
#blogTitle {
    height: 100px;  /*高度*/
    clear: both;
    background-color: rgba(245, 245, 245, 0);
}
#blogTitle h1 {
    font-size: 36px;
    font-weight: bold;
    line-height: 1.8em;/*原始 1.6em*/
    margin-top: 10px;/*原始 15px */
    color: #548B54;
}
#blogTitle h2 {
    font-weight: normal;
    font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/
    line-height: 1.8;
    color: #111;
    font-weight: bold;
    text-align: right;
    float: right;
}
#navigator{
    background-color: rgba(33, 160, 139, 0.9);
}
#navList a:link, #navList a:visited, #navList a:active{
    color: #eee;
    font-size: 18px;
    font-weight: bold;
}
.blogStats{
    color: #eee;
}
.postTitle {
    border-left: 8px solid rgba(33, 160, 139, 0.68);
    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: #21759b;
    transition: all 0.4s linear 0s;
}
.postTitle a:hover {
    margin-left: 30px;
    color: #0f3647;
    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(33, 160, 139, 0.9);
}

#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);
}

.entrylist{
    background: rgba(255, 255, 255, 0.5);
}

#main{
   min-width: 640px;
}
页面定制CSS代码

  

 

第三步：博客侧边栏公告

将头像放在侧边栏

<style>
#back-top {
     position: fixed;
     bottom: 10px;
     right: 5px;
     z-index: 99;
}
#back-top span {
     width: 50px;
     height: 64px;
     display: block;
     background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;
}
#back-top a{outline:none}
</style>
<script type="text/javascript">
$(function() {
    // hide #back-top first
    $("#back-top").hide();
    // fade in #back-top
    $(window).scroll(function() {
        if ($(this).scrollTop() > 500) {
            $('#back-top').fadeIn();
        } else {
            $('#back-top').fadeOut();
        }
    });
    // scroll body to 0px on click
    $('#back-top a').click(function() {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });
});
</script>
<p id="back-top" style="display:none"><a href="#top"><span></span></a></p>
<img src="https://images.cnblogs.com/cnblogs_com/blogs/701705/galleries/2142702/o_220412023223_912665cc33fc226060430eb69f266424.jpeg" alt="Penn000" class="img_avatar" width="210px" height="210px" style="border-radius:10%">
博客侧边栏公告
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>
侧边栏添加看板娘

 

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 
  <title>Document</title> 
  <style>
canvas#live2dcanvas {
    border: 0 !important;
}
#back-top {
     position: fixed;
     bottom: 10px;
     right: 5px;
     z-index: 99;
}
#back-top span {
     width: 50px;
     height: 64px;
     display: block;
     background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;
}
#back-top a{outline:none}
</style> 
  <script type="text/javascript">
$(function() {
    // hide #back-top first
    $("#back-top").hide();
    // fade in #back-top
    $(window).scroll(function() {
        if ($(this).scrollTop() > 500) {
            $('#back-top').fadeIn();
        } else {
            $('#back-top').fadeOut();
        }
    });
    // scroll body to 0px on click
    $('#back-top a').click(function() {
        $('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });
});
</script> 
 </head> 
 <body> 
  <script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js"></script> 
  <script>
        L2Dwidget.init();
    </script> 
  <p id="back-top" style="display:none"><a href="#top"><span></span></a></p> 
  <img src="https://images.cnblogs.com/cnblogs_com/blogs/701705/galleries/2142702/o_220412023223_912665cc33fc226060430eb69f266424.jpeg" alt="Penn000" class="img_avatar" width="210px" height="210px" style="border-radius:10%" />  
 </body>
</html>
添加卡通人物

  

第四步：页首HTML

动态线条

<script type="text/javascript">$("#mobile-style").remove();</script>
<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="//files.cnblogs.com/files/linianhui/lnh.cnblogs.css" rel="stylesheet"/>
页首HTML代码

鼠标点击效果

<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>
在页首html

 进入离开效果

<script>
/*自定义浏览器标题*/
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function() {
    if (document.hidden) {
        document.title = '｡◕ᴗ◕｡ 瞅啥呢，你快回来吖~~~';
        clearTimeout(titleTime);
    }
    else {
        document.title = '(◕ᴗ◕✿)你真机智~';
        titleTime = setTimeout(function() {
            document.title = OriginTitile;         
        }, 4000);
    }
});
</script>
浏览器标题效果

 

 

第五步：页脚HTML

设置小火箭 快速返回顶部

<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
页脚HTML代码

 

 

 

 博客配置源码

 

#home {
    margin: 0 auto;
    width: 80%;/*原始65*/
    min-width: 980px;/*页面顶部的宽度*/
    background-color: rgba(224, 255, 255, 0.5);/*背景颜色*/
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(0, 255, 0, 1);/*边框颜色*/
}
body {
    background: rgb(224, 255, 255, 0.8) url('https://images.cnblogs.com/cnblogs_com/blogs/701705/galleries/2142702/o_220412024831_5f16db2c50ecabea3317c292dfb51111.jpeg') fixed no-repeat;/*背景图片*/
    background-position: 50% 5%;
    background-size: cover;
}
#blogTitle {
    height: 100px;  /*高度*/
    clear: both;
    background-color: rgba(247, 20, 20, 0);/*blog背景颜色*/
}
#blogTitle h1 {
    font-size: 36px;
    font-weight: bold;
    line-height: 1.8em;/*原始 1.6em*/
    margin-top: 10px;/*原始 15px */
    color: #800080;
}
#blogTitle h2 {
    font-weight: normal;
    font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/
    line-height: 1.8;
    color: #111;
    font-weight: bold;
    text-align: right;
    float: right;
}
#navigator{
    background-color: rgba(240, 255, 255, 0.86);
}
#navList a:link, #navList a:visited, #navList a:active{
    color: #0000cd;/*博客园 管理栏位字体颜色*/
    font-size: 18px;
    font-weight: bold;
}
.blogStats{
    color: #0000cd;/*博客园 管理栏位字体颜色*/
}
.postTitle {
    border-left: 8px solid rgba(255, 140, 0, 1);/*标题条颜色*/
    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: #663399;/*标题头字体颜色*/
    transition: all 0.4s linear 0s;
}
.postTitle a:hover {
    margin-left: 30px;
    color: #8b4513;/*标题头选中颜色*/
    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: #0f0f0f;
    float: left;
    width: 100%;
    clear: both;
    text-align: left;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 13px;
    padding-right:30px;/*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(119, 136, 153, 0.842);/*日历头颜色*/
}
.catListTitle{
    background-color: rgba(240, 255, 240, 0.9);/*侧边栏头颜色*/
}

#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);
}

.entrylist{
    background: rgba(255, 255, 255, 0.5);
}

#main{
   min-width: 640px;
}
页面定制CSS代码
<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 
  <title>Document</title> 
  <style>
    /* 处理虚线 */
    canvas#live2dcanvas {
        border: 0 !important;
    }
    /*置顶图标效果*/
    #back-top {
        position: fixed;
        bottom: 135px;
        right: 5px;
        z-index: 99;
    }
    #back-top span {
        width: 50px;
        height: 64px;
        display: block;
        background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;
    }
    #back-top a{outline:none}
  </style> 
  <script type="text/javascript">
    $(function() {
        // 页面在顶部时隐藏
        $("#back-top").hide();
        // 页面非顶部时淡出
        $(window).scroll(function() {
            if ($(this).scrollTop() > 500) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });
        // 点击将页面滚动至顶部
        $('#back-top a').click(function() {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
  </script> 
  <!-- 卡通人物 -->
  <script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js"></script>
  <script>
    L2Dwidget.init();
  </script> 
 </head> 
 <body> 
  <p id="back-top" style="display:none"><a href="#top"><span></span></a></p> 
  <img src="https://images.cnblogs.com/cnblogs_com/blogs/701705/galleries/2142702/o_220412023223_912665cc33fc226060430eb69f266424.jpeg" alt="Penn000" class="img_avatar" width="210px" height="210px" style="border-radius:10%" />  
 </body>
</html>
博客侧边栏公告
<script type="text/javascript">
    $("#mobile-style").remove();
    /* 鼠标特效 */
    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
            },
            2600,
            function() {
                $i.remove();
            });
        });
    });

    /*自定义浏览器标题*/
    var OriginTitile = document.title;
    var titleTime;
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            document.title = '｡◕ᴗ◕｡ 瞅啥呢，你快回来吖~~~';
            clearTimeout(titleTime);
        }
        else {
            document.title = '(◕ᴗ◕✿)你真机智~';
            titleTime = setTimeout(function() {
                document.title = OriginTitile;         
            }, 4000);
        }
    });
</script>
<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="//files.cnblogs.com/files/linianhui/lnh.cnblogs.css" rel="stylesheet"/>
页首HTML代码
<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
页脚HTML代码

 

 

<script type="text/javascript">
    $("#mobile-style").remove();
    /* 鼠标特效 */
    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
            },
            2600,
            function() {
                $i.remove();
            });
        });
    });

    /*自定义浏览器标题*/
    var OriginTitile = document.title;
    var titleTime;
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            document.title = '(｡•﹃•｡) 是什么吸引了你吖~';
            clearTimeout(titleTime);
        }
        else {
            document.title = '(✪ω✪) 贴贴~';
            titleTime = setTimeout(function() {
                document.title = OriginTitile;         
            }, 4000);
        }
    });
</script>
<link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="//files.cnblogs.com/files/linianhui/lnh.cnblogs.css" rel="stylesheet"/>
new-s

 

posted @ 2022-04-12 11:10  Phoenixy  阅读(159)  评论(0)    收藏  举报