您现在的位置是:网站首页>列表内容
解决移动端跳转问题(CSS过渡、target伪类)_HTML/Xhtml_网页制作_
2023-11-14 06:14:19 119人已围观
简介 这篇文章主要介绍了解决移动端跳转问题(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月15日停服维护介绍_维护后登陆游戏后可自动领取奖励_手机游戏_游戏攻略_
- 剑魂之刃VIP等级特权与充值金额详细介绍_手机游戏_游戏攻略_
- 暖暖环游世界冰雪女王图纸制作材料有哪些_冰雪女王图纸制作材料详解_手机游戏_游戏攻略_
- 海岛奇兵10月15日恐怖博士岛1-20阶段打法及视频攻略_手机游戏_游戏攻略_
- 七雄争霸手游贵族特权功能详解_手机游戏_游戏攻略_
- 雷霆战机恶魔之影如何通关_雷霆战机恶魔之影通关攻略_手机游戏_游戏攻略_
- 全民小镇求打赏活动如何领取奖励及求打赏奖励领取地址_手机游戏_游戏攻略_
本栏推荐
-
全民小镇微信签到有礼活动奖励怎么领取_微信签到有礼活动详情_手机游戏_游戏攻略_
-
全民小镇月卡怎么购买好_全民小镇月卡奖励内容介绍_手机游戏_游戏攻略_
-
主公莫慌10月15日停服维护介绍_维护后登陆游戏后可自动领取奖励_手机游戏_游戏攻略_
-
剑魂之刃VIP等级特权与充值金额详细介绍_手机游戏_游戏攻略_
-
暖暖环游世界冰雪女王图纸制作材料有哪些_冰雪女王图纸制作材料详解_手机游戏_游戏攻略_
-
海岛奇兵10月15日恐怖博士岛1-20阶段打法及视频攻略_手机游戏_游戏攻略_
-
七雄争霸手游贵族特权功能详解_手机游戏_游戏攻略_
-
雷霆战机恶魔之影如何通关_雷霆战机恶魔之影通关攻略_手机游戏_游戏攻略_
-
全民小镇求打赏活动如何领取奖励及求打赏奖励领取地址_手机游戏_游戏攻略_