当前第2页 返回上一页
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <style type= "text/css" >
*{margin: 0;padding: 0;}
.wrap{
margin: 20px auto;
width: 403px;
height: 600px;
border:1px solid brown;
position: relative;
}
label{
width: 100px;
height: 30px;
float: left;
text-align: center;
line-height:30px;
border-right: 1px solid brown;
border-bottom: 1px solid brown;
}
label:nth-of-type(4){
border-right: none;
}
label span{
cursor: pointer;
}
label div{
width: 403px;
height: 568px;
position: absolute;
left: 0;
top: 31px;
background: #eeeeee;
display: none;
}
label input{
width: 0;
}
input:checked+div{
display: block;
}
</style>
|
相关学习推荐:html视频教程
以上就是html如何实现tab页面切换的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
自学 Html5 要多久
Html怎么改变鼠标形状
详解Html实现在线预览word、excel、pdf等文件的功能(附代码)
Html的空格代码怎么写?教你如何使用空格nbsp代码
Html col标签怎么用
link标签是什么意思?
Html frame标签怎么用
Html px、em、pt长度单位
Html如何设置文本域大小
关于Html colgroup标签的用法你知道哪些?colgroup用法和col的详细介绍
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html如何实现tab页面切换