Web前端开发练习"/>
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明信片，本人拿来做练习并无商用意图。
作者链接：=.html
我的问题是，我把2图片和3地标装进一个<div></dive>里面以后，<div>设置绝对布局，给地图图片以及红色小地标设置相对布局，为的是当窗口发生变化时，地图相对窗口、地标相对地图的位置都不发生变化。 到这里都没什么问题，可是我嫌画面太死板啊，就想让鼠标放上地标后，地标变大（加<hover>）。
这里就出现问题了,因为三个地标之间是相对布局，所以一旦一个变大其他的位置都变了，如下图：
我试过把地标放到其他的div里啊，布局变成绝对啊都不可以（而且我不想牺牲掉图片随窗口位置不变这一点），所以目前还没有解决，把html和css代码都附在下面啦，希望有大佬看到顺便解决一下。
不然就等我自己解决了来更新吧。
HTML代码：
<body><H1 STYLE="color: orange; font-family: impact" align更多推荐
Web前端开发练习
发布评论