天兴工作室:提供zblog模板 emlog模板 dedecms模板的下载和仿站定制 | RSS订阅 | 网站地图 | 联系我们
天兴工作室自用主题2015版上架销售
当前位置:网站首页 教程 正文

一个纯css写的返回顶部按钮组

天兴工作室 2个月前 (07-17) 教程 299 ℃ 0 评论
内容加载中......

先上效果图:

111.png

这是一个纯css写的返回顶部按钮组,来详细介绍下写法。

先上html代码,ps:此代码示例用到了字体图标显示图标(具体用法参考:http://www.txcstx.cn/post/765.html):

<div class="gotop">    
    <ul>        
        <li><a id="goTopBtn" href="#"><i class="icon iconfont">&#xe60b;</i><em>返回顶部</em></a></li>
        <li><a href="#" ><i class="icon iconfont">&#xe605;</i><em>上一文章</em></a></li>        
        <li><a href="#"><i class="icon iconfont">&#xe622;</i><em>下一文章</em></a></li>
        <li><a target="_blank" href="#"><i class="icon iconfont">&#xe600;</i><em>官方客服</em></a></li>        
        <li><a href="#" class="user" target="_blank"><i class="icon iconfont">&#xe60e;</i><em>个人中心</em></a></li>
     </ul>
 </div>

然后上css代码:

.gotop{
    position: fixed;/* 固定 */
    top:50%;/* 离左边50% */
    left: 50%;/* 离顶部50% */
    margin-left: 600px;/*计算页面的实际宽度除以2做一个负左边距 */
    margin-top: -125px;/* 计算按钮组的实际高度除以2做一个负上边距*/
}
.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;}

css主要是注释里面写的做了固定和边距,其他颜色什么的可以根据自己需求调整。

我要提问 如果你对于此文还有任何疑问欢迎在文章下面的评论区域留言,如果你的疑问比较多,欢迎在本站的在线提问专业去发布问题,点击右侧的我要提问即可到达。天兴工作室将尽我所能为你解答问题。

本文标签回到顶部 html css

本文地址http://www.txcstx.cn/post/993.html

版权说明:如非注明,本站文章均为 天兴工作室 原创,转载请注明出处和附带本文链接。

额!本文竟然没有沙发!你愿意来坐坐吗?

欢迎 发表评论

必填

选填

选填

必填

◎欢迎在这里交流反馈,垃圾评论会秒删的额...

联系我们
最新评论
标签云
单宽带注册会员在线问答华为U8800二维码A5当前页网址文档一号通天翼武汉通同栏目文章武汉短信包主机服务商资费调整标题删除版权漂浮广告zblog文章数博客主题营业网点setupconnection精简布局qq互联校园基地流量王公众WLAN仿聚划算提交工单全球通G3升级版人造韩寒2012新积分天翼3G恶意软件zblogphp栏目文章悲催
热门模板