地图弹窗（map pop）具体演示
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"
/>
<title>CSS实例讲解：地图提示（map pop）档</title>
<style type="text/css" media="all">
* {margem:0; preenchimento:0;
}
img { borda:0;
}
#show{ alinhamento de texto:esquerda;
}
ul { tipo de estilo de lista: nenhum; fundo: transparente
url( ) sem repetição -130px
0px;
}
ul li a#map01:hover span.offset, ul li a#map01:focus span.offset, ul li
a#map01:active span.offset { margin-top:-1px; margem esquerda: 230px;
}
ul li a#map02 {largura:110px; altura:75px; margem superior: -50px;
margem esquerda: 235px;
}
ul li a#map02:hover, ul li a#map02:focus, ul li a#map02:active {
fundo: transparente
url( ) sem repetição -115px
-88px;
}
ul li a#map03:hover span.offset, ul li a#map03:focus span.offset,ul li
a#map03:active span.offset { margin-top:-89px; margem esquerda: 245px;
}
ul li a#map04 {largura:110px; altura:120px; margem superior:-60px;
margem esquerda:5px;
}
ul li a#map04:hover, ul li a#map04:focus, ul li a#map04:active {
fundo: transparente
url( ) sem repetição -240px
-153px;
}
ul li a#map05:hover span.offset, ul li a#map05:focus span.offset, ul li
a#map05:active span.offset { margin-top:-154px; margem esquerda: 120px;
}
</estilo>
</head>
<body> <ul> <li><a id="map01"
href="#map01"><span class="offset"><img
src=" /><span>Esta é a comunidade de Popsville <strong>Postagem
Escritório</strong>, a sua casa de postagem superfaturada. Clique no mapa para
mais</span></span></a></li> <li><a
id="map02" href="#map02"><span class="offset"><img
src=" /><span>Casa é onde está a cerveja. E isso significa que o
<strong>Pousada Gota de Orvalho</strong>. Música ao vivo nos finais de semana.
Clique no mapa para mais</span></span></a></li>
<li><a id="map03" href="#map03"><span
class="deslocamento"><img
src=" /><span>Passe tardes preguiçosas de verão na bela
<strong>Praia Fluvial</strong>. Passe um tempo na praia de nudismo.
Clique no mapa para mais</span></span></a></li>
<li><a id="map04" href="#map04"><span
class="deslocamento"><img
src=" /><span>Nossa <strong>floresta local
Traders</strong> é uma verdadeira Meca dos bens de consumo e
hardware. Clique no mapa para
mais</span></span></a></li> <li><a
id="map05" href="#map05"><span class="offset"><img
src=" /><span>Viver no campo significa atropelamento, e o
<strong>Wild Game Diner</strong> prepara com pratos especiais
molho. Clique no mapa para
mais</span></span></a></li> </ul>
</body>
</html>