Building Blog(个性化博客)


目录

【Building Blog】1.Live 2D(看板娘)

【Building Blog】2.No Adv.(去广告)

【Building Blog】3.Clock(公告栏时钟)

【Building Blog】4.Cool headlines(炫酷标题)

【Building Blog】5.Back to top(返回顶部按钮)


1.Live 2D(看板娘)

页脚Html代码:

 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.No Adv.(去广告)

页面定制CSS代码:

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

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

3.Clock(公告栏时钟)

页面定制CSS代码:(时钟居中)

1 .clockdiv{
2     text-align: center;
3 }

博客侧边栏公告

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

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

4.Cool headlines(炫酷标题)

页面定制CSS代码:

1 #Header1_HeaderTitle {
2     text-align: center;
3     font-family: "League-Gothic", Courier;
4     font-size: 50px;
5     text-transform: uppercase;
6     color: #fff;
7     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;
8 }

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

5.Back to top(返回顶部按钮)

页面定制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.:

第一行设置背景颜色

第二行设置到页面底部距离

第七行设置到页面右侧距离

第九行设置透明度(1.0~0.0)(1:不透明,0:完全透明)

页首Html代码:

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

P.S.:

style="color:"设置字体颜色

将text修改为你想要的文字

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

未完待续。。。

猜你喜欢

转载自www.cnblogs.com/anbujingying/p/11298341.html
今日推荐