<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> body { display: grid; grid-template-columns: 1fr 0px; font-family: system-ui, sans-serif; background: #eee; } .top { --offset: 100px; /* 控制按钮出现 */ position: sticky; bottom: 20px; margin-right: 10px; place-self: end; margin-top: calc(100vh + var(--offset)); width: 60px; aspect-ratio: 1; background: #ff8b24; border-radius: 10px; font-size: 0; } .top:before { content: ""; position: absolute; inset: 30%; transform: translateY(20%) rotate(-45deg); border-top: 5px solid #fff; border-right: 5px solid #fff; } h1 { font-size: 3rem; } p { font-size: 1.5rem; text-align:justify; } body > div { margin-inline: max(3px,50% - 800px/2); } html, body { scroll-behavior: smooth; /* 平滑滚动 */ } </style> </head> <body translate="no" > <div> <h1>卡卡网</h1> <h2 >卡卡网简介</h2> <p>卡卡网建立于2009年4月,是非盈利性网站,没有任何收费项目,所有广告收入全部用于支付服务器和网站的日常开销。本站旨在为广大网站建设人员提供专业的网站测速和优化服务,以及为广大网民提供网络速度测试服务。本站提供的在线测速服务是完全免费的,无须注册便可使用。</p> <p>卡卡网是国内站长和IDC商检测网络线路和网站测速的第三方工具之一,每天为超过1万的网站提供测速服务,专业、专心、专注,为卡卡网赢得了良好的口碑和业界的肯定。</p> <h2 >卡卡网简介</h2> <p>卡卡网建立于2009年4月,是非盈利性网站,没有任何收费项目,所有广告收入全部用于支付服务器和网站的日常开销。本站旨在为广大网站建设人员提供专业的网站测速和优化服务,以及为广大网民提供网络速度测试服务。本站提供的在线测速服务是完全免费的,无须注册便可使用。</p> <p>卡卡网是国内站长和IDC商检测网络线路和网站测速的第三方工具之一,每天为超过1万的网站提供测速服务,专业、专心、专注,为卡卡网赢得了良好的口碑和业界的肯定。</p> <h2 >卡卡网简介</h2> <p>卡卡网建立于2009年4月,是非盈利性网站,没有任何收费项目,所有广告收入全部用于支付服务器和网站的日常开销。本站旨在为广大网站建设人员提供专业的网站测速和优化服务,以及为广大网民提供网络速度测试服务。本站提供的在线测速服务是完全免费的,无须注册便可使用。</p> <p>卡卡网是国内站长和IDC商检测网络线路和网站测速的第三方工具之一,每天为超过1万的网站提供测速服务,专业、专心、专注,为卡卡网赢得了良好的口碑和业界的肯定。</p> <h2>卡卡网简介</h2> <p>卡卡网建立于2009年4月,是非盈利性网站,没有任何收费项目,所有广告收入全部用于支付服务器和网站的日常开销。本站旨在为广大网站建设人员提供专业的网站测速和优化服务,以及为广大网民提供网络速度测试服务。本站提供的在线测速服务是完全免费的,无须注册便可使用。</p> <p>卡卡网是国内站长和IDC商检测网络线路和网站测速的第三方工具之一,每天为超过1万的网站提供测速服务,专业、专心、专注,为卡卡网赢得了良好的口碑和业界的肯定。</p> </div> <a href="#" class="top">返回顶部</a> </body> </html> <!-- 文章来源:#纯CSS实现#网页返回顶部按钮设计 http://www.webkaka.com/tutorial/html/2022/0813287/ //-->
卡卡测速网
>
html技术
>
#纯CSS实现#网页返回顶部按钮设计【演示/源码】
添加收藏
下载源代码
|
运行结果
demo.html
运行代码
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX