解决移动端跳转问题(CSS过渡、target伪类)_HTML/Xhtml

上一篇: 浅谈HTML中src和href之间的区别下一篇:详解HTML常用的标签中行内元素和...

解决移动端跳转问题(CSS过渡、target伪类)

发布时间：2022-04-12 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了解决移动端跳转问题(CSS过渡、target伪类)，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

前言

很多刚刚接触移动端的小伙伴都可能对于点击跳转路由这方面有些疑惑，特别是运用了Vue路由，因此这篇文章就带领小伙伴一起尝试用css进行页面跳转

效果如图，由于是移动端，所以选择预览的手机模拟：

HTML

    <body>
        <;main>
            <div id="shouye">shouye</div>
            <div id="zhanlan">zhanlan</div>
            <div id="geren">geren</div>
        </main>
        <nav>
            <a href="#shouye" class="alink">shouye</a>
            <a href="#zhanlan" class="alink">zhanlan</a>
            <a href="#geren" class="alink">geren</a>
        </nav>
    </body>

主要分为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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本宝典。

脚本宝典总结

以上是脚本宝典为你收集整理的解决移动端跳转问题(CSS过渡、target伪类)全部内容，希望文章能够帮你解决解决移动端跳转问题(CSS过渡、target伪类)所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：

上一篇: 浅谈HTML中src和href之间的区别下一篇:详解HTML常用的标签中行内元素和...

猜你在找的HTML/Xhtml相关文章

了解HTTP Headers的方方面面图文说明 2022-04-12
Html分层的box-shadow效果的示例代码 2022-04-12
html+css实现血轮眼轮回眼特效代码 2022-04-12
html实现随机点名器的示例代码 2022-04-12
HTML中table表格拆分合并(colspan、rowspan) 2022-04-12
HTML页面滚动时部分内容位置固定不滚动的实现 2022-04-12
HTML+css盒子模型案例(圆，半圆等)“border-radius” 简单易上手 2022-04-12
HTML通过表单实现酒店筛选功能 2022-04-12
HTML中的表单Form实现居中效果 2022-04-12
HTML+CSS制作心跳特效的实现 2022-04-12