一个纯CSS写的返回顶部按钮组
- HTML代码:
<div class="gotop"> <ul> <li><a id="goTopBtn" href="#"><i class="icon iconfont"></i><em>返回顶部</em></a></li> <li><a href="#"><i class="icon iconfont"></i><em>上一文章</em></a></li> <li><a href="#"><i class="icon iconfont"></i><em>下一文章</em></a></li> <li><a target="_blank" href="#"><i class="icon iconfont"></i><em>官方客服</em></a></li> <li><a href="#" class="user" target="_blank"><i class="icon iconfont"></i><em>个人中心</em></a></li> </ul> </div>
- CSS代码:
.gotop { position: fixed; top: 50%; left: 50%; margin-left: 600px; margin-top: -125px; } .gotop li a { display: block; width: 30px; height: 30px; border-bottom: 1px solid #000; background-color: #333; color: #fff; line-height: 15px; padding: 10px; text-align: center; } .gotop li a.user { border: 0; } .gotop li a i { line-height: 30px; font-size: 20px; } .gotop li a em { display: none; } .gotop li a:hover { background-color: #3398cc; color: #fff; } .gotop li a:hover i { display: none; } .gotop li a:hover em { display: block; font-style: normal; }
上一篇:一个服务器可以搭建几个网站 下一篇:一个非常简单简洁的自适应导航栏