先上效果图:
这是一个纯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天兴工作室官网购物活动:全场8折优惠券 不限次数不限金额04-17
- 2天兴工作室zblog纯博客主题 vue3+小程序双版本03-19
- 3vue3项目引入vant报错的错误原因和解决办法03-12
- 4天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 5zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 6天兴工作室2023双11活动:五折优惠券大放送11-05
- 7腾讯云2023双11活动:2H2G3M轻量服务器88一年限新用户11-05
- 8新老同享 阿里云2023双11活动:2核2G3M带宽云服务器99元/年!10-31
- 9天兴工作室zblog免登录付费阅读插件 支持支付宝微信支付虎皮椒支付10-09
- 标签聚合
- ×1mysql×1压力×2淘宝客×1zblog文件夹×1cms×1zblog点赞×1百度搜索×1浏览器兼容×1最新留言×5双11×1域名审核×2友情链接×1男人×1在线QQ客服×1暗色系主题×3百度站内搜索×3国庆节×1GetCategoryList×1ckplayer解析×1纯css
最新评论
-
天兴工作室
03-21对的,下个版本会修复 -
访客
03-20此模版多张并排图片,不管点哪张图,都显示第一张,且没有轮播按钮,只能手动关闭。 系统:win7+火狐浏览器 -
天兴工作室
01-19没听懂 你是要批量创建分类?这是插件的事情主题不会考虑的 -
访客
01-18分类一个一个设置太麻烦了。能不能在主题设置里添加对分类的设置。 -
天兴工作室
01-16没太理解你的需求,麻烦联系我们的在线qq2076496616提供订单号详细说明下需求