標籤：符號 top 映射 http ext har abs group photo
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>
【css】影像地圖
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
