先上效果图:
这是一个纯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天兴工作室2025年春节放假公告01-25
- 2天兴用户中心插件“微信通知”功能设置教程11-09
- 3阿里云2024双11活动推荐 通过本站链接参与另外赠送本站代金券11-05
- 4天兴工作室官网购物活动:全场8折优惠券 不限次数不限金额04-17
- 5天兴工作室zblog纯博客主题 vue3+小程序双版本03-19
- 6vue3项目引入vant报错的错误原因和解决办法03-12
- 7天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 8zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 9天兴工作室2023双11活动:五折优惠券大放送11-05
- 标签聚合
- ×1app模板×1安装wordpress×1简洁企业模板×1html5模板×1你的用户名不存在×1内容页×1zblog语言×1linux服务器×1zblog模板安装×1绿色模板×1wpimport×1idc×1zblog个人模板×1zblog安装模板×1tab×1管理员×1上传附件×1节假日安排×1本地安装zblog×1网站公告
最新评论
-
天兴工作室
并没有任何限制 -
访客
请问 zblog淘客主题 对使用者的要求是必须是企业吧? -
阿浩
大佬们,丢几个除了作者以外的演示站,我想看看大家的布局设置 -
有趣生活
一直想开发zblog的功能,zblog的敷在不知道够够不够 -
访客
发布文章时候,那怎么改默认状态呢比如改成默认审核状态?