目录
【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修改为你想要的文字
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -