css用target实现选择卡 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            a{
                text-decoration: none;
                color: pink;
            }
            div{
                width: 200px;
                height: 200px;
                background-color: deeppink;
                display: none;
                text-align: center;
                font: 30px/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>

点击div几，图片上就会出现几

 

 

posted @ 2019-11-18 16:24  大轩  阅读(224)  评论(0)    收藏  举报