纯CSS绘制中国地图及地区图
CSS
2025-02-20 16:23
56
0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>地图</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
</style>
<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="map">
<span class="mapl" style="margin:162px 0px 0px 396px"><a style="font-weight:bold;color:#ff0000;" href="#">北京</a></span>
<span class="mapl" style="margin:110px 0px 0px 465px"><a href="#">长春</a></span>
<span class="mapr" style="margin:165px 0px 0px 305px"><a href="#">呼和浩特</a></span>
<span class="mapr" style="margin:293px 0px 0px 255px"><a href="#">成都</a></span>
<span class="mapr" style="margin:285px 0px 0px 300px"><a href="#">重庆</a></span>
<span class="mapl" style="margin:154px 0px 0px 439px"><a href="#">大连</a></span>
<span class="mapr" style="margin:370px 0px 0px 366px"><a href="#">广州</a></span>
<span class="mapl" style="margin:338px 0px 0px 305px"><a href="#">贵阳</a></span>
<span class="mapl" style="margin:420px 0px 0px 342px"><a href="#">海口</a></span>
<span class="mapl" style="margin:79px 0px 0px 489px"><a href="#">哈尔滨</a></span>
<span class="mapl" style="margin:296px 0px 0px 445px"><a href="#">杭州</a></span>
<span class="mapr" style="margin:261px 0px 0px 393px"><a href="#">合肥</a></span>
<span class="mapr" style="margin:206px 0px 0px 383px"><a href="#">济南</a></span>
<span class="mapr" style="margin:359px 0px 0px 237px"><a href="#">昆明</a></span>
<span class="mapr" style="margin:222px 0px 0px 264px"><a href="#">兰州</a></span>
<span class="mapr" style="z-index:100;margin:250px 0px 0px 342px"><a href="#">洛阳</a></span>
<span class="mapl" style="margin:317px 0px 0px 360px"><a href="#">长沙</A></span>
<span class="mapl" style="margin:317px 0px 0px 405px"><a href="#">南昌</a></span>
<span class="mapl" style="margin:255px 0px 0px 430px"><a href="#">南京</a></span>
<span class="mapl" style="margin:229px 0px 0px 418px"><a href="#">徐州</a></span>
<span class="mapl" style="margin:214px 0px 0px 433px"><a href="#">青岛</a></span>
<span class="mapl" style="z-index:99;margin:366px 0px 0px 400px"><a href="#">汕头</a></span>
<span class="mapl" style="margin:280px 0px 0px 458px"><a style="font-weight:bold;color:#ff0000;" href="#">上海</a></span>
<span class="mapl" style="margin:383px 0px 0px 392px"><a href="/">深圳</a></span>
<span class="mapr" style="margin:138px 0px 0px 433px"><a href="#">沈阳</a></span>
<span class="mapr" style="margin:191px 0px 0px 355px"><a href="#">石家庄</a></span>
<span class="mapl" style="margin:270px 0px 0px 430px"><a href="#">无锡</a></span>
<span class="mapr" style="margin:272px 0px 0px 390px"><a href="#">马鞍山</a></span>
<span class="mapr" style="margin:204px 0px 0px 338px"><a href="#">太原</a></span>
<span class="mapl" style="margin:176px 0px 0px 408px"><a href="#">天津</a></span>
<span class="mapl" style="margin:115px 0px 0px 145px"><a href="#">乌鲁木齐</a></span>
<span class="mapr" style="margin:277px 0px 0px 357px"><a href="#">武汉</a></span>
<span class="mapr" style="margin:263px 0px 0px 347px"><a href="#">南阳</a></span>
<span class="mapr" style="margin:238px 0px 0px 314px"><a href="#">西安</a></span>
<span class="mapl" style="margin:353px 0px 0px 424px"><a href="#">厦门</a></span>
<span class="mapl" style="margin:189px 0px 0px 438px"><a href="#">烟台</a></span>
<span class="mapl" style="margin:235px 0px 0px 377px"><a href="#">郑州</a></span>
<span class="mapr" style="margin:225px 0px 0px 350px"><a href="#">焦作</a></span>
<span class="mapr" style="margin:383px 0px 0px 355px"><a href="#">珠海</a></span>
<span class="mapl" style="margin:200px 0px 0px 415px"><a href="#">淄博</a></span>
<span class="mapl" style="margin:335px 0px 0px 435px"><a href="#">福州</a></span>
<span class="mapl" style="margin:375px 0px 0px 315px"><a href="#">南宁</a></span>
</div>
</body>
</html>
