订阅博客
收藏博客
微博分享
QQ空间分享

html css 用overflow和锚点的方式实现一个选项卡

频道:前端 标签: 时间:2019年07月13日 浏览:75次 评论:0条
作者: 三只松果

image.png


特点总结:
1:display:none 元素隐藏不占位置

2:overflow:hidden; 将超出部分的元素隐藏 

3:visibility:hidden; 元素隐藏占位置


代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
.container,.div1,.div2,.div3{
height: 100px;
width: 200px;
}
.container{
overflow:hidden;
}
.div1{
background-color: #00FFFF;
}
.div2{
background-color: #1E90FF;
}
.div3{
background-color: #808080;
}
.a1{
background: url(../作业4/images/a_bg.jpg);
display: inline-block;
width: 66px;
text-align: center;
text-decoration: none;
margin-bottom: 1px;
margin-right: -3px;
}
.a1:hover{
background: url(../作业4/images/button2.jpg);
}
</style>
</head>
<body>
<a  href="#div1">div1</a>
<a  href="#div2">div2</a>
<a  href="#div3">div3</a>
<div>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</div>
</body>
</html>


效果展示:

    image.png

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。