侧边栏 

 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>

 

posted @ 2019-07-13 22:15  JackSon~鹤  阅读(278)  评论(0)    收藏  举报