纯CSS实现tab标签效果

纯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>
来都来了,留个言吧🙂