Home >Web Front-end >HTML Tutorial >China map_html/css_WEB-ITnose
China map_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:42:561537browse
China Map Div CSS
1. Set the margin value of the provincial capital city.
2. Then, some cities are very close, so you need to modify the left and right positions of the icons and text.
３. Final settings: Absolute positioning in CSS puts the icon in the appropriate position.
Full code demo: http://yun.baidu.com/s/1pJvDnK3
Rendering:
HTML code
<!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>
ＣＳＳ code
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}
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：url(data:image/png;base64,R0)_html/css_WEB-ITnoseNext article：url(data:image/png;base64,R0)_html/css_WEB-ITnose