1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1">
5 <!--下载地址：https://cdn.bootcss.com/font-awesome/5.10.0-11/css/all.min.css-->
6 <link href="all.min.css" rel="stylesheet">
7 <style>
8
9 #mySidenav a {
10 position: absolute;
11 left: -45px;
12 transition: 0.3s;
13 padding: 15px;
14 width: 30px;
15 text-decoration: none;
16 font-size: 20px;
17 color: white;
18 border-radius: 0 5px 5px 0;
19 }
20
21 #mySidenav a:hover {
22 left: 0;
23 }
24
25 #qq {
26 top: 20px;
27 background-color: #3498db;
28 }
29
30 #weixin {
31 top: 80px;
32 background-color: #2ecc71;
33 }
34
35 #weibo {
36 top: 140px;
37 background-color: #e74c3c;
38 }
39
40 #phone {
41 top: 200px;
42 background-color: #f39c12;
43 }
44
45 </style>
46 </head>
47
48 <body>
49
50 <div id="mySidenav" class="sidenav">
51 <a href="#" id="qq"><i class="fab fa-qq"></i></a>
52 <a href="#" id="weixin"><i class="fab fa-weixin"></i></a>
53 <a href="#" id="weibo"><i class="fab fa-weibo"></i></a>
54 <a href="#" id="phone"><i class="fas fa-moblie-alt"></i></a>
55 </div>
56 </body>
57 </html>
