依次点击，img01-04，下面的图片也跟随者变化，应用到的知识点：锚点，显示隐藏visibility：hidden和:target
<!DOCTYPE html>
<html>
<head>
<title> ... </title>
<meta charset="utf-8"/>
<meta name="HSW" content="">
<meta name="Keywords" content="">
<style>
div.d1 a {
display:inline-block;
width:60px;
border:1px solid #0ff;
background-color:#ccc;
margin-bottom:20px;
margin-right:5px;
}
div.d2 {
width:450px;
height:450px;
padding:20px;
border:1px solid #ddd;
}
img {
position:fixed;
visibility:hidden;
}
div.d2 img:target {
visibility:visible;
}
</style>
</head>
<body>
<div class="d1">
<a href="#img01">img01</a><a href="#img02">img02</a><a href="#img03">img03</a><a href="#img04">img04</a>
</div>
<div class="d2">
<img id="img01" src="Images/p001.jpg"/></a>
<img id="img02" src="Images/p002.jpg"/></a>
<img id="img03" src="Images/p003.jpg"/></a>
<img id="img04" src="Images/p004.jpg"/></a>
</div>
</body>
</html>
437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
