用css实现选项卡

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            a{
                text-decoration: none;
                color: deeppink;
            }
            div{
                width: 200px;
                height: 200px;
                background: pink;
                display: none;
                text-align: center;
                font: 50px/200px "微软雅黑";
            }
            :target{
                display: block;
            }
        </style>
    </head>
    <body>
        <a href="#div1">div1</a>
        <a href="#div2">div2</a>
        <a href="#div3">div3</a>
        <div id="div1">
            div1
        </div>
        <div id="div2">
            div2
        </div>
        <div id="div3">
            div3
        </div>
    </body>
</html>

 

posted @ 2020-02-26 20:42  栗子壳  阅读(1441)  评论(0)  编辑  收藏  举报