您现在的位置是:网站首页>列表内容
解决移动端跳转问题(CSS过渡、target伪类)_HTML/Xhtml_网页制作_
2023-11-14 06:14:19 132人已围观
简介 这篇文章主要介绍了解决移动端跳转问题(CSS过渡、target伪类),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
前言
很多刚刚接触移动端的小伙伴都可能对于点击跳转路由这方面有些疑惑,特别是运用了Vue路由,因此这篇文章就带领小伙伴一起尝试用css进行页面跳转
效果如图,由于是移动端,所以选择预览的手机模拟:
HTML
shouyezhanlangeren
主要分为main和nav两部分,其中main中包含的三个div表示三个不同的页面,同时对应的nav中三个不同的a,特别需要注意a标签中的href对应main中包含的三个div的id。
CSS
*{ padding: 0; margin: 0; } body{ height: 100vh; width: 100vw; display: flex; flex-direction: column; position: relative; } body::after{/*默认的背景*/ content: "this is my text"; font-size:4em; position: absolute; left: 50%; top: 50%; opacity: .8; transform: translate(-50%,-50%); } main{ width: 100%; flex: 1; position: relative; } nav{ background-color: #2C3E50; height: 8vh; display: flex; justify-content: space-between; align-items: center; } nav .alink{ flex: 1; color: #C3BED4; text-align: center; font-size: 2.5em; text-decoration: none; text-transform: uppercase; opacity: .8; } nav .alink:nth-child(2){ border-left: solid 1px #E9E9E9; border-right: solid 1px #E9E9E9; } main>div{ position: absolute; width: 100%; height: 100%; font-size: 5em; transform: translateY(-100%); transition-duration: 1s; } main>div:target{/*:target伪类即设置了a链接后点击的div*/ transform: translateY(0); z-index: 2; } main>div:nth-child(1):target{ background-color: #008000; } main>div:nth-child(2):target{ background-color: #495A80; } main>div:nth-child(3):target{ background-color: #FFFF00; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
点击排行
- 天天酷跑10.17-19日登录游戏送金币及积分活动详解_手机游戏_游戏攻略_
- 影之刃彩券怎么得 影之刃彩券获得和使用方法详解_手机游戏_游戏攻略_
- 宠物小精灵小R实用阵容搭配介绍_手机游戏_游戏攻略_
- 主公莫慌新武将是什么 新武将孙策徐晃详细介绍_手机游戏_游戏攻略_
- 锁链战记法师特训任务内容及奖励介绍_手机游戏_游戏攻略_
- 全民小镇求打赏获得iphone6 plus 全民小镇求打赏理由填写方法_手机游戏_游戏攻略_
- 太极熊猫翅膀的获得方法及介绍_手机游戏_游戏攻略_
- 全民小镇开启码头的方法 全民小镇开启第一个码头任务技巧_手机游戏_游戏攻略_
- 天天飞车龙卷风和冲击波哪个好 龙卷风和冲击波属性对比分析_手机游戏_游戏攻略_
本栏推荐
-
天天酷跑10.17-19日登录游戏送金币及积分活动详解_手机游戏_游戏攻略_
-
影之刃彩券怎么得 影之刃彩券获得和使用方法详解_手机游戏_游戏攻略_
-
宠物小精灵小R实用阵容搭配介绍_手机游戏_游戏攻略_
-
主公莫慌新武将是什么 新武将孙策徐晃详细介绍_手机游戏_游戏攻略_
-
锁链战记法师特训任务内容及奖励介绍_手机游戏_游戏攻略_
-
全民小镇求打赏获得iphone6 plus 全民小镇求打赏理由填写方法_手机游戏_游戏攻略_
-
太极熊猫翅膀的获得方法及介绍_手机游戏_游戏攻略_
-
全民小镇开启码头的方法 全民小镇开启第一个码头任务技巧_手机游戏_游戏攻略_
-
天天飞车龙卷风和冲击波哪个好 龙卷风和冲击波属性对比分析_手机游戏_游戏攻略_