html好看的样式模板 

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!--<link type="text/css" rel="stylesheet" href="https://www.cnblogs.com/wyh0923/custom.css?v=0QaetlqneO7KPnPx9Chqvtz42AA="/>-->
 7     <style>
 8         body::before {
 9             background: url(https://images.cnblogs.com/cnblogs_com/blogs/653554/galleries/1961436/o_2104140852061646268-20190709145111387-899901278.jpg) center/cover no-repeat;
10         }
11         body:before {
12             content: '';
13             background-repeat: no-repeat;
14             background-position: center;
15             opacity: 0.1;
16             position: fixed;
17             top: 0;
18             left: 0;
19             width: 100%;
20             height: 100%;
21             z-index: -1;
22         }
23     </style>
24 </head>
25 
26 <body>
27 
28     <div style="background-color: indianred">床前明月光</div>
29     <span style="background-color: darkcyan">疑是地上霜</span>
30     <div></div>
31     <div style="background-color: indianred;display: inline">问君能有几多愁</div>
32     <span style="background-color: darkcyan;display: block">恰似一江春水向东流</span>
33     <p></p>
34     <div style="border:1px solid indianred; height: 70px;">
35         <div style="background-color: green;height: 50px;margin-top: 0;">一二三四五</div>
36     </div>
37 
38     <p></p>
39     <div style="border:1px solid indianred; height: 70px;">
40         <div style="background-color: green;height: 50px;padding-top: 0;">上山打老虎</div>
41     </div>
42 
43 <div id="page_end_html">
44     <!--看板娘 start-->
45     <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
46     <script src="static/jquery-2.2.0.min.js"></script>
47     <script>
48         L2Dwidget.init({
49             "model": {
50                 "jsonPath": "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",
51                 "scale": 1
52             },
53             "display": {
54                 "position": "right", //看板娘的位置
55                 "width": 60,  //宽度
56                 "height": 80, //高度
57                 "hOffset": 5,
58                 "vOffset": 5
59             },
60             "mobile": {
61                 "show": true,
62                 "scale": 0.5
63             },
64             "react": {
65                 "opacityDefault": 0.7,
66                 "opacityOnHover": 0.2
67             }
68         });
69     </script>
70     <!--看板娘 end-->
71 
72     <!--鼠标特效 start-->
73     <script src="static/mouse-click.js"></script>
74     <canvas width="1777" height="841"
75             style="position: fixed; left: 0; top: 0; z-index: 2147483647; pointer-events: none;"></canvas>
76     <!--鼠标特效 end-->
77 
78     <!-- Music start-->
79     <link rel="stylesheet" href="static/APlayer.min.css">
80     <script src="static/APlayer.min.js"></script>
81     <script src="static/Meting.min.js"></script>
82     <div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="2878443703" data-server="netease"
83          data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="orange"></div>
84     <!-- Music end -->
85 
86     <!-- 根据鼠标位置出现动态图形的炫酷特效 start-->
87     <script type="text/javascript" src="static/canvas-nest.min.js"></script>
88     <!--根据鼠标位置出现动态图形的炫酷特效 end-->
89 </div>
90 
91 
92 </body>
93 </html>
页面示例

 

posted @ 2021-04-14 17:34  中國颜值的半壁江山  阅读(372)  评论(0)    收藏  举报