零Web知识个性化Blog

需要使用到的工具

• Chrome
• Pycharm

---

1. 自定主题的CSS
2. 申请博客的Js权限
3. 设置博客选项

打开Chrome修改查看CSS样式，Windows(F12)，MacOS(Command+Option+I)打开开发工具

使用搜索引擎搜索一个你喜欢的H5的背景效果

CSS代码

#home {
    margin: 0 auto;
    width: 80%;
    min-width: 950px;
    background-color: #ffffffc0;
    padding: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    font-family: monaco, monospace, "Microsoft YaHei", Consolas, "Courier New";
}

/*解决上传图片宽度限制700*/
#cnblogs_post_body img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.blogStats {
    float: right;
    color: #757575;
    margin-top: 19px;
    margin-right: 2px;
    text-align: right;
    padding-top: 10px;
    font-size: 12px;
}

/*标题*/
#blogTitle h1 a {
    color: #2375a5;
    font-size: 42px;
}
#blogTitle a:hover{
    color: black;
}

/*页面导航*/
#navigator {
    font-size: 18px;
    border-bottom: 1px solid #ededed;
    border-top: 1px solid #ededed;
    height: 50px;
    clear: both;
    margin-top: 25px;
}
#navList {
    min-height: 30px;
    float: left;
    padding-top: 10px;
}
/*将管理连接移到最后一项*/
#navList li {
    float: right;
    margin: 0;
}
#navList a {
    display: block;
    width: auto;
    height: 22px;
    float: left;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;
}
#navList a:link, #navList a:visited, #navList a:active {
    color: #2475a5;
    font-weight: bold;
}
#navList a:hover{
    color: white;
    background-color: black;
}

#mainContent {
    min-height: 200px;
    padding: 0px 0px 10px 0;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    float: right;
    margin-left: -22em;
    width: 100%;
}

#sideBar {
    margin-top: -15px;
    width: 230px;
    min-height: 200px;
    padding: 0px 0 0px 5px;
    float: left;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
}

.postTitle {
    border-left: 5px solid #008200;
    margin-bottom: 10px;
    font-size: 28px;
    float: right;
    width: 100%;
    clear: both;
    /*颜色渐变背景*/
    /*background: -webkit-linear-gradient(left, #22282b80, rgba(0, 0, 0, 0));*/
}

#topics .postTitle {
    border: 0px;
    font-size: 180%;
    font-weight: bold;
    float: left;
    line-height: 1.5;
    width: 100%;
    padding-left: 5px;
}

.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory {
    /*背景透明*/
    background: #fff0;
    margin-bottom: 35px;
    word-wrap: break-word;
    box-shadow: 20px 0px 5px 0px rgba(100, 100, 100, 0.3);
}

/*侧边栏输入框透明*/
.input_my_zzk {
    border: 1px solid #ccc;
    width: 100%;
    height: 25px;
    padding-right: 30px;
    padding-left: 5px;
    outline: 0;
    /*输入框背景透明*/
    background-color: #fff0;
}

/*自定制子菜单样式*/
#sub_nav {
    display: none;
    margin-top: 35px;
    /*子菜单缩进*/
    /*position: absolute;*/
}
#sub_nav ul{
    float: none;
}
#sub_nav li{
    float: none;
}
#navList li:hover #sub_nav{
    display: block;
}
#sub_nav a{
    float: none;
}

/*代码样式*/
.cnblogs_code {
    background-color: #97b12e87;
    font-family: monaco, "Courier New"!important;
    font-size: 14px!important;
    border: 1px solid rgba(82, 168, 236, 0.8);
    padding: 5px;
    overflow: auto;
    margin: 5px 0;
    color: #069;
}
/*普通文本*/
.cnblogs_code pre {
    font-family: monaco, "Courier New"!important;
    font-size: 14px!important;
    word-wrap: break-word;
    white-space: pre-wrap;
}
.cnblogs_code textarea {
    font-family: monaco, "Courier New"!important;
    font-size: 14px!important;
}
/*语法文本*/
.cnblogs_code span {
    font-family: monaco, "Courier New"!important;
    font-size: 14px!important;
    line-height: 1.5!important;
}
.cnblogs_code div {
    background-color: #0000;
}

 　　Js代码

　　　　Canvas特效(particles_build.js)　　　　

window.requestAnimFrame = (function () {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

var can = document.getElementById("canvas");
var cxt = can.getContext("2d");
can.width = window.innerWidth;
can.height = window.innerHeight;
cxt.lineWidth = 0.3;
//初始链接线条显示位置
var mousePosition = {
    x: 30 * can.width / 100,
    y: 30 * can.height / 100
}
//圆形粒子对象参数
var dots = {
    n: 500,//圆形粒子个数
    distance: 50,//圆形粒子之间的距离
    d_radius: 100,//粒子距离鼠标点的距离
    array: []//保存n个圆形粒子对象
}

var mouse = {
    x: undefined,
    y: undefined
}
window.addEventListener("mousemove", function (event) {
    mouse.x = event.x;
    mouse.y = event.y;
});
window.addEventListener("resize", function () {
    can.width = window.innerWidth;
    can.height = window.innerHeight;
});
window.addEventListener("mouseout", function () {
    mouse.x = can.width / 2;
    mouse.y = can.height / 2;
});

//创建随即颜色值
function colorValue(min) {
    return Math.floor(Math.random() * 255 + min);
}

function createColorStyle(r, g, b) {
    return "rgba(" + r + "," + g + "," + b + ", 1)";
}

//混合两个圆形粒子的颜色
function mixConnect(c1, r1, c2, r2) {//圆的颜色 半径
    return (c1 * r1 + c2 * r2) / (r1 + r2);
};

//生成线条的颜色
function lineColor(dot1, dot2) {//获取具体的圆的颜色再计算
    var color1 = dot1.color,
        color2 = dot2.color;
    var r = mixConnect(color1.r, dot1.radius, color2.r, dot2.radius);
    var g = mixConnect(color1.g, dot1.radius, color2.g, dot2.radius);
    var b = mixConnect(color1.b, dot1.radius, color2.b, dot2.radius);
    return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));
}

//生成圆形粒子的颜色对象
function Color(min) {
    min = min || 0;
    this.r = colorValue(min);
    this.g = colorValue(min);
    this.b = colorValue(min);
    this.style = createColorStyle(this.r, this.g, this.b);
}

//创建圆形粒子对象
function Dot() {
    //圆形粒子随机圆心坐标点
    this.x = Math.random() * can.width;
    this.y = Math.random() * can.height;
    //x y 方向运动的速度值
    this.vx = -0.5 + Math.random();
    this.vy = -0.5 + Math.random();

    this.radius = Math.random() * 5;
    //this.color = "#ff3333";
    this.color = new Color();
}

//绘制出圆形粒子
Dot.prototype.draw = function () {
    cxt.beginPath();
    cxt.fillStyle = this.color.style;
    cxt.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    cxt.fill();
}

//添加圆形粒子
function createCircle() {
    for (var i = 0; i < dots.n; i++) {
        dots.array.push(new Dot());
    }
}

//绘制出圆形粒子
function drawDots() {
    for (var i = 0; i < dots.n; i++) {
        var dot = dots.array[i];
        dot.draw();
    }
}

//drawDots();
//移动
function moveDots() {
    for (var i = 0; i < dots.n; i++) {
        var dot = dots.array[i];
        //当圆形粒子对象碰壁的时候就反弹回来
        if (dot.y < 0 || dot.y > can.height) {
            dot.vx = dot.vx;
            dot.vy = -dot.vy;
        } else if (dot.x < 0 || dot.x > can.width) {
            dot.vx = -dot.vx;
            dot.vy = dot.vy;
        }
        //给圆形粒子圆心坐标加上速度值移动圆形粒子
        dot.x += dot.vx;
        dot.y += dot.vy;
    }
}

//链接粒子对象
function connectDots() {
    for (var i = 0; i < dots.n; i++) {
        for (var j = 0; j < dots.n; j++) {
            iDot = dots.array[i];
            jDot = dots.array[j];
            if ((iDot.x - jDot.x) < dots.distance && (iDot.y - jDot.y) < dots.distance && (iDot.x - jDot.x) > -dots.distance && (iDot.y - jDot.y) > -dots.distance) {
                if ((iDot.x - mouse.x) < dots.d_radius && (iDot.y - mouse.y) < dots.d_radius && (iDot.x - mouse.x) > -dots.d_radius && (iDot.y - mouse.y) > -dots.d_radius) {
                    cxt.beginPath();
                    //cxt.strokeStyle = "yellow";
                    cxt.strokeStyle = lineColor(iDot, jDot);
                    cxt.moveTo(iDot.x, iDot.y);
                    cxt.lineTo(jDot.x, jDot.y);
                    cxt.closePath();
                    cxt.stroke();
                }

            }
        }
    }
}

createCircle();
//让圆形粒子不断的移动
function animateDots() {
    cxt.clearRect(0, 0, can.width, can.height);
    moveDots();
    connectDots();
    drawDots();
    requestAnimFrame(animateDots);
}
animateDots();

 　　　　个性化的菜单导航

<script>
$(function(){
    $("#navList").append('<li><a id="blog_nav_other" class="menu" rel="nofollow" href="https://www.cnblogs.com/linxmouse/category/1241131.html">其它</a></li>');
    $("#navList").append('<li><a id="blog_nav_dotnet" class="menu" rel="nofollow" href="https://www.cnblogs.com/linxmouse/category/1241130.html">Data Base</a></li>');
    $("#navList").append('<li><a id="blog_nav_os" class="menu" rel="nofollow" href="https://www.cnblogs.com/linxmouse/category/1233201.html">Operating System</a></li>');
    $("#navList").append('<li><a id="blog_nav_winapi" class="menu" rel="nofollow" href="https://www.cnblogs.com/linxmouse/category/1115473.html">WinApi</a></li>');
    $("#navList").append('<li><a id="blog_nav_unity3d" class="menu" rel="nofollow" href="https://www.cnblogs.com/linxmouse/category/1076222.html">Unity3D</a></li>');
    $("#navList").append('<li><a id="blog_nav_qt" class="menu" rel="nofollow" href="https://www.cnblogs.com/linxmouse/category/1208722.html">Qt</a></li>');
    $("#navList").append('<li><a id="blog_nav_language" class="menu" rel="nofollow" href="#">编程语言</a><div id="sub_nav"><ul><li><a href="https://www.cnblogs.com/linxmouse/category/1208241.html">C++</a></li><li><a href="https://www.cnblogs.com/linxmouse/category/1121395.html">C#</a></li><li><a href="https://www.cnblogs.com/linxmouse/category/1078482.html">Python</a></li></ul></div></li>');
    $("#navList").append('<li><a id="blog_nav_home" class="menu" rel="nofollow" href="https://www.cnblogs.com/linxmouse">首页</a></li>');
});
</script>

　　设置详情

　　

　　选项详情