Heim >Web-Frontend >HTML-Tutorial >中国地图_html/css_WEB-ITnose
中国地图_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:42:561535Durchsuche
中国地图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}
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：url(data:image/png;base64,R0)_html/css_WEB-ITnoseNächster Artikel：一篇文章教你学会基础的HTML_html/css_WEB-ITnose