中国地图
中国地图Div+CSS
１. 设置省会城市的margin值。
２. 然后，有些城市离得很近，要修改图标和文字的左右位置。
３. 最后设置：CSS中绝对定位将图标放在合适的位置。
完整代码demo:http://yun.baidu.com/s/1pJvDnK3
效果图：
HTML代码
<!DOCTYPE html>
<head>
<title>中国地图div+css版</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<link href="images/yi_index.css" type=text/css rel=stylesheet>
</head>
<body>
<div id=wrapper>
<!-- header end-->
<div id=main>
<div id=map>
<h1 style="font-size: 14px; margin: 90px 0px 0px 210px"> 请先选择您所在的城市： </h1>
<h1 class=mapl style="margin: 162px 0px 0px 396px"> <a style="font-weight: bold; color: #ff0000" href="#"> 北京 </a> </h1>
<h1 class=mapl style="margin: 110px 0px 0px 465px"> <a href="#"> 长春 </a> </h1>
<h1 class=mapr style="margin: 165px 0px 0px 305px"> <a href="#"> 呼和浩特 </a> </h1>
<h1 class=mapr style="margin: 293px 0px 0px 255px"> <a href="#"> 成都 </a> </h1>
<h1 class=mapr style="margin: 285px 0px 0px 300px"> <a href="#"> 重庆 </a> </h1>
<h1 class=mapl style="margin: 154px 0px 0px 439px"> <a href="#"> 大连 </a> </h1>
<h1 class=mapr style="margin: 370px 0px 0px 366px"> <a href="#"> 广州 </a> </h1>
<h1 class=mapl style="margin: 338px 0px 0px 305px"> <a href="#"> 贵阳 </a> </h1>
<h1 class=mapl style="margin: 420px 0px 0px 342px"> <a href="#"> 海口 </a> </h1>
<h1 class=mapl style="margin: 79px 0px 0px 489px"> <a href="#"> 哈尔滨 </a> </h1>
<h1 class=mapl style="margin: 296px 0px 0px 445px"> <a href="#"> 杭州 </a> </h1>
<h1 class=mapr style="margin: 261px 0px 0px 393px"> <a href="#"> 合肥 </a> </h1>
<h1 class=mapr style="margin: 206px 0px 0px 383px"> <a href="#"> 济南 </a> </h1>
<h1 class=mapr style="margin: 359px 0px 0px 237px"> <a href="#"> 昆明 </a> </h1>
<h1 class=mapr style="margin: 222px 0px 0px 264px"> <a href="#"> 兰州 </a> </h1>
<h1 class=mapr style="z-index: 100; margin: 250px 0px 0px 342px"> <a href="#"> 洛阳 </a> </h1>
<h1 class=mapl style="margin: 317px 0px 0px 360px"> <a href="#"> 长沙 </a> </h1>
<h1 class=mapl style="margin: 317px 0px 0px 405px"> <a href="#"> 南昌 </a> </h1>
<h1 class=mapl style="margin: 255px 0px 0px 430px"> <a href="#"> 南京 </a> </h1>
<h1 class=mapl style="margin: 229px 0px 0px 418px"> <a href="#"> 徐州 </a> </h1>
<h1 class=mapl style="margin: 214px 0px 0px 433px"> <a href="#"> 青岛 </a> </h1>
<h1 class=mapl style="z-index: 99; margin: 366px 0px 0px 400px"> <a href="#"> 汕头 </a> </h1>
<h1 class=mapl style="margin: 280px 0px 0px 458px"> <a style="font-weight: bold; color: #ff0000" href="#"> 上海 </a> </h1>
<h1 class=mapl style="margin: 383px 0px 0px 392px"> <a href="#"> 深圳 </a> </h1>
<h1 class=mapr style="margin: 138px 0px 0px 433px"> <a href="#"> 沈阳 </a> </h1>
<h1 class=mapr style="margin: 191px 0px 0px 355px"> <a href="#"> 石家庄 </a> </h1>
<h1 class=mapl style="margin: 270px 0px 0px 430px"> <a href="#"> 无锡 </a> </h1>
<h1 class=mapr style="margin: 272px 0px 0px 390px"> <a href="#"> 马鞍山 </a> </h1>
<h1 class=mapr style="margin: 204px 0px 0px 338px"> <a href="#"> 太原 </a> </h1>
<h1 class=mapl style="margin: 176px 0px 0px 408px"> <a href="#"> 天津 </a> </h1>
<h1 class=mapl style="margin: 115px 0px 0px 145px"> <a href="#"> 乌鲁木齐 </a> </h1>
<h1 class=mapr style="margin: 277px 0px 0px 357px"> <a href="#"> 武汉 </a> </h1>
<h1 class=mapr style="margin: 263px 0px 0px 347px"> <a href="#"> 南阳 </a> </h1>
<h1 class=mapr style="margin: 238px 0px 0px 314px"> <a href="#"> 西安 </a> </h1>
<h1 class=mapl style="margin: 353px 0px 0px 424px"> <a href="#"> 厦门 </a> </h1>
<h1 class=mapl style="margin: 189px 0px 0px 438px"> <a href="#"> 烟台 </a> </h1>
<h1 class=mapl style="margin: 235px 0px 0px 377px"> <a href="#"> 郑州 </a> </h1>
<h1 class=mapr style="margin: 225px 0px 0px 350px"> <a href="#"> 焦作 </a> </h1>
<h1 class=mapr style="margin: 383px 0px 0px 355px"> <a href="#"> 珠海 </a> </h1>
<h1 class=mapl style="margin: 200px 0px 0px 415px"> <a href="#"> 淄博 </a> </h1>
<h1 class=mapl style="margin: 335px 0px 0px 435px"> <a href="#"> 福州 </a> </h1>
<h1 class=mapl style="margin: 375px 0px 0px 315px"> <a href="#"> 南宁 </a> </h1>
<h1 class=mapr style="margin: 220px 0px 0px 230px"> <a href="#"> 西宁 </a> </h1>
<h1 class=mapl style="margin: 280px 0px 0px 145px"> <a href="#"> 拉萨 </a> </h1>
</div>
</div>
</div>
<!-- w end-->
</body>
</html>
ＣＳＳ代码
html ,body,h1,div{ padding:0;margin:0;font-size: 12px; }
body {
background: #fff;line-height: 1.8; font-family: verdana, "宋体", arial,sans;
}
#main {
margin: 10px auto 0; width: 950px; text-align: left;
}
#map {
background: url(map.gif) no-repeat left top; float: left; width: 552px; height: 447px;
}
#map h1 {
font-weight: normal; position: absolute;
}
a:link, a:visited {
display: block; background: url(maph1.gif) no-repeat; color: #000; text-decoration: none;
}
.mapl a:link {
background-position: left 4px; padding-left: 20px;
}
.mapr a:link {
background-position: right 4px;padding-right: 20px;
}
.mapl a:hover, .mapr a:hover {
padding-right: 20px; display: block; background: url(maph1.gif) no-repeat; color: #ff0000
}
.mapr a:hover {
background-position: right bottom;padding-right: 20px;
}
.mapl a:hover {
background-position: left bottom; padding-left: 20px
}
