Building Blog (personalized blog)

 


table of Contents

[Building Blog] 1.Live 2D (showgirl)

[Building Blog] 2.No Adv. (To advertising)

[Building Blog] 3.Clock (bulletin board clock)

[Building Blog] 4.Cool headlines (cool title)

[Building Blog] 5.Back to top (Top Button)


1.Live 2D (showgirl)

Footer Html Code:

 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"/>

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

Adv 2.No. (To advertising)

Page custom CSS code:

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

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

3.Clock (bulletin board clock)

Custom CSS code page :( clock center)

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

Blog sidebar announcement

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 (cool title)

Page custom CSS code:

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 (Top Button)

Page custom CSS code:

 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.:

The first line sets the background color

The second line sets the distance to the bottom

The seventh line to the right of the page to set the distance

The ninth row is provided opacity (1.0 - 0.0) (1: Opaque, 0: completely transparent)

Top Html Code:

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

P.S.:

style = "color:" Set the font color

The text is the text you want to modify

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

To be continued. . .

Guess you like

Origin www.cnblogs.com/anbujingying/p/11298341.html