先上效果图:
这是一个纯css写的返回顶部按钮组,来详细介绍下写法。
先上html代码,ps:此代码示例用到了字体图标显示图标(具体用法参考:https://www.txcstx.com/post/765.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%;/* 离左边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代码的写法01-05
- zblog用css定义缩略图大小不变形的方法05-16
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 1天兴工作室zblog纯博客主题 vue3+小程序双版本03-19
- 2vue3项目引入vant报错的错误原因和解决办法03-12
- 3天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 4zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 5天兴工作室2023双11活动:五折优惠券大放送11-05
- 6腾讯云2023双11活动:2H2G3M轻量服务器88一年限新用户11-05
- 7新老同享 阿里云2023双11活动:2核2G3M带宽云服务器99元/年!10-31
- 8天兴工作室zblog免登录付费阅读插件 支持支付宝微信支付虎皮椒支付10-09
- 9[已下线] 天兴工作室2023双节活动:五折优惠券09-29
- 标签聚合
- ×1网站公告×1懒加载×1带链接×1缩略图变形×1广告位大全×1卖模板×1调用数量×1当前页面标题×1安全组配置×1zblogasp免费主题×1促销活动×1movetype×1十一×1发送邮件服务器×1图片加alt×1zblogphp图片站×1txt文本×1swiper幻灯片×1zblog置顶×1快速翻页
最新评论
-
天兴工作室
03-21对的,下个版本会修复 -
访客
03-20此模版多张并排图片,不管点哪张图,都显示第一张,且没有轮播按钮,只能手动关闭。 系统:win7+火狐浏览器 -
天兴工作室
01-19没听懂 你是要批量创建分类?这是插件的事情主题不会考虑的 -
访客
01-18分类一个一个设置太麻烦了。能不能在主题设置里添加对分类的设置。 -
天兴工作室
01-16没太理解你的需求,麻烦联系我们的在线qq2076496616提供订单号详细说明下需求