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>
时间： 2024-07-31 03:11:32