一.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%;}
三、應用-圖片切換2
（1）先布局：左右兩欄。點擊右側錨點跳轉到對應圖片位置
（2）給左側的父容器設合適的寬高，設置 overflow: hidden，使之實現點擊圖片切換
（3）源代碼
<div class="wrap">
<ul class="main">
<li id="pic1"><img class="Picture" src="images/pic1.jpg" alt="圖片2"/></li>
<li id="pic2"><img class="Picture" src="images/pic2.jpg" alt="圖片2"/></li>
<li id="pic3"><img class="Picture" src="images/pic3.jpg" alt="圖片2"/></li>
<li id="pic4"><img class="Picture" src="images/pic4.jpg" alt="圖片2"/></li>
<li id="pic5"><img class="Picture" src="images/pic5.jpg" alt="圖片2"/></li>
<li id="pic6"><img class="Picture" src="images/pic6.jpg" alt="圖片2"/></li>
<li id="pic7"><img class="Picture" src="images/pic7.jpg" alt="圖片2"/></li>
<li id="pic8"><img class="Picture" src="images/pic8.jpg" alt="圖片2"/></li>
<li id="pic9"><img class="Picture" src="images/pic9.jpg" alt="圖片2"/></li>
</ul>
<div class="aside">
<a href="#pic1"><img class="Picture" src="images/pic1.jpg" alt="圖片2"/></a>
<a href="#pic2"><img class="Picture" src="images/pic2.jpg" alt="圖片2"/></a>
<a href="#pic3"><img class="Picture" src="images/pic3.jpg" alt="圖片2"/></a>
<a href="#pic4"><img class="Picture" src="images/pic4.jpg" alt="圖片2"/></a>
<a href="#pic5"><img class="Picture" src="images/pic5.jpg" alt="圖片2"/></a>
<a href="#pic6"><img class="Picture" src="images/pic6.jpg" alt="圖片2"/></a>
<a href="#pic7"><img class="Picture" src="images/pic7.jpg" alt="圖片2"/></a>
<a href="#pic8"><img class="Picture" src="images/pic8.jpg" alt="圖片2"/></a>
</div>
</div>
/* end reset css */
/* start common css*/
.wrap{
width: 900px;
height: 660px;
margin:0 auto;
}
.main{
float: left;
width: 600px;
height: 560px;
}
.main li img{
margin:100px auto;
width: 480px;
height: 360px;}
.aside{
float: right;
width: 300px;
height: 660px;
}
.aside a{
}
.aside a img{
margin-bottom: 20px;
width: 100px;
height: 100px; }