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前端开发练习
发布评论