中国地图DIV+CSS版特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是中国地图DIV+CSS版特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0031)http://www.kijiji.cn/index.html -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD>
<meta name="keywords" content="JS代码,其他代码,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为中国地图DIV+CSS版，属于站长常用代码" />
<title>中国地图DIV+CSS版</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<LINK href="images/yi_base.css" type=text/css rel=stylesheet>
<LINK href="images/yi_index.css" type=text/css rel=stylesheet>
<META content="MSHTML 6.00.2900.3132" name=GENERATOR></HEAD>
<BODY>
<DIV id=wrapper><!-- header end-->
<DIV id=main>
<DIV id=map>
<H1 style="FONT-SIZE: 14px; MARGIN: 90px 0px 0px 210px">请先选择您MJJ所在的城市：</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></DIV>
</DIV>
</DIV>
</BODY></HTML>

CSS代码(yi_index.css):

#map{BACKGROUND:url(map.gif) no-repeat left top;FLOAT:left;WIDTH:552px;HEIGHT:447px}
#map H1{DISPLAY:block;FONT-WEIGHT:normal;POSITION:absolute}
.mapl A:link{DISPLAY:block;BACKGROUND:url(maph1.gif) no-repeat;COLOR:#000;TEXT-DECORATION:none}
.mapl A:visited{DISPLAY:block;BACKGROUND:url(maph1.gif) no-repeat;COLOR:#000;TEXT-DECORATION:none}
.mapr A:link{DISPLAY:block;BACKGROUND:urlmaph1.gif) no-repeat;COLOR:#000;TEXT-DECORATION:none}
.mapr 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}
.mapl A:visited{BACKGROUND-POSITION:left 4px;PADDING-LEFT:20px}
.mapr A:link{PADDING-RIGHT:20px;BACKGROUND-POSITION:right 4px}
.mapr A:visited{PADDING-RIGHT:20px;BACKGROUND-POSITION:right 4px}
.mapl A:hover{PADDING-RIGHT:20px;DISPLAY:block;BACKGROUND:url(maph1.gif) no-repeat;COLOR:#ff0000}
.mapl A:active{PADDING-RIGHT:20px;DISPLAY:block;BACKGROUND:url(maph1.gif) no-repeat;COLOR:#ff0000}
.mapr A:hover{PADDING-RIGHT:20px;DISPLAY:block;BACKGROUND:url(maph1.gif) no-repeat;COLOR:#ff0000}
.mapr A:active{PADDING-RIGHT:20px;DISPLAY:block;BACKGROUND:url(maph1.gif) no-repeat;COLOR:#ff0000}
#map .mapr A:hover{PADDING-RIGHT:20px;BACKGROUND-POSITION:right bottom}
#map .mapr A:active{PADDING-RIGHT:20px;BACKGROUND-POSITION:right bottom}
#map .mapl A:hover{BACKGROUND-POSITION:left bottom;PADDING-LEFT:20px}
#map .mapl A:active{BACKGROUND-POSITION:left bottom;PADDING-LEFT:20px}
#city{PADDING-RIGHT:0px;BORDER-TOP:#cdcdcd 1px solid;PADDING-LEFT:0px;PADDING-BOTTOM:10px;MARGIN:0px auto;WIDTH:950px;PADDING-TOP:10px;BORDER-BOTTOM:#cdcdcd 1px solid;TEXT-ALIGN:left}
#city H6{BACKGROUND-POSITION:left center;PADDING-LEFT:10px;FONT-SIZE:14px;BACKGROUND-IMAGE:url(city_icon.gif);MARGIN-BOTTOM:10px;COLOR:#000;BACKGROUND-REPEAT:no-repeat}
#city A{PADDING-RIGHT:5px}
#city STRONG{MARGIN-TOP:5px;DISPLAY:inline;MARGIN-BOTTOM:-2px;COLOR:#333}
#city H1{COLOR:#333}
#soil{PADDING-RIGHT:0px;PADDING-LEFT:0px;PADDING-BOTTOM:10px;MARGIN:0px auto;WIDTH:950px;PADDING-TOP:10px;TEXT-ALIGN:left}
#soil A{MARGIN:0px 2px}
#soil H6{BACKGROUND-POSITION:left center;PADDING-LEFT:10px;FONT-SIZE:14px;BACKGROUND-IMAGE:url(soil_icon.gif);MARGIN-BOTTOM:10px;COLOR:#000;BACKGROUND-REPEAT:no-repeat}
A.z{COLOR:#ff0000}
#rightindex{FLOAT:right;MARGIN:10px 0px 0px 10px;WIDTH:380px}
.rightbox{BACKGROUND:url(index_rb1.gif) no-repeat left top;WIDTH:341px}
.rightbox P{PADDING-RIGHT:18px;PADDING-LEFT:18px;BACKGROUND:url(index_rb2.gif) no-repeat left bottom;PADDING-BOTTOM:15px;PADDING-TOP:15px}

附件:下载该文件资源,减少时间成本(增值服务)