Web前端开发练习-地图

- 日理万妓 2022-03-07 00:24 235阅读 0赞

更新：解决了布局和动效之间的冲突的问题了，本质还是我之前没有搞清楚几个布局之间的区别，现在代码已更新。  
主要更新的地方有：  
1 当子容器需要根据父容器定位时，遵循“子绝父相”的原则（子div绝对布局，父div相对布局），如果父div没有设置相关布局的话，子div会对浏览器窗口进行布局，也就是会随着窗口的放大缩小改变位置。  
2 float的 功能时让同级的元素并排显示，而且会对后面的元素产生影响（这也是为什么之前当前面一个图标变大后面两个图标也会跟着平移，就是因为挤压到了）  
3 案例里面用到的标签/属性：  
hover 标签：鼠标悬停和划过时的显示效果  
transform：scale() 属性 改变大小  
4 为什么用width height的px以及百分比都不可以  
之前图标变大我直接用的是width，height值以及left，bottom定位，比如原来图片32px，我设置hover里面48px，这样的话一旦鼠标悬停 图标变大那么它对于父div absolute的定位还是原来的，就会发生跳跃现象，改成scale（中心放大）以后就没问题  
即将hover的变大特效用`transform: scale(1.4);` 解决，而不是`width 48px；`

--------------------

本次练习图片连接跳转，虽然代码很简单，但是我却遇到了关于布局的问题，目前并没有解决，所以发出来也希望大神帮我解答一下。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70][]  
声明：上图手绘地图来源自站酷作者：MOKA明信片，本人拿来做练习并无商用意图。  
作者链接：[https://www.zcool.com.cn/work/ZMzM5NzAxNzI=.html][https_www.zcool.com.cn_work_ZMzM5NzAxNzI_.html]

我的问题是，我把2图片和3地标装进一个`<div></dive>`里面以后，`<div>`设置绝对布局，给地图图片以及红色小地标设置相对布局，为的是当窗口发生变化时，地图相对窗口、地标相对地图的位置都不发生变化。 到这里都没什么问题，可是我嫌画面太死板啊，就想让鼠标放上地标后，地标变大（加`<hover>`）。  
这里就出现问题了,因为三个地标之间是相对布局，所以一旦一个变大其他的位置都变了，如下图：

![20190319193144674.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 1][]

我试过把地标放到其他的div里啊，布局变成绝对啊都不可以（而且我不想牺牲掉图片随窗口位置不变这一点），所以目前还没有解决，把html和css代码都附在下面啦，希望有大佬看到顺便解决一下。  
不然就等我自己解决了来更新吧。

HTML代码：

<body>
        <H1 STYLE="color: orange; font-family: impact" align="center">The Map of Canada</H1> <br>
        <center>
        	<div class="divmap">
        		
    			<div class="landmark">			
    				<div class="landmark1"><a href="https://en.wikipedia.org/wiki/Rocky_Mountains" target="blank" >
    					<img src="img/landmark.png" >
    				</a></div>
    				
    				<div class="landmark2"><a href="https://en.wikipedia.org/wiki/Yellowknife" target="blank" >
    					<img src="img/landmark.png" >
    				</a></div>
    				
    				<div class="landmark3"><a href="https://en.wikipedia.org/wiki/Edmonton" target="blank" >
    					<img src="img/landmark.png" >
    				</a></div>
    				
    				<img  class="map" src="img/Canada.jpg"  width="800" height="600"alt="">
    			<p class="down">黎佳佳 1611214039</p>
     
        		</div >	
        </center> 
        
      </body>

CSS样式：

.down
    { 
    	font-size:12px;
    	color: #999999;
    	margin: 0 10px;
    	position:absolute,center;
    }
    .divmap{ 	
    	position:center;
    	width:800px;
    	height:700px;
    }
    
    .map
    { 
    	 position:center;
    }
    .landmark{ 
    	position:relative;
    }
    .landmark1
    { 
    	position:absolute;
    	left:195px; bottom:255px;
    }
    .landmark1:hover
    { 
    	position:absolute;
    	transform: scale(1.4);	
    }
    .landmark2
    { 
    	position:absolute;
    	left:260px; bottom:268px;
    }
    .landmark2:hover
    { 
    	position:absolute;
    	transform: scale(1.4);
    }
    .landmark3
    { 
    	position:absolute;
    	left:255px; bottom:160px;
    }
    .landmark3:hover
    { 
    	position:absolute;
    	transform: scale(1.4);
    }

（哈哈，然后今天学了几个markdown编辑器的用法，会调整图片大小啦，以后排版会越来越清晰的嘻！）

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70]: /images/20220307/498cb8f2a0d74b16a58c7ee0b473dd24.png
[https_www.zcool.com.cn_work_ZMzM5NzAxNzI_.html]: https://www.zcool.com.cn/work/ZMzM5NzAxNzI=.html
[20190319193144674.png]: https://img-blog.csdnimg.cn/20190319193144674.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTQ1OTI2_size_16_color_FFFFFF_t_70 1]: /images/20220307/6410827dc74e41e7b16dcc608b125e80.png