中国地图

中国地图Div+CSS

---

---

１. 设置省会城市的margin值。
２. 然后，有些城市离得很近，要修改图标和文字的左右位置。
３. 最后设置：CSS中绝对定位将图标放在合适的位置。

完整代码demo:http://yun.baidu.com/s/1pJvDnK3

效果图：

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
}