博客园如何装饰自己的博客

最新推荐文章于 2022-12-01 15:07:11 发布

置顶 changlinlo

最新推荐文章于 2022-12-01 15:07:11 发布

阅读量2.8k

点赞数 7

分类专栏： 02 文章标签： html5 javascript css

本文链接：https://blog.csdn.net/weixin_43451427/article/details/104772922

版权

02 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果图

一点一点的修改成这样的
参考页面 https://www.cnblogs.com/lin02/

首先开通js权限

然后选择你自己觉得不错的模板

选择模板

然后在进入你的博客页面

修改外观

将写好的css代码复制沾到后台

在这里插入图片描述

背景图我调用的是一个API链接

随机生成二次元老婆 https://www.320nle.com/acggirl/acgurl.php

css代码:
body {
    background: url(https://www.320nle.com/acggirl/acgurl.php) 0% 0% / cover no-repeat fixed;
}

看板娘是一个live2D 你可以百度看板娘有教程
音乐是调用网易云的API 你也可以百度

这是放入 页首 HTML 代码 
<embed id="wyy"  frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=410 src="//music.163.com/outchain/player?type=4&id=333811054&auto=1&height=430" ></embed>

右上角其实就是一个js方法也就刷新了一下页面

function ChangePicture(){
    window.location.reload();  
}
</script>

左上角就是调用了一个隐藏显现函数

效果图的后台代码

1.博客皮肤（118）

			BlacklowKey

2.页面定制 CSS 代码

body {
    color: #000;
    background: #fff;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 12px;
    min-height: 101%;
    background: url(https://www.320nle.com/acggirl/acgurl.php) 0% 0% / cover no-repeat fixed;
}
//https://www.320nle.com/acggirl/acgurl.php
//https://i.loli.net/2019/10/11/XtAZJHUVb67aKy2.png
#TopViewPostsBlock{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#wyy {
    position: fixed;
    top:360px;
    left:1582px;
    z-index: 1;
}
#Uright {
    width: 100px;
    height: 100px;
    top: -75px;
    right: 50px;
}
#Uleft, #Uright, #Dleft, #Dright {
    -moz-transition-property: top;
    -moz-transition-duration: 1s;
    -webkit-transition-property: top;
    -webkit-transition-duration: 1s;
    -o-transition-property: top;
    -o-transition-duration: 1s;
    position: fixed;
    width: 100px;
    height: 100px;
    line-height: 500px;
    text-align: center;
    z-index: 1;
}
#Uleft {
    width: 80px;
    height: 80px;
    top: -60px;
    left: 50px;
}
#Uleft, #Uright, #Dleft, #Dright {
    -moz-transition-property: top;
    -moz-transition-duration: 1s;
    -webkit-transition-property: top;
    -webkit-transition-duration: 1s;
    -o-transition-property: top;
    -o-transition-duration: 1s;
    position: fixed;
    width: 80px;
    height: 80px;
    line-height: 500px;
    text-align: center;
    z-index: 1;
}
#blogTitle h1 {
    font-size: 150%;
    font-weight: bold;
    line-height: 1.5em;
    margin-left: 250px;
    margin-top: 40px;
    width: 50%;
    float: left;
    display: inline;
    letter-spacing: 1px;
}
#blogTitle h1 a, #blogTitle h2 {
    color: #FFAED7;
    font-family: "微软雅黑";
    text-shadow: 5px 5px 3px #5151FF;
    font-size: 30px;
}
/*background: rgba(105,145,214,0.6);*/
#navigator {
     background: rgba(105,145,214,0.6);
    height: 60px;
    clear: both;
    margin-top: 60px;
    position: relative;
    border-radius: 5px;
    border: 2px solid #bbe1f1;
}

#navList a:link, #navList a:visited, #navList a:active {
    color: #5385CC;
    text-shadow: 4px 4px 5px #86B8A9;
    font-size: 20px;
    font-weight: 600;
}
#navList a {
    margin: 15px 10px 0 0;
    padding: 0 10px;
    font: 14px/1.5em "微软雅黑";
    display: block;
}

/*background: rgba(105,145,214,0.6);*/
#main {
    min-width: 980px;
    text-align: left;
    clear: both;
    background: rgba(105,145,214,0.4);
    border-radius: 5px;
}
#TopViewPostsBlock{
    display: block;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#sidebar_蛮不错的一个整合工具集的网站 ul {
    line-height: 1.5em;
    margin-left: 20px;
}
#mainContent {
    min-height: 200px;
    *padding-top: 10px;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    float: left;
    width: 800px;
    background: rgba(105,145,214,0.4);
}
.dayTitle {
    color: #609E89;
    font-weight: bold;
    line-height: 1.5em;
    font-size: 110%;
    margin-top: 3px;
    margin-bottom: 10px;
    float: right;
    position: relative;
    top: 40px;
    font-size: 18px;
}
/*238,250,255*/
.day {
    min-height: 10px;
    _height: 10px;
    margin-bottom: 20px;
    padding-bottom: 5px;
    margin-left: 20px;
    margin-top: 1em;
    margin-right: 2em;
    border: 2px solid #bbe1f1;
    background-color: rgba(238,250,255,0.5);
}
#sideBarMain {
    background: rgba(105,145,214,0.4);
    border: 2px solid #bbe1f1;
    margin-top: 10px;
    width: 170px;
}
.postTitle {
    font-size: 20px;
    font-weight: bold;
    padding: 0 100px 10px 20px;
    border-bottom: 1px solid #e0e0e0;
    line-height: 1.5em;
    clear: both;
    border-left: 5px solid #1fa6e6;
}
.postCon {
    float: right;
    line-height: 1.5em;
    width: 95%;
    height: 50px;
    clear: both;
    padding: 10px 0;
}
.c_b_p_desc {
    text-indent: 0;
    font-size: 14px;
}
.postDesc {
    float: none;
    clear: both;
    text-align: right;
    padding-right: 5px;
    color: #A56566;
}
.postDesc a:link, .postDesc a:visited, .postDesc a:active {
    color: #2975E6;
}
.newsItem .catListTitle {
    text-align: left;
    padding: 5px 10px;
    background: rgba(255,255,255,0.5);
}
.CalTitle {
    width: 100%;
    background: rgba(255,255,255,0.5);
    color: #000;
    border-bottom: 1px solid #666;
}
}
.catListEssay h3, .catListLink h3, .catListNoteBook h3, .catListTag h3, .catListPostCategory h3, .catListPostArchive h3, .catListArticleArchive h3, .catListImageCategory h3, .mySearch h3, .catListComment h3, .catListView h3, .catListFeedback h3, #blog-sidecolumn .catListTitle {
    text-align: left;
    padding: 5px 10px;
    background: rgba(255,255,255,0.5);
    border-bottom: none;
    border: 1px solid #ccc;
}
.catListEssay h3, .catListLink h3, .catListNoteBook h3, .catListTag h3, .catListPostCategory h3, .catListPostArchive h3, .catListArticleArchive h3, .catListImageCategory h3, .mySearch h3, .catListComment h3, .catListView h3, .catListFeedback h3, #blog-sidecolumn .catListTitle {
    text-align: left;
    padding: 5px 10px;
    background: rgba(255,255,255,0.5);
    border-bottom: none;
    border: 1px solid #ccc;
}
.mySearch .input_my_zzk {
    height: 1.4em;
    width: 100px;
    background: rgba(255,255,255,0.5);
  border-radius: 5px;
}
input.btn_my_zzk {
    vertical-align: middle;
    height: 22px;
    font-size: 12px;
    padding-left: 5px;
    background: rgba(187,225,241,0.5);
    padding-right: 5px;
    border-radius: 5px;
}
.catListEssay ul li, .catListLink ul li, .catListNoteBook ul li, .catListTag ul li, .catListPostCategory ul li, .catListPostArchive ul li, .catListArticleArchive ul li, .catListImageCategory ul li, .mySearch ul li, .catListComment ul li, .catListView ul li, .catListFeedback ul li {
    margin: .5em;
    height: 20px;
    font-size: 12px;
}
.pager {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background-color: rgba(124,145,213,0.8);
    border-radius: 6px;
}

3.博客侧边栏公告（支持HTML代码）（支持 JS 代码）

  <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/lin02/waifu.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <div class="waifu" id="waifu">
        <div class="waifu-tips" style="opacity: 1;"></div>
        <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
        <div class="waifu-tool">
            <span class="fui-home"></span>
            <span class="fui-chat"></span>
            <span class="fui-eye"></span>
            <span class="fui-user"></span>
            <span class="fui-photo"></span>
            <span class="fui-info-circle"></span>
            <span class="fui-cross"></span>
        </div>
    </div>
  <script src="https://blog-static.cnblogs.com/files/lin02/live2d.js"></script>
    <script src="https://blog-static.cnblogs.com/files/lin02/waifu-tips.js"></script>
    <script type="text/javascript">initModel()</script>
    <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/yjlblog/flat-ui.min.css"/>

4.页首 HTML 代码

<input type="image" id="Uleft" src="https://images.cnblogs.com/cnblogs_com/lin02/1563544/o_IMG_0905.JPG" onmouseover="this.style.top='10px'; this.src='https://images.cnblogs.com/cnblogs_com/lin02/1563544/o_IMG_0904.JPG' " onmouseout="this.style.top='-40px'; this.src='https://images.cnblogs.com/cnblogs_com/lin02/1563544/o_IMG_0905.JPG' " onclick="ShowPicture()" style="top: -40px;" title="点击看图片">

<input type="image" id="Uright" src="https://images.cnblogs.com/cnblogs_com/lin02/1563544/o_IMG_1160.JPG" onmouseover="this.style.top='10px'; this.src='https://images.cnblogs.com/cnblogs_com/lin02/1563544/o_IMG_1161.JPG' " onmouseout="this.style.top='-40px'; this.src='https://images.cnblogs.com/cnblogs_com/lin02/1563544/o_IMG_1160.JPG' " 
onclick="ChangePicture()" style="top: -40px;" title="点击换图片">

<embed id="wyy"  frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=410 src="//music.163.com/outchain/player?type=4&id=333811054&auto=1&height=430" ></embed>

4.页脚 HTML 代码

<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
  var a = new Array("😜java😜","🐳html🐳","🍌jQuery🍌","(⊙﹏⊙)rabbitMQ喵喵","🐴css🐴","📵js📵","👶oracle👶","☠mybatis☠","👰spring👰","嘤嘤嘤","✨springBoot✨","🏀springMVC🏀","🍕hibernate🍕","🛩struts2🛩","嘿嘿嘿","🚩redis🚩","🚅🚅🚅","🚩websocket🚩","🉑shiro🉑","💢linux💢","233 spring cloud (～￣▽￣)～","❤thymeleaf❤","(๑′ᴗ‵๑) vue Ｉ Lᵒᵛᵉᵧₒᵤ❤","★DELL★");
        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();
        });
    });
});
function ShowPicture(){
   dx = document.getElementById("main");
   if (dx.style.opacity == "0") dx.style.opacity="0.9";else dx.style.opacity="0";
}
</script>

<script>
function ChangePicture(){
    window.location.reload();  
}
</script>

over

时间会给你答案

changlinlo

关注

7
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
博客园如何装饰自己的博客

效果图参考页面 https://www.cnblogs.com/lin02/首先开通js权限然后选择你自己觉得不错的模板然后在进入你的博客页面将写好的css代码复制沾到后台背景图我调用的是一个API链接随机生成二次元老婆 https://www.320nle.com/acggirl/acgurl.phpcss代码:body { background: url(ht...
复制链接

扫一扫