中国地图_html/css_WEB-ITnose-HTML-Tutorial-php.cn

中国地图_html/css_WEB-ITnose

WBOY

Freigeben： 2016-06-24 11:42:56

Original

1531 Leute haben es durchsucht

中国地图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>

Nach dem Login kopieren

ＣＳＳ代码

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}

Nach dem Login kopieren