当前位置:Gxlcms > html代码 > 中国地图_html/css_WEB-ITnose

中国地图_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:79人阅读

中国地图Div+CSS

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

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

效果图:

HTML代码

中国地图div+css版

请先选择您所在的城市:

北京

长春

呼和浩特

成都

重庆

大连

广州

贵阳

海口

哈尔滨

杭州

合肥

济南

昆明

兰州

洛阳

长沙

南昌

南京

徐州

青岛

汕头

上海

深圳

沈阳

石家庄

无锡

马鞍山

太原

天津

乌鲁木齐

武汉

南阳

西安

厦门

烟台

郑州

焦作

珠海

淄博

福州

南宁

西宁

拉萨

CSS代码

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}

人气教程排行