地弹窗（แผนที่ป๊อป）具体演示
<!DOCTYPE
html สาธารณะ "-//W3C//DTD XHTML 1.0 เฉพาะกาล//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<หัว>
<meta http-equiv="ประเภทเนื้อหา" content="text/html; charset=utf-8"
-
<title>CSS实例讲解：地讲示（map pop）档</title>
<style type="text/css" media="all">
* { ระยะขอบ:0; ช่องว่างภายใน:0;
-
img { เส้นขอบ: 0;
-
#show { การจัดตำแหน่งข้อความ: ซ้าย;
-
ul { รายการสไตล์ประเภท: ไม่มี; พื้นหลัง: โปร่งใส
url( ) ไม่ทำซ้ำ -130px
0px;
-
ul li a#map01:hover span.offset, ul li a#map01:focus span.offset, ul li
a#map01:active span.offset { ขอบด้านบน:-1px; ขอบซ้าย:230px;
-
ul li a#map02 { ความกว้าง:110px; ความสูง:75px; ขอบบน:-50px;
ขอบซ้าย:235px;
-
ul li a#map02:hover, ul li a#map02:focus, ul li a#map02:active {
พื้นหลัง:โปร่งใส
url( ) ไม่ซ้ำ -115px
-88px;
-
ul li a#map03:hover span.offset, ul li a#map03:focus span.offset,ul li
a#map03:active span.offset { ขอบด้านบน:-89px; ขอบซ้าย:245px;
-
ul li a#map04 { ความกว้าง:110px; ความสูง:120px; ขอบบน:-60px;
ขอบซ้าย:5px;
-
ul li a#map04:hover, ul li a#map04:focus, ul li a#map04:active {
พื้นหลัง:โปร่งใส
url( ) ไม่ทำซ้ำ -240px
-153px;
-
ul li a#map05:hover span.offset, ul li a#map05:focus span.offset, ul li
a#map05:active span.offset { ขอบด้านบน:-154px; ขอบซ้าย:120px;
-
</สไตล์>
</หัว>
<ร่างกาย> <ul> <li><a id="map01"
href="#map01"><span class="offset"><img
src=" /><span>นี่คือชุมชน Popsville <strong>โพสต์
ออฟฟิศ</strong> บ้านของคุณสำหรับส่งไปรษณีย์ราคาแพงเกินไป คลิกแผนที่เพื่อ
เพิ่มเติม</span></span></a></li> <li><a
id="map02" href="#map02"><span class="offset"><img
src=" /><span>บ้านคือที่ที่มีเบียร์ และนั่นหมายถึง
<strong>ดิวดรอปอินน์</strong> ดนตรีสดในช่วงสุดสัปดาห์
คลิกแผนที่เพื่อดูข้อมูลเพิ่มเติม</span></span></a></li>
<li><a id="map03" href="#map03"><span
ชั้น = "ชดเชย" <img
src=" /><span>ใช้เวลายามบ่ายในฤดูร้อนที่ความสวยงาม
<strong>หาดแม่น้ำ</strong> ออกไปเที่ยวบนชายหาดเปลือย
คลิกแผนที่เพื่อดูข้อมูลเพิ่มเติม</span></span></a></li>
<li><a id="map04" href="#map04"><span
ชั้น = "ชดเชย" <img
src=" /><span><strong>วูดแลนด์ในท้องถิ่นของเรา
ผู้ค้า</strong>คือศูนย์กลางของสินค้าอุปโภคบริโภคอย่างแท้จริงและ
ฮาร์ดแวร์. คลิกแผนที่เพื่อ
เพิ่มเติม</span></span></a></li> <li><a
id="map05" href="#map05"><span class="offset"><img
src=" /><span>การใช้ชีวิตในชนบทหมายถึงการฆ่าคนตายบนถนน และ
<strong>Wild Game Diner</strong> เตรียมความพร้อมเป็นพิเศษ
ซอส. คลิกแผนที่เพื่อ
เพิ่มเติม</span></span></a></li> </ul>
</ร่างกาย>
</html>