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

来源:互联网 发布:企业网络概述 编辑:程序博客网 时间:2024/06/04 08:04

点击按钮出现各图片:


<!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>


0 0
原创粉丝点击