最近看见慕课网上的登录框,就寻思着自己做一下练练手,毕竟向我这样的初学者,放弃了动手就算是放弃了学习,我可不想!
这是原网站截下来的图:
结构分析:
点击登录应该弹出的是两层div,一个是下面的有透明覆盖层div(oCover),一个是登录框所在的div(oLogin)。
细节分析:
- 弹出覆盖层后可以使用滚轮:oCover一定是覆盖了整个页面(不只是浏览器可视区域)
- 登录层不随滚轮滑动改变位置:oLogin该是固定定位
- 不同的页面弹出的登录框相同:使用js生成DOM减少代码量
- 登录框会随着浏览器的可是窗口大小的改变而改变,所以需要监听resize事件,或者CSS设置@media
实现: