1 <!DOCTYPE html > 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 #pic{ 8 width:640px; 9 height:425px; 10 position:relative;/**关键点，这样可以让包含的链接相对于div的边缘进行绝对定位*/} 11 #pic ul{ 12 margin:0; 13 padding:0; 14 list-style:none;/**不显示列表符号，将列表的margin和padding设为0*/ 15 } 16 #pic a { 17 position:absolute; 18 width:100px; 19 height:120px; 20 text-indent:-1000em;/**对锚链接进行绝对定位，他们将移到容器div左上角。然后可以将他们定位到正确的人身上，形成热点，设置宽和高创建需要点击的区域链接文本仍然存在，使用一个大的负数作为文本缩进从而让他们从屏幕上消失。*/} 21 #pic .rich a{ 22 top:15px; 23 left:95px; 24 } 25 #pic .andy a{ 26 top:115px; 27 left:280px;} 28 #pic .jeremy a{ 29 top:250px; 30 left:425px;} 31 #pic a:hover{/**创建翻转效果，鼠标停留的时候实线*/ 32 border:1px solid #fff;} 33 </style> 34 </head> 35 36 <body> 37 <div id="pic"> 38 <img src="../CSSMastery/Chapter05/images/group-photo.jpg" width="640" height="425" alt="Richard , Andy and Jeremy"/> 39 40 <ul> 41 <li class="rich"> 42 <a href="http://www.clagnut.com/" title="Richard Rutter">Richard Rutter</a> 43 </li> 44 <li class="andy"> 45 <a href="http://www.andybudd.com/" title="Andy Budd">Andy Budd</a> 46 </li> 47 <li class="jeremy"> 48 <a href="http://www.adactio.com/" title="Jeremy Keith">Jeremy Keith</a> 49 </li> 50 </ul> 51 </div> 52 </body> 53 </html>