CSS-简单的css锚点
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>简单的CSS锚点</title> 7 <style> 8 ul,li{ 9 padding:0; 10 margin:0; 11 width:300px; 12 height:200px; 13 margin:0 auto; 14 list-style-type:none; 15 overflow: hidden; 16 } 17 .nav{ 18 text-align:center; 19 margin-top:20px; 20 opacity: 0.6; 21 } 22 </style> 23 </head> 24 <body> 25 <ul> 26 <li><a name="p1"><img src="img/1.jpg" alt="pic1"></a></li> 27 <li><a name="p2"><img src="img/2.jpg" alt="pic2"></a></li> 28 <li><a name="p3"><img src="img/3.jpg" alt="pic3"></a></li> 29 </ul> 30 <div class="nav"> 31 <a href="#p1"><img src="img/1s.jpg" ></a> 32 <a href="#p2"><img src="img/2s.jpg" ></a> 33 <a href="#p3"><img src="img/3s.jpg" ></a> 34 </div> 35 </body> 36 </html>
img
效果图
