纯CSS实现tab标签效果
作者：admin
分类：前端笔记
字数：1858
阅读：1191
纯CSS实现tab<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纯CSS实现tab标签效果</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{text-align: center;}
#box1{background: #E9322D;}
#box2{background: #0078E7;}
#box3{background: #264409;}
#box4{background: #ff6600;}
.box{width: 500px;height: 500px;color: #fff; }
.tab-con{width: 500px;height: 500px;overflow: hidden; margin: 0 auto;}
.link-a{background: #E9E9E6;padding:2px 8px;color: #000000; text-decoration: none;margin:0 15px;}
.link{ margin-top: 10px; }
.link-a:hover{ background: #202328;color:#fff;}
</style>
</head>
<body>
<div class="tab-con">
<div class="box" id="box1">交通运输部办公厅关于征求《港口、修造船厂和船舶污染物接收转运及处置设施建设方案编制指南》（征求意见稿）意见的函</div>
<div class="box" id="box2">为落实《关于深化改革推进出租汽车行业健康发展的指导意见》和《网络预约出租汽车经营服务管理暂行办法》</div>
<div class="box" id="box3">根据《宁波/视觉中国》报道，2016年7月8日凌晨3点左右，在浙江省宁波市镇海口，一辆浙B牌号的白色奥迪A4，</div>
<div class="box" id="box4">大客车事故频频发生，是不是客车载货惹得祸？</div>
</div>
<div class="link">
<a class="link-a" href="#box1">1</a>
<a class="link-a" href="#box2">2</a>
<a class="link-a" href="#box3">3</a>
<a class="link-a" href="#box4">4</a>
</div>
</body>
</html>
纯CSS实现tab