Web前端开发练习-地图

更新:解决了布局和动效之间的冲突的问题了,本质还是我之前没有搞清楚几个布局之间的区别,现在代码已更新。
主要更新的地方有:
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;


本次练习图片连接跳转,虽然代码很简单,但是我却遇到了关于布局的问题,目前并没有解决,所以发出来也希望大神帮我解答一下。

声明:上图手绘地图来源自站酷作者:MOKA明信片,本人拿来做练习并无商用意图。
作者链接:https://www.zcool.com.cn/work/ZMzM5NzAxNzI=.html

我的问题是,我把2图片和3地标装进一个

里面以后,
设置绝对布局,给地图图片以及红色小地标设置相对布局,为的是当窗口发生变化时,地图相对窗口、地标相对地图的位置都不发生变化。 到这里都没什么问题,可是我嫌画面太死板啊,就想让鼠标放上地标后,地标变大(加)。
这里就出现问题了,因为三个地标之间是相对布局,所以一旦一个变大其他的位置都变了,如下图:

Web前端开发练习-地图_第1张图片Web前端开发练习-地图_第2张图片

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

HTML代码:

<body>
    <H1 STYLE="color: orange; font-family: impact" align="center">The Map of CanadaH1> <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>
				
				
			<p class="down">黎佳佳 1611214039p>
 
    		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编辑器的用法,会调整图片大小啦,以后排版会越来越清晰的嘻!)

你可能感兴趣的:(WEB前端开发)