侧边栏

最新推荐文章于 2024-02-21 10:12:53 发布

ajaejpb2472710

最新推荐文章于 2024-02-21 10:12:53 发布

阅读量212

点赞数

原文链接：http://www.cnblogs.com/hzyhx/p/11182324.html

版权

 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>

转载于:https://www.cnblogs.com/hzyhx/p/11182324.html

ajaejpb2472710

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
侧边栏

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="viewport" content="width=device-width, initial-scale=1"> 5 <!--下载地址：https://cdn.bootcs...
复制链接

扫一扫

侧边栏

“相关推荐”对你有帮助么？