发表于: 2016-03-20 11:03:33

1 1772


今天完成的事情:

1、把所有task完善一遍,找巫焘师兄闯关,指出了一些问题,改了一部分;

http://www.kt1123.com/


明天计划的事情:

1、休息;

2、晚上继续修改问题;

3、康总讲课笔记;

4、老大说每个人都要想想官网首席新制度;


遇到的问题:

自己完善过程中发现的问题:

1、Q:task1中如何实现9个square在container中完全居中,且可以自适应;

     A:父元素container设置width:100%;max-width:640px;(后面几个task的psd图上宽度都是640px,应该是一个常用宽度),子元素square设置width:32%;margin:1% 0 0 1%;于是横向3个square的总宽度就为32%*3+1%*3=99%,剩余1%与square的margin1%相同,实现水平完全居中。同理,竖向3个square的总高度也为99%,但是由于父元素container未定高,所以剩下的1%只能通过container的padding-bottom实现,而padding属性与父元素的width有关,于是需要在container外面再套一个wrap盒子,将container的max-width:640px改到wrap中去,再加一个水平居中margin:0 auto就oki了~

(PS.其实这个是我今天纠结最长时间的,但是闯关直接忽略不计了...)


2、Q:task3用F12模拟移动设备时,部分页面底端有一段空白

     A:@375 碎琉璃 和@221 并不能愉快地划水 师弟都提过这个问题,先前我是用padding-bottom强行铺满的,现在想来,高度自适应的情况下,不能铺满所有设备,是很正常的现象,我的页面高度撑开只有975px,所以在高度大于975px的设备上显示不全(PS.task3中psd图中有错别字,应该是“以及”而不是“以下”)


3、Q:task4中button的字体与body字体不一致

     A:button有默认字体,会覆盖body字体,加!important也没用,可以在button中重新定义一下字体


4、Q:task4中,“登陆”两个字中间的空隙如何实现

     A:可以用&nbsp或者letter spacing (PS.“登陆”是错别字,应该为“登录”)


5、Q:task4中,img和input如何对齐

     A:img设为inline-block,然后两者都设置vertical-align:middle


6、Q:task5本地文件打开,页面中部分字体变了,而且字号变得好小,网站上就是正常的,以为本地文件出问题了,从网站上下到本地,还是有问题,但是发给@张琦 ,他打开就是正常的,然后我重启了电脑2次,还是不行

     A:又不知道是什么幺蛾子问题,反正网站上是正常的,不管了,后面的task做了没多久,直接这样去闯关吧

       (PS.晚上打开的时候,又神奇地好了....)


闯关中发现的问题:

1、task4和task5中,两行并列的图片和文字或者两行文字,缩小到一定分辨率后,后面一行会挤下去

2、task6中,“捉鬼猜词版”后面的小箭头,缩小到一定分辨率后,会跟文字重叠

(后来想起来,师兄看漏了task6后面的两个界面,task6-2做的很稀烂,明天再改一下)

3、task10、11、12中,缩小到一定分辨率后,响应式布局的内容未在页面中居中

4、task11中的box中间的line1的图片,在某个分辨率下,会压在border-bottom上


收获:

先前自己检查的时候,都是直接用F12查看全屏、ipad和手机几个分辨率下的效果,没有注意过,分辨率渐变的情况下,可能出现的问题,不够严谨

感想:

这几天生物钟好混乱,要慢慢调节过来




返回列表 返回列表
评论

    分享到