纯css实现选项卡

纯css实现选项卡

效果如下：

其实用css实现选项卡是非常简单的

css中

.box{width: 302px;height: 302px;border-top: 1px solid gainsboro;text-align: center;margin: 0 auto;}
.box nav{width: 300px;height: 30px;border-bottom: 2px solid gainsboro;}
.box nav a{display: block;width: 100px;flex-shrink: 28px;line-height: 28px;float: left;}
.box .content{width: 300px;height: 270px;overflow: hidden;}
.box .content .cont{width: 300px;height: 270px;line-height: 270px;font-size: 40px;color: white;}
.box .content #one{background: #2E8B57;}
.box .content #two{background: #7CFC00;}
.box .content #three{background: #F4A460;}

body中

<div class="box">
	<nav>
		<a href="#one">按钮1</a>
		<a href="#two">按钮2</a>
		<a href="#three">按钮3</a>
	</nav>
	<div class="content">
		<div id="one" class="cont">内容1</div>
		<div id="two" class="cont">内容2</div>
		<div id="three" class="cont">内容3</div>
	</div>
</div>

就是这么的简单~