您现在的位置是:网站首页>列表内容
解决移动端跳转问题(CSS过渡、target伪类)_HTML/Xhtml_网页制作_
2023-11-14 06:14:19 145人已围观
简介 这篇文章主要介绍了解决移动端跳转问题(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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
点击排行
- 我叫MT橙卡奶骑大大姐助你轻松过英雄计算者视频分享_手机游戏_游戏攻略_
- 百分比减伤 我叫MT戒律牧过英雄计算者攻略分享_手机游戏_游戏攻略_
- 我叫MT4.2版无大大姐DOT流PVP队伍阵容搭配心得_手机游戏_游戏攻略_
- 天天酷跑小帅的进阶之路介绍_钻石就是这样来的_手机游戏_游戏攻略_
- 天天酷跑小小魔女火爆来袭_超高技能让你尖叫_手机游戏_游戏攻略_
- 天天酷跑永久获得白金小帅和舞狮闹闹攻略心得_手机游戏_游戏攻略_
- 天天飞车单局跳跃五十辆车的玩法技巧攻略_手机游戏_游戏攻略_
- 全民飞机大战剧情模式第60关和第63关BOSS公牛撞打法技巧分享_手机游戏_游戏攻略_
- 暖暖环游世界黄金雨搭配技巧 暖暖黄金雨无套装S过关搭配介绍_手机游戏_游戏攻略_
本栏推荐
-
我叫MT橙卡奶骑大大姐助你轻松过英雄计算者视频分享_手机游戏_游戏攻略_
-
百分比减伤 我叫MT戒律牧过英雄计算者攻略分享_手机游戏_游戏攻略_
-
我叫MT4.2版无大大姐DOT流PVP队伍阵容搭配心得_手机游戏_游戏攻略_
-
天天酷跑小帅的进阶之路介绍_钻石就是这样来的_手机游戏_游戏攻略_
-
天天酷跑小小魔女火爆来袭_超高技能让你尖叫_手机游戏_游戏攻略_
-
天天酷跑永久获得白金小帅和舞狮闹闹攻略心得_手机游戏_游戏攻略_
-
天天飞车单局跳跃五十辆车的玩法技巧攻略_手机游戏_游戏攻略_
-
全民飞机大战剧情模式第60关和第63关BOSS公牛撞打法技巧分享_手机游戏_游戏攻略_
-
暖暖环游世界黄金雨搭配技巧 暖暖黄金雨无套装S过关搭配介绍_手机游戏_游戏攻略_