先上效果图:
这是一个纯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
- 标签聚合
- ×1友言×1商户私钥×1在线QQ客服×1修改模板×1文章标题×1科技×1openssl_pkey_get_public×1zblogphp调用分类×1定制主题×1zblog随机文章×1评论设置×1八折×1zblog后台版权×1售后服务×1压力×1zblog主题包×1zblog前端框架×1搜索引擎×1新增账号×1zblog语言设置
最新评论
-
天兴工作室
可以看下更新记录,上个月29日才更新的 -
访客
现在这个主题还更新吗 -
天兴工作室
打开编辑文字,选中代码语言,然后不管是回车断行还是复制粘贴,都不会被分为一行一框啊,所以没理解你是咋办到的 -
访客
zblog文章中发多行代码,被分成一行一个框,一行一个框,如何调整成和你的一样的一段代码在一个框中 -
天兴工作室
这个功能本来就有