先上效果图:
这是一个纯css写的返回顶部按钮组,来详细介绍下写法。
先上html代码,ps:此代码示例用到了字体图标显示图标(具体用法参考:https://www.txcstx.cn/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主题的暗黑模式是什么?怎么设置和使用暗黑模式?01-19
- 2zblog判断插件是否安装或者启用的代码介绍01-16
- 3translate3d和z-index冲突导致z-inde值无效的解决办法01-10
- 4zblogphp提示“ Call to undefined function openssl_pkey_get_public()”的原因和解决办法12-25
- 5zblogphp1.6版本报错“非法访问”的原因和解决办法12-23
- 6wordpress导航栏自定义添加class和rel="nofollow"的步骤12-13
- 7swiper做导航栏时自动跳转至对应分类的代码12-07
- 8zblogphp自带js框架评论接口大全12-04
- 9wordpress提示"Error establishing a database connection"的解决办法11-10
- 标签聚合
- ×1A60刷机×1zblog点赞×1zblog字体大小×1WLAN预付费卡×1百度搜索代码×1移动2012新年活动×1团购活动×1后台配色×1博客样式×1dedecms字段调用×1右侧固定×1zblog网站×1插入视频×1zblogphp面包屑×1天赐良机×1zblogphp用户×1zblogasp转换zblogphp×0公务员×1表单插件×1手机支付红包
最新评论
-
中加达移民
个人买过这个网站的主题,可以付责任的说,主题很好好用。另外我不是托! -
吸料机
已经解决 -
xinling2020.com
我今天在路上还在想我的个人博客要是写到1W文章数量会不会崩,看到这几十万我就放心了。这辈子也不可能有这样的数据~!哈哈 -
访客
不知道百度**收录怎么样 -
天兴工作室
这玩意你看下php手册啊https://www.php.net/manual/zh/function.date.php,m就是星期几