Building Blog(个性化博客)1

ε=ε=ε=ε=ε=┌(つ•̀ω•́)つ ε=ε=ε=ε=ε=┌(つ•̀ω•́)つ ε=ε=ε=ε=ε=┌(つ•̀ω•́)つ ε=ε=ε=ε=ε=┌(つ•̀ω•́)つ

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 5     <title>Live2D</title>
 6      
 7     <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/anbujingying/waifu.css"/>
 8     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 9 </head>
10 <body>
11     <link rel="stylesheet" type="text/css" href="https://files.cnblogs.com/files/anbujingying/waifu.css">
12     <div class="waifu" id="waifu">
13         <div class="waifu-tips" style="opacity: 1;"></div>
14         <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
15         <div class="waifu-tool">
16             <span class="fui-home"></span>
17             <span class="fui-chat"></span>
18             <span class="fui-eye"></span>
19             <span class="fui-user"></span>
20             <span class="fui-photo"></span>
21             <span class="fui-info-circle"></span>
22             <span class="fui-cross"></span>
23         </div>
24     </div>
25     <script src="https://files.cnblogs.com/files/anbujingying/live2d.js"></script>
26     <script src="https://files.cnblogs.com/files/anbujingying/waifu-tips.js"></script>
27     <script type="text/javascript">initModel()</script>
28 </body>
29 </html>
30 <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/anbujingying/flat-ui.min.css"/>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

2.去广告

页面定制CSS代码:

#ad_t2,#cnblogs_c1,#under_post_news,#cnblogs_c2,#under_post_kb {
    display:none; !important
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

3.公告栏时钟

页面定制CSS代码：（时钟居中）

.clockdiv{
    text-align: center;
}

博客侧边栏公告：

<div class="clockdiv"><canvas id="clock" width ="200px" height="200px">您的浏览器不兼容canvas</canvas><div>
<script type="text/javascript" src="https://files.cnblogs.com/files/anbujingying/clock.js"></script>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

4.炫酷标题

页面定制CSS代码：

#Header1_HeaderTitle {
    text-align: center;
    font-family: "League-Gothic", Courier;
    font-size: 50px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

5.返回顶部按钮

页面定制CSS代码：

 1 #back-to-top {
 2     background-color:grey;
 3     bottom: 20px;
 4     box-shadow: 0 0 6px black;
 5     padding: 5px 10px;
 6     position: fixed;
 7     right: 50px;
 8     border-radius: 8px;
 9     opacity: 1;
10 }

P.S.

第二行background-color:背景颜色;

第三行bottom:到页面底部距离;

第七行right:到页面右侧距离;

第九行opacity:透明度（1.0~0.0）（1：不透明，0：完全透明）;

页首Html代码：

<span id="top"></span>
<span id="back-to-top"><a href="#" style="color:white">text</a></span>

P.S.

第二行<span id="back-to-top"><a href="#" style="color:字体颜色">按钮文本</a></span>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

6.返回底部按钮

页面定制CSS代码：

 1 #back-to-bottom {
 2     background-color:grey;
 3     top: 30px;
 4     box-shadow: 0 0 6px black;
 5     padding: 5px 10px;
 6     position: fixed;
 7     right: 50px;
 8     border-radius: 8px;
 9     opacity: 1;
10 }

P.S.

第一行background-color:背景颜色;

第三行top:到页面顶部距离;

第七行right:到页面右侧距离;

第九行opacity:透明度（1.0~0.0）（1：不透明，0：完全透明）;

页首Html代码：

<span id="bottom"></span>
<span id="back-to-bottom"><a href="#bot" style="color:white">text</a></span>

P.S.

第二行<span id="back-to-bottom"><a href="#bot" style="color:字体颜色">按钮文本</a></span>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

7.滚动公告

页首Html代码：

 1 <div id="Scroll_info" style="text-align: center;color:blue;font-size:18px;padding:5px;opacity: 1">I love coding</div>
 2 <script>
 3        function func(){
 4            var tag = document.getElementById('Scroll_info');
 5            var content = tag.innerText;
 6            var f = content.charAt(0);
 7            var l = content.substring(1,content.length);
 8            var new_content = l + f;
 9            tag.innerText = new_content;
10        }
11        setInterval('func()',200);          
12 </script>

P.S.

第一行<div id="Scroll_info" style="text-align: 对齐方式;color:颜色;font-size:字体大小;padding:5px;opacity:透明度（1.0~0.0）（1：不透明，0：完全透明）">公告内容</div>

第十一行setInterval('func()',滚动速度);

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

8.Github快捷路径

前往http://tholman.com/github-corners/

选择你喜欢的款式并复制到页首Html代码

记得修改链接地址( • ̀ω•́ )✧

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

9.悬浮推荐栏+反对消失

页面定制CSS代码：（悬浮推荐栏）

 1 #div_digg {
 2     padding: 10px;
 3     position: fixed;
 4     _position: absolute;
 5     z-index: 1000;
 6     bottom: 50px;
 7     right: 0;
 8     _right: 20px;
 9     border: 1px solid #D9DBE1;
10     background-color: #FFFFFF;
11     filter: alpha(Opacity=80);
12     -moz-opacity: 0.8;
13     opacity: 1;
14 }

P.S.

第六行bottom: 到页面底部距离;

第十行background-color: 背景颜色;

第十三行opacity: 透明度（1.0~0.0）（1：不透明，0：完全透明）;

页面定制CSS代码：（反对消失）

.buryit {
    display: none;
}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

10.雪花特效

1 <script>
2 (function($){$.fn.snow=function(options){var $flake=$('<div id="flake" />').css({'position':'absolute','top':'-50px'}).html('&#10052;'),documentHeight=$(document).height(),documentWidth=$(document).width(),defaults={minSize:10,maxSize:20,newOn:300,flakeColor:"#2894FF"},options=$.extend({},defaults,options);var interval=setInterval(function(){var startPositionLeft=Math.random()*documentWidth-100,startOpacity=0.5+Math.random(),sizeFlake=options.minSize+Math.random()*options.maxSize,endPositionTop=documentHeight-40,endPositionLeft=startPositionLeft-100+Math.random()*200,durationFall=documentHeight*10+Math.random()*5000;$flake.clone().appendTo('body').css({left:startPositionLeft,opacity:startOpacity,'font-size':sizeFlake,color:options.flakeColor}).animate({top:endPositionTop,left:endPositionLeft,opacity:0.2},durationFall,'linear',function(){$(this).remove()});},options.newOn);};})(jQuery);
3 $.fn.snow({ minSize: 5, maxSize: 50, newOn: 800, flakeColor: '#00BFFF' });
4 </script>

P.S.

第三行$.fn.snow({ minSize: 最小雪花大小, maxSize: 最大雪花大小, newOn: 800, flakeColor: 雪花颜色 });

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

END（づ￣3￣）づ╭❤～

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

ε=ε=ε=ε=ε=┌(つ•̀ω•́)つ ε=ε=ε=ε=ε=┌(つ•̀ω•́)つ ε=ε=ε=ε=ε=┌(つ•̀ω•́)つ ε=ε=ε=ε=ε=┌(つ•̀ω•́)つ

─=≡Σ(((つ•̀ω•́)つBuilding Blog（个性化博客）1

─=≡Σ(((つ•̀ω•́)つBuilding Blog（个性化博客）2

相关阅读:
call（）与apply（）的作用与区别
 Tomcat8/9的catalina.out中文乱码问题解决
 怎样查看Jenkins的版本
 每日日报2020.8.18
528. Random Pick with Weight
875. Koko Eating Bananas
721. Accounts Merge
515. Find Largest Value in Each Tree Row
286. Walls and Gates (Solution 1)
408. Valid Word Abbreviation
原文地址：https://www.cnblogs.com/dsanying/p/11298341.html

Building Blog(个性化博客)1

目录

1.看板娘

2.去广告

3.公告栏时钟

4.炫酷标题

5.返回顶部按钮

6.返回底部按钮

7.滚动公告

8.Github快捷路径

9.悬浮推荐栏+反对消失

10.雪花特效

END（づ￣3￣）づ╭❤～