Maison > Article > interface Web > 中国地图_html/css_WEB-ITnose
中国地图_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:42:561509parcourir
中国地图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>
ＣＳＳ代码
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}
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：url(data:image/png;base64,R0)_html/css_WEB-ITnoseArticle suivant：一篇文章教你学会基础的HTML_html/css_WEB-ITnose