html中国地图设计

发布网友发布时间：2022-05-13 08:39

我来回答

共2个回答

懂视网时间：2022-05-13 13:00

中国地图Div+CSS

１. 设置省会城市的margin值。
２. 然后，有些城市离得很近，要修改图标和文字的左右位置。
３. 最后设置：CSS中绝对定位将图标放在合适的位置。

完整代码demo:http://yun.baidu.com/s/1pJvDnK3

效果图：

HTML代码

中国地图div+css版 							 请先选择您所在的城市： 
			 北京 
			 长春 
			 呼和浩特 
	 	 成都 
			 重庆 
			 大连 
			 广州 
			 贵阳 
			 海口 
			 哈尔滨 
			 杭州 
			 合肥 
			 济南 
			 昆明 
			 兰州 
						 洛阳 
			 长沙 
	 	 南昌 
			 南京 
			 徐州 
			 青岛 
						 汕头 
			 上海 
			 深圳 
			 沈阳 
			 石家庄 
			 无锡 
			 马鞍山 
			 太原 
			 天津 
			 乌鲁木齐 
			 武汉 
			 南阳 
			 西安 
			 厦门 
			 烟台 
			 郑州 
			 焦作 
			 珠海 
			 淄博 
			 福州 
			 南宁 
			 西宁 
 			 拉萨

ＣＳＳ代码

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}

热心网友时间：2022-05-13 10:08

以前有看到类似的，一般的做法是首先放一张地图，然后放一些类似于图钉之类的小图标，利用相对定位把他定到你要放的省份或者城市那里，当鼠标移动到这些小图标就显示出隐藏的内容。

代码大概是这样子写

<div id="ditu">
        <li><span></span><div class="yin">广东张三135XXXXXXXX</div></li>
        <li><span></span><div class="yin">北京李四138XXXXXXXX</div></li>
        <li><span></span><div class="yin">上海王五139XXXXXXXX</div></li>
</div>

<style>
#ditu{position:relative;width:1000px;height:1000px;background:url('ditu.jpg') no-repeat;}
#ditu li{position:absolute;}
#ditu li span{bakcground:url('tubiao.jpg') no-repeat;}
#ditu li .yin{display:none;}
#ditu li:hover .yin{display:block;}
</style>

代码就是这样，然后用nth:child()来定义每一个li的位置就行了