CSS3练习之通用兄弟选择器、伪元素选择器

向右看齐 2022-07-11 01:43 489阅读 0赞

20170115174553325

点击按钮出现各图片：

20170115174631935

<!doctype html>
<html>
        <head>
            <title>Demo</title>
            <meta charset="utf-8">
            <style>
                .clear:after{
                    content:"";
                    display:block;
                    clear:both;
                } 
                #dl a{
                    width:100px;
                    height:20px;
                    border:1px solid #000;
                    background-color:#CACAC9;
                    float:left;
                    margin:10px;
                }
                #d2{
                    width:600px;
                    height:600px;
                    border:1px solid #ddd;
                    margin-left:10px;
                }
                #d2 img{
                    display:none;
                }
                #d2 #img01:target,#d2 #img02:target,#d2 #img03:target,#d2 #img04:target{
                    display:block;
                    margin:125px  auto;
                }
            </style>
        </head>
        <body>
            <div id="dl" class="clear">
                <a href="#img01">img1</a>
                <a href="#img02">img2</a>
                <a href="#img03">img3</a>
                <a href="#img04">img4</a>
            </div>
            <div id="d2">
                <img src="images/p001.jpg" id="img01">
                <img src="images/p002.jpg" id="img02">
                <img src="images/p003.jpg" id="img03">
                <img src="images/p004.jpg" id="img04">
            </div>
        </body>
</html>