实验室纳新页面总结

“我的信息”页面最后效果:在这里插入图片描述

问题:

1.刚开始整体宽高都用了百分比来写,导致别人的页面发生了改变,我的页面的宽高也会受到影响。

2.没有合理使用定位position:由于很多盒子没有定位,导致后面想要用position:absolute时,小盒子最近的已定位父元素已经不是位置上的父元素。所以在后期调整适配性时,“报名、一面、二面、结果”,这四个字是使用position:relative向右使用百分比不断移到合适的位置,但是这样的话,只要字数有了改变,就要在不同分辨率区间改变其的left值,十分麻烦。

3.进度条的实现:进度条的宽度是由%来设置的,但是在调整适配性时,由于每个页面的宽高不同,%对应的px值也不同,这样很难让进度条的位置和上面的圆圈对应。

4.我的信息的上下两条杠是用::brefore和::after实现的,由于初始位置的是左上角,所以上面的那条直接向左移动某px就好,但是下面横杠的在用px改变位置时,不同分辨率下,大字和横杠的间距会发生改变,有时看起来会不协调。

5.整体布局刚开始没有考虑周全,让后面加东西或者写东西增加了麻烦。

总结:

1.可以一个区间使用同一个宽高,宽高用具体的值,从而避免自己的页面受到其他页面的影响。

2.合理用定位,避免后面不好定位元素。

3.重视布局,写东西之前要想好这个整体分为哪几块。

猜你喜欢

转载自blog.csdn.net/ladream/article/details/109696995