纯css实现选项卡

最新推荐文章于 2023-11-08 13:31:30 发布

原创最新推荐文章于 2023-11-08 13:31:30 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #html5

前端 css+html 专栏收录该内容

5 篇文章

订阅专栏

部署运行你感兴趣的模型镜像

纯css实现一个选项卡

先看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示文档</title>
    <style>
		body{
			padding: 100px;
		}
       *{
		   margin: 0;
		   padding: 0;
	   }
	   .clear{
		   clear: both;
	   }
	   ul{
		   list-style-type: none;
	   }
	   a{
			float: left;
			border: 1px solid orange;
			background-color: pink;
			width: 100px;
			text-decoration: none;
			box-sizing: border-box;
	   }
	   a:hover{
		   background-color: red;
	   }
	   .content {
		   width: 300px;
		   height: 300px;
		   background-color: deeppink;
		   overflow: hidden;
	   }
	   .content div{
		   width: 100%;
		   height: 100%;
	   }
    </style>
</style>
</head>
<body>
    <div class="tab">
		<ul>
			<li><a href="#con1">菜单一</a></li>
			<li><a href="#con2">菜单二</a></li>
			<li><a href="#con3">菜单三</a></li>
		</ul>
	</div>
	<div class="content clear">
		<div id="con1">选项卡1......</div>
		<div id="con2">选项卡2......</div>
		<div id="con3">选项卡3......</div>
	</div>
</body>
</html>

在这里插入图片描述