发表于： 2019-03-01 23:12:03
1 788
今天完成的事情：
今天继续攻打任务四，静态页面和psd中的相似，做完了对照要求发现还是有很多地方不足，需要改进
目前顶端的横栏用position:absolute，上左右都设置0，里面的注册关闭也是用的position:absolute脱离文档，再用vw，vh相对视窗定位
2个input输入框放在一个div中，边框设置0，第二个input脱离文档定位在所在div的低下
在下面一个是登入，和头栏一样的方式拉长
目前长款单位都用了vw和vh，字体相对于所在的栏也用了vh，这样字体也能缩放。
头栏的3个词 垂直居中都是用margin把上下设置成(头栏高度-字体高度)/2来垂直居中。
明天计划的事情：
修改任务四的代码，把输入框左侧的图片调整达到要求。
遇到的问题：
输入栏改成了自适应了，这样左边的图片如果不能自适应的话，会变形缩放起来也不能保持比例。（对input设置了max-width和max-height 值用%）
图片右边的竖线不好排版，如果用几个div来装会让css里很乱，不容易分清。（后来发现了简单的方法，设置border-right可以搞定。这个方案还没改到代码上，图片后面到竖线还有一段距离，目前想用padding-right设置vw宽度来尝试）
收获：
盒子模型中边框border的妙用，图片在div中按比例自适应缩放，垂直居中的方法。
返回列表
评论