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.公告栏时钟

Building Blog(个性化博客)1

页面定制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.炫酷标题

Building Blog(个性化博客)1

页面定制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.返回顶部按钮

Building Blog(个性化博客)1

页面定制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.返回底部按钮

Building Blog(个性化博客)1

页面定制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 >按钮文本</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 ></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 >).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

Building Blog(个性化博客)1

目录

1.看板娘

2.去广告

3.公告栏时钟

4.炫酷标题

5.返回顶部按钮

6.返回底部按钮

7.滚动公告

8.Github快捷路径

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

10.雪花特效

END（づ￣3￣）づ╭❤～

Building Blog(个性化博客)1

目录

1.看板娘

2.去广告

3.公告栏时钟

4.炫酷标题

5.返回顶部按钮

6.返回底部按钮

7.滚动公告

8.Github快捷路径

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

10.雪花特效

END（づ￣3￣）づ╭❤～

相关推荐