您所在的位置:小祥子 » 编程 » CSS » 正文

中国地图

时间:2015-06-12 编辑:魔芋铃 来源:本站整理

CSS">中国地图Div+CSS



1. 设置省会城市的margin值。
2. 然后,有些城市离得很近,要修改图标和文字的左右位置。
3. 最后设置: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>

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
}
关键词:地图