发表于: 2017-04-14 23:55:01
3 535
今天完成的事情:修改JS任务2-4的样式,完美适配各种宽度
明天计划的事情:搞JS5的接口
遇到的问题:
JS2-4的玩家身份盒子,保持正方形,因为这个页面是640px,没有铺满,我用的办法是给盒子用的固定宽度,然后设置媒体查询max-640px,给盒子的宽度设置VW单位,高度设置VH单位,调成正方形,这样无论怎么缩都是正方形了,而且因为是从640PX才开始缩,所以320PX下盒子也不小,建议你看一下,写的太好了。
JS5的登录页,背景图片完整显示,不出滚动条,我背景图片是给的<main>,给它设置100vw,100vh,然后设置背景图,加一条
background-size: cover;
cover | 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。 背景图像的某些部分也许无法显示在背景定位区域中。 |
让登录框纵向横向都居中,一开始写一个大DIV,用绝对定位top 50%,
然后在margin-top:-这个DIV的高度,然后达到了垂直居中,然后再这个DIV里加登录框,margin:0 auto,就完成居中。后来被BB换了一种方法,参考了明天要审我日报的人。只写一个登录框,然后
position: absolute;- top: 50%;
- transform: translate(-50%);
- margin-left: 50%;
- margin-top: -19.5vh;
- 其实没懂啊,不知道比我之前写有什么优点。。虽然只用写一个DIV,但是更难算。。
配置nginx一脸懵,不知道自己要做什么,然后在小99的耐心指导下, 一步一步的搞,然后就踩坑了,然后小99说因为和他的版本不一样所以他不知道为什么,然后我就去重新下载和他一样版本的。
现在是23.43分,下载速度1kb/1s,所以今天12点之前应该搞不好了。
收获:小课堂了解了正则表达式,原来表单输入框的实时检测是用正则表达式实现的。
学习资料要看的HTTP协议入门,在网上看的阮一峰的,讲真没看懂
还有ajax XHR看的高程上面的,讲真还是没看懂,
今天就把墙翻了,把postman下好了。
知道了transform:translate(x,y)这个属性,两个参数,一个沿着x轴移动,一个沿着y。
知道了calc属性,设置宽度高度的。
.box{width:-moz-calc(100% - 50px);width:calc(100% - 50px);background:#eee;}
calc()里面的算式,是根据他的父级元素来计算,比如上面的这个width:calc(100% - 50px) 意思是他的宽度是他父级的100%宽度-50px,感觉这个属性很强,虽然我还没有用过。
干货这么多给个上品吧老铁
评论