一.a标签设置锚点
1、使用id定位:
<a href="#fifth">锚点跳到5F</a> <p style="height: 1300px"> 中间有很多内容 </p> <div id="fifth" style="height: 1300px"> 这里是5F的内容 </div>
这样的定位可以针对任何设置Id属性的标签来定位。
2、使用a标签的属性name定位:
<a href="#fifth">锚点跳到5F</a> <p style="height: 1300px"> 中间有很多内容 </p> <a name="fifth" > 这里是5F的内容 </a> <div style="height: 1300px"> 这里是6F的内容 </div>
使用name属性只能针对a标签来定位,而对其他标签就不能起到定位作用。
3注意:锚点也可以跳转到其他网页,在“#”前面写网页
<div> <a href="photo/maodian.html#fifth">锚点跳到5F</a> </div>
跳到相对路径about/index.html页面的fifth
常常用于返回头部,返回主页,
二应用: 图片切换
(1)先布局,每张图片都有左右两个锚点(a标签跳转)。点击左右小图片可以跳转到对应中心图片
(2)给父容器.wrap设合适的宽高,设置 overflow: hidden,使之实现——点击图片切换
(3)源代码
<ul class="wrap"> <li id="pic1"><img class="Picture" src="images/pic1.jpg" alt="图片1"/> <a href="#pic9" class="left"> <img src="images/pic9.jpg"/> </a> <a href="#pic2" class="right"> <img class="right" src="images/pic2.jpg"> </a> </li> <li id="pic2"><img class="Picture" src="images/pic2.jpg" alt="图片2"/> <a href="#pic1" class="left"> <img src="images/pic1.jpg"/> </a> <a href="#pic3" class="right"> <img class="right" src="images/pic3.jpg"> </a> </li> <li id="pic3"><img class="Picture" src="images/pic3.jpg" alt="图片3"/> <a href="#pic2" class="left"> <img class="right" src="images/pic2.jpg"> </a> <a href="#pic4" class="right"> <img class="right" src="images/pic4.jpg"> </a> </li> <li id="pic4"><img class="Picture" src="images/pic4.jpg" alt="图片4"/> <a href="#pic3" class="left"> <img class="right" src="images/pic3.jpg"> </a> <a href="#pic5" class="right"> <img class="right" src="images/pic5.jpg"> </a> </li> <li id="pic5"><img class="Picture" src="images/pic5.jpg" alt="图片5"/> <a href="#pic4" class="left"> <img class="right" src="images/pic4.jpg"> </a> <a href="#pic6" class="right"> <img class="right" src="images/pic6.jpg"> </a> </li> <li id="pic6"><img class="Picture" src="images/pic6.jpg" alt="图片6"/> <a href="#pic5" class="left"> <img class="right" src="images/pic5.jpg"> </a> <a href="#pic7" class="right"> <img class="right" src="images/pic7.jpg"> </a> </li> <li id="pic7"><img class="Picture" src="images/pic7.jpg" alt="图片7"/> <a href="#pic6" class="left"> <img class="right" src="images/pic6.jpg"> </a> <a href="#pic8" class="right"> <img class="right" src="images/pic8.jpg"> </a> </li> <li id="pic8"><img class="Picture" src="images/pic8.jpg" alt="图片8"/> <a href="#pic7" class="left"> <img class="right" src="images/pic7.jpg"> </a> <a href="#pic9" class="right"> <img class="right" src="images/pic9.jpg"> </a> </li> <li id="pic9"><img class="Picture" src="images/pic9.jpg" alt="图片9"/> <a href="#pic8" class="left"> <img src="images/pic8.jpg"/> </a> <a href="#pic1" class="right"> <img class="right" src="images/pic1.jpg"> </a> </li> </ul>
/* end reset css */ .wrap{ width: 900px; height: 700px; margin:0 auto; overflow: hidden; } .wrap li{ width:100%; height:100%; background-color: #cecece; } /* 给中心图片左右小锚点设置定位。当然也可以是其他方式,如浮动*/ .wrap li{ position: relative;} .wrap li .Picture, .wrap li a{ position: absolute; } .wrap li .Picture{ top: 50%; left: 50%; margin-left: -300px; margin-top: -230px; width:600px; height: 460px; } .wrap li a{ top: 40%; width:150px; height: 200px; } .wrap a.left{ left: 0; } .wrap a.right{ right: 0; } .wrap a img{ width: 100%; height: 100%;}
参考: http://www.jb51.net/web/170879.html
时间: 2024-10-03 23:53:37