实验室纳新页面总结

“我的信息”页面最后效果：

问题：

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

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

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

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

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

总结：

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

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

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