“我的信息”页面最后效果:
问题:
1.刚开始整体宽高都用了百分比来写,导致别人的页面发生了改变,我的页面的宽高也会受到影响。
2.没有合理使用定位position:由于很多盒子没有定位,导致后面想要用position:absolute时,小盒子最近的已定位父元素已经不是位置上的父元素。所以在后期调整适配性时,“报名、一面、二面、结果”,这四个字是使用position:relative向右使用百分比不断移到合适的位置,但是这样的话,只要字数有了改变,就要在不同分辨率区间改变其的left值,十分麻烦。
3.进度条的实现:进度条的宽度是由%来设置的,但是在调整适配性时,由于每个页面的宽高不同,%对应的px值也不同,这样很难让进度条的位置和上面的圆圈对应。
4.我的信息的上下两条杠是用::brefore和::after实现的,由于初始位置的是左上角,所以上面的那条直接向左移动某px就好,但是下面横杠的在用px改变位置时,不同分辨率下,大字和横杠的间距会发生改变,有时看起来会不协调。
5.整体布局刚开始没有考虑周全,让后面加东西或者写东西增加了麻烦。
总结:
1.可以一个区间使用同一个宽高,宽高用具体的值,从而避免自己的页面受到其他页面的影响。
2.合理用定位,避免后面不好定位元素。
3.重视布局,写东西之前要想好这个整体分为哪几块。