当前位置：首页 → 问答吧 → CSS中中国地图

CSS中中国地图

时间：2010-06-04

来源：互联网

CSS中国地图，精确到省

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>全国地图</title> <style type="text/css"> /* The group of people */ *{text-align:center; font-size:12px;} #gmap { display:block; width:765px; height:602px; background:url(http://web.austo.net/map/images/map.jpg) no-repeat; position:relative; margin:0 auto 2em auto; } #gmap a {color:#000; font-family:arial, sans-serif; font-size:11px; text-transform:uppercase; text-decoration:none;} a#title2, a#title2:visited { display:block; width:765px; height:602px; position:absolute; left:0; top:0; cursor:default; text-decoration:none; } * html #title2 {height:602px; he\ight:0;}/*IE6.0以下中显示*/ /*新疆*/ a#xj { display:block; width:300px; height:65px; padding-top:156px; overflow:hidden; position:absolute; left:0px; top:52px; } * html #xj {height:220px; he\ight:0;} a#xj:hover {background:transparent url(http://web.austo.net/map/images/xj1.gif) no-repeat 0 0;overflow:visible;text-indent:-9000px;} /*西藏*/ a#xz { display:block; width:292px; height:62px; padding-top:124px; overflow:hidden; position:absolute; left:25px; top:256px; } * html #xz {height:186px; he\ight:0;} a#xz:hover {background:transparent url(http://web.austo.net/map/images/xz.gif) no-repeat 0 0;overflow:visible;text-indent:-9000px;} /*青海*/ a#qh { display:block; width:195px; height:42px; padding-top:96px; overflow:hidden; position:absolute; left:183px; top:228px; } * html #qh {height:138px; he\ight:0;} a#qh:hover {background:transparent url(http://web.austo.net/map/images/qh.gif) no-repeat 0 0; height:-20px; overflow:visible;text-indent:-9000px;} /*甘肃*/ a#gs { display:block; width:213px; height:60px; padding-top:123px; overflow:hidden; position:absolute; left:254px; top:176px; } * html #gs {height:183px; he\ight:0;} a#gs:hover {background:transparent url(http://web.austo.net/map/images/gsh.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*内蒙古*/ a#lmg { display:block; width:345px; height:72px; padding-top:196px; overflow:hidden; position:absolute; left:310px; top:13px; } * html #lmg {height:268px; he\ight:0;} a#lmg:hover {background:transparent url(http://web.austo.net/map/images/lm.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*黑龙江*/ a#hlj { display:block; width:172px; height:44px; padding-top:106px; overflow:hidden; position:absolute; left:591px; top:0px; } * html #hlj {height:150px; he\ight:0;} a#hlj:hover {background:transparent url(http://web.austo.net/map/images/hlj.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*宁夏*/ a#nx { display:block; width:39px; height:48px; padding-top:47px; overflow:hidden; position:absolute; left:401px; top:245px; } * html #nx {height:95px; he\ight:0;} a#nx:hover {background:transparent url(http://web.austo.net/map/images/nx.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*吉林*/ a#jl { display:block; width:121px; height:22px; padding-top:59px; overflow:hidden; position:absolute; left:621px; top:117px; } * html #jl {height:81px; he\ight:0;} a#jl:hover {background:transparent url(http://web.austo.net/map/images/jl.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*辽宁*/ a#ln { display:block; width:89px; height:38px; padding-top:53px; overflow:hidden; position:absolute; left:600px; top:163px; } * html #ln {height:91px; he\ight:0;} a#ln:hover {background:transparent url(http://web.austo.net/map/images/ll.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*山东*/ a#sd { display:block; width:95px; height:32px; padding-top:45px; overflow:hidden; position:absolute; left:553px; top:264px; } * html #sd {height:77px; he\ight:0;} a#sd:hover {background:transparent url(http://web.austo.net/map/images/sd.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*河北*/ a#hb { display:block; width:82px; height:31px; padding-top:81px; overflow:hidden; position:absolute; left:527px; top:184px; } * html #hb {height:112px; he\ight:0;} a#hb:hover {background:transparent url(http://web.austo.net/map/images/heb.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*北京*/ a#bj { display:block; width:34px; height:45px; padding-top:18px; overflow:hidden; position:absolute; left:551px; top:212px; } * html #bj {height:63px; he\ight:0;} a#bj:hover {background:transparent url(http://web.austo.net/map/images/bj.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*天津*/ a#tj { display:block; width:29px; height:17px; padding-top:20px; overflow:hidden; position:absolute; left:572px; top:228px; } * html #tj {height:37px; he\ight:0;} a#tj:hover {background:transparent url(http://web.austo.net/map/images/tj.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*陕西*/ a#shx { display:block; width:78px; height:39px; padding-top:93px; overflow:hidden; position:absolute; left:416px; top:242px; } * html #shx {height:132px; he\ight:0;} a#shx:hover {background:transparent url(http://web.austo.net/map/images/shx.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*山西*/ a#sx { display:block; width:60px; height:36px; padding-top:73px; overflow:hidden; position:absolute; left:481px; top:220px; } * html #sx {height:109px; he\ight:0;} a#sx:hover {background:transparent url(http://web.austo.net/map/images/sx.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*河南*/ a#hn { display:block; width:93px; height:33px; padding-top:56px; overflow:hidden; position:absolute; left:485px; top:295px; } * html #hn {height:89px; he\ight:0;} a#hn:hover {background:transparent url(http://web.austo.net/map/images/hl.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*江苏*/ a#js { display:block; width:77px; height:34px; padding-top:50px; overflow:hidden; position:absolute; left:572px; top:314px; } * html #js {height:84px; he\ight:0;} a#js:hover {background:transparent url(http://web.austo.net/map/images/js.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*安徽*/ a#ah { display:block; width:72px; height:32px; padding-top:63px; overflow:hidden; position:absolute; left:554px; top:321px; } * html #ah {height:95px; he\ight:0;} a#ah:hover {background:transparent url(http://web.austo.net/map/images/ah.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*上海*/ a#sh { display:block; width:48px; height:36px; padding-top:7px; overflow:hidden; position:absolute; left:637px; top:375px; } * html #sh {height:43px; he\ight:0;} a#sh:hover {background:transparent url(http://web.austo.net/map/images/sh.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*浙江*/ a#zj { display:block; width:49px; height:24px; padding-top:50px; overflow:hidden; position:absolute; left:605px; top:383px; } * html a#zj {height:74px; he\ight:0;} a#zj:hover {background:transparent url(http://web.austo.net/map/images/zj.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*江西*/ a#jx { display:block; width:76px; height:34px; padding-top:67px; overflow:hidden; position:absolute; left:535px; top:399px; } * html #jx {height:101px; he\ight:0;} a#jx:hover {background:transparent url(http://web.austo.net/map/images/jx.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*福建*/ a#hj { display:block; width:54px; height:24px; padding-top:59px; overflow:hidden; position:absolute; left:576px; top:428px; } * html #hj {height:83px; he\ight:0;} a#hj:hover {background:transparent url(http://web.austo.net/map/images/hj.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*广东*/ a#gd { display:block; width:129px; height:21px; padding-top:63px; overflow:hidden; position:absolute; left:466px; top:483px; } * html #gd {height:84px; he\ight:0;} a#gd:hover {background:transparent url(http://web.austo.net/map/images/gd.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*海南*/ a#hl { display:block; width:46px; height:12px; padding-top:21px; overflow:hidden; position:absolute; left:447px; top:571px; } * html #hl {height:33px; he\ight:0;} a#hl:hover {background:transparent url(http://web.austo.net/map/images/hal.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*广西*/ a#gx { display:block; width:120px; height:23px; padding-top:59px; overflow:hidden; position:absolute; left:394px; top:468px; } * html #gx {height:82px; he\ight:0;} a#gx:hover {background:transparent url(http://web.austo.net/map/images/gx.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*贵州*/ a#gz { display:block; width:97px; height:28px; padding-top:52px; overflow:hidden; position:absolute; left:379px; top:417px; } * html #gz {height:80px; he\ight:0;} a#gz:hover {background:transparent url(http://web.austo.net/map/images/gz.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*云南*/ a#yn { display:block; width:147px; height:45px; padding-top:92px; overflow:hidden; position:absolute; left:273px; top:413px; } * html #yn {height:137px; he\ight:0;} a#yn:hover {background:transparent url(http://web.austo.net/map/images/yn.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*四川*/ a#sc { display:block; width:177px; height:49px; padding-top:96px; overflow:hidden; position:absolute; left:291px; top:327px; } * html #sc {height:145px; he\ight:0;} a#sc:hover {background:transparent url(http://web.austo.net/map/images/sc.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*重庆*/ a#cq { display:block; width:64px; height:21px; padding-top:47px; overflow:hidden; position:absolute; left:419px; top:368px; } * html #cq {height:68px; he\ight:0;} a#cq:hover {background:transparent url(http://web.austo.net/map/images/chq.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*湖南*/ a#hun { display:block; width:77px; height:26px; padding-top:65px; overflow:hidden; position:absolute; left:465px; top:401px; } * html #hun {height:91px; he\ight:0;} a#hun:hover {background:transparent url(http://web.austo.net/map/images/hn.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*湖北*/ a#hub { display:block; width:118px; height:26px; padding-top:49px; overflow:hidden; position:absolute; left:456px; top:347px; } * html #hub {height:75px; he\ight:0;} a#hub:hover {background:transparent url(http://web.austo.net/map/images/hb.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} /*台湾*/ a#tw { display:block; width:30px; height:21px; padding-top:40px; overflow:hidden; position:absolute; left:630px; top:478px; } * html #tw {height:61px; he\ight:0;} a#tw:hover {background:transparent url(http://web.austo.net/map/images/tw.gif) no-repeat 0 0; overflow:visible;text-indent:-9000px;} #box{ position:relative; width:765px;} #daliang{ width:60px; height:20px; position:absolute; background:url(http://web.austo.net/map/images/xx.png) no-repeat left; line-height:20px; text-indent:0.5em;z-index:10000000000000000000; right:86px; top:236px;border:1px solid #ff6600;} #qingdao{ width:60px; height:20px; position:absolute; background:url(http://web.austo.net/map/images/xx.png) no-repeat left; line-height:20px; text-indent:0.5em; z-index:10000000000000000000; right:80px; top:270px; border:1px solid #ff6600;} #ningbo{ width:60px; height:20px; position:absolute; background:url(http://web.austo.net/map/images/xx.png) no-repeat left; line-height:20px; text-indent:0.5em; z-index:10000000000000000000; right:76px; top:392px;border:1px solid #ff6600;} #shenzhen{ width:60px; height:20px; position:absolute; background:url(http://web.austo.net/map/images/xx.png) no-repeat left; line-height:20px; text-indent:0.5em; z-index:10000000000000000000; right:176px; top:505px;border:1px solid #ff6600;} </style> </head> <body> <div id="box"> <div id="daliang">大连</div> <div id="qingdao">青岛</div> <div id="ningbo">宁波</div> <div id="shenzhen">深圳</div> <dl id="gmap" name="gmap"> <dt><a href="#nogo" name="title2" id="title2"onfocus="this.blur()"></a></dt> <dd><a href="#" name="xj" title="新疆" id="xj" onfocus="this.blur()">新疆</a></dd> <dd><a href="#" name="xz" title="西藏" id="xz" onfocus="this.blur()">西藏</a></dd> <dd><a id="qh" title="青海" href="#" onfocus="this.blur()">青海</a></dd> <dd><a id="gs" title="甘肃" href="#" onfocus="this.blur()">甘肃</a></dd> <dd><a id="lmg" title="内蒙古" href="#" onfocus="this.blur()">内蒙古</a></dd> <dd><a id="hlj" title="黑龙江" href="#" onfocus="this.blur()">黑龙江</a></dd> <dd><a id="jl" title="吉林" href="#" onfocus="this.blur()">吉林</a></dd> <dd><a id="ln" title="辽宁" href="#" onfocus="this.blur()">辽宁</a></dd> <dd><a id="sd" title="山东" href="#" onfocus="this.blur()">山东</a></dd> <dd><a id="hb" title="河北" href="#" onfocus="this.blur()">河北</a></dd> <dd><a id="sx" title="山西" href="#" onfocus="this.blur()">山西</a></dd> <dd><a id="bj" title="北京" href="#" onfocus="this.blur()">北京</a></dd> <dd><a id="tj" title="天津" href="#" onfocus="this.blur()">天津</a></dd> <dd><a id="shx" title="陕西" href="#" onfocus="this.blur()">陕西</a></dd> <dd><a id="nx" title="宁夏" href="#" onfocus="this.blur()">宁夏</a></dd> <dd><a id="hn" title="河南" href="#" onfocus="this.blur()">河南</a></dd> <dd><a id="js" title="江苏" href="#" onfocus="this.blur()">江苏</a></dd> <dd><a id="ah" title="安徽" href="#" onfocus="this.blur()">安徽</a></dd> <dd><a id="sh" title="上海" href="#" onfocus="this.blur()">上海</a></dd> <dd><a id="zj" title="浙江" href="#" onfocus="this.blur()">浙江</a></dd> <dd><a id="jx" title="江西" href="#" onfocus="this.blur()">江西</a></dd> <dd><a id="hj" title="福建" href="#" onfocus="this.blur()">福建</a></dd> <dd><a id="gd" title="广东" href="#" onfocus="this.blur()">广东</a></dd> <dd><a id="hl" title="海南" href="#" onfocus="this.blur()">海南</a></dd> <dd><a id="gx" title="广西" href="#" onfocus="this.blur()">广西</a></dd> <dd><a id="gz" title="贵州" href="#" onfocus="this.blur()">贵州</a></dd> <dd><a id="yn" title="云南" href="#" onfocus="this.blur()">云南</a></dd> <dd><a id="sc" title="四川" href="#" onfocus="this.blur()">四川</a></dd> <dd><a id="cq" title="重庆" href="#l" onfocus="this.blur()">重庆</a></dd> <dd><a id="hun" title="湖南" href="#" onfocus="this.blur()">湖南</a></dd> <dd><a id="hub" title="湖北" href="#" onfocus="this.blur()">湖北</a></dd> <dd><a id="tw" title="台湾" href="#" onfocus="this.blur()">台湾</a></dd>  </dl> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 xxb110 于 2010-6-4 16:16 编辑 ]

作者: xxb110 发布时间: 2010-06-04

收藏了，以后用的

作者: sumaolin 发布时间: 2010-06-08

不错楼主真是牛人呀

作者: qiantian 发布时间: 2010-06-08

强！欣赏下

作者: 3235183 发布时间: 2010-06-08

链接重叠了，感觉不是很好

作者: ckoog 发布时间: 2010-06-08

太好了不知道实际运用的时候会不会出现问题

作者: weimingyushi 发布时间: 2010-06-08