纯css制作tab选项卡（一）

最新推荐文章于 2023-10-03 15:35:56 发布

置顶 Eva-rascal

最新推荐文章于 2023-10-03 15:35:56 发布

阅读量1.1w

点赞数 8

分类专栏： css 前端开发整理文章标签： css css3

本文链接：https://blog.csdn.net/web_xiaolei/article/details/78206674

版权

css 同时被 2 个专栏收录

7 篇文章 2 订阅

订阅专栏

前端开发整理

7 篇文章 1 订阅

订阅专栏

css本身的功能就挺强大的，尤其是css3出来之后，大部分特效只用css3就能完成了，无需再费心思去想js怎么怎么做jQuery怎么怎么做，代码简洁质量轻巧。下面是用纯css制作的tab选项卡效果：

原始界面：

![第一张图片](https://img-blog.csdnimg.cn/img_convert/c22616846976e2d7eab083919f08ef95.png)

鼠标划上第一个tab选项，相应内容显示：

![第二张图片](https://img-blog.csdnimg.cn/img_convert/c671b308e95f92f1345901526aabdb8f.png)

鼠标划上第二个tab选项：相应内容显示

![第三张图片](https://img-blog.csdnimg.cn/img_convert/cddd2b21cff2496bfbdce32db0b3f0a6.png)

具体内容自己添加啦，下面献上完整代码：

<DOCTYPE html>
<html>
<head>
	<title>Tab选项卡</title>
	<meta charset="utf-8">
	<style type="text/css">
		body{
			font-size: 0;
		}
		.box{
			text-align: center;
		}
		.box .tab{
			display: inline-block;
			width: 120px;
			height: 44px;
			padding: 7px;
			border: 1px solid #ccc;
			border-bottom: 0px;
			box-sizing:border-box;
			background: #fff;
			font-size: 16px;
			line-height: 26px;
			color: #555;
			transition: all 0.5s linear;
		}
		.box .tab:hover{
			background: #eee;
			transition: all 0.5s linear;
		}
		.con{
			width: 800px;
			height: 400px;
			margin:0 auto;
		}
		.con .list{
			width: 800px;
			height: 400px;
			border: 1px solid #ccc;
			padding: 10px;
			position: absolute;/*堆一起*/
			z-index: 1;
			box-sizing:border-box;
		}
		.list img{
			height: 300px;
			width: auto;
			margin: 40px auto;
		}
		.box>.tab:nth-child(1):hover~.con>.list:nth-child(1),
		.box>.tab:nth-child(2):hover~.con>.list:nth-child(2),
		.box>.tab:nth-child(3):hover~.con>.list:nth-child(3),
		.box>.tab:nth-child(4):hover~.con>.list:nth-child(4),
		.list:hover{
			z-index: 3;
		}
	</style>
</head>
<body>
	<div class="box">
		<a class="tab">哇咔咔</a>
		<a class="tab">太棒了</a>
		<a class="tab">纳尼</a>
		<a class="tab">不要听</a>
		<div class="con">
			<div class="list"><img src="img/a.jpg"></div>
			<div class="list"><img src="img/c.jpg"></div>
			<div class="list"><img src="img/f.jpg"></div>
			<div class="list"><img src="img/h.jpg"></div>
		</div>
	</div>
</body>
</html>

Eva-rascal

关注

8
点赞
踩
26

收藏

觉得还不错? 一键收藏
4
评论
纯css制作tab选项卡（一）

css本身的功能就挺强大的，尤其是css3出来之后，大部分特效只用css3就能完成了，无需再费心思去想js怎么怎么做jQuery怎么怎么做，代码简洁质量轻巧。下面是用纯css制作的tab选项卡效果：原始界面：鼠标划上第一个tab选项，相应内容显示：鼠标划上第二个tab选项：相应内容显示具体内容自己添加啦，下面献上完整代码：<DOCTYPE html><html><head> <title
复制链接

扫一扫