发表于: 2016-05-01 21:13:04
1 1452
今天完成的事情:
1:完成了TASK5-1,写完表头和背景之后,下面的内容部分参考古尘师姐的思路用列表来写简单很多;
2: 开始写TASK5-2 遇到点问题,还在群里问师兄师姐
明天计划的事情:想这几天刷基础,到线下能尽快跟上不拖累大家,也想把TASK往后面做一点,现在有一些对5-2的思路,晚上和明天就想完成任务5.
遇到的问题:
今天遇到的问题比较多
1:发现可以从Chrome里面看到字体大小,又去看了下html里面出invalid property value,百度了下是赋值无效的意思,检查代码;是中文状态。现在发现Chrome看CSS很方便找错。
2: 添加margin-top,在PSD里面量的 像素/所在框的高度,发现不适用,然后拿浏览器里面实际数据去算,35px/5% 发现是浏览器的宽度。
http://www.webhek.com/vertical-percentages-are-relative-to-container-width-not-height/
竖向百分比参照的是容器的宽度而不是容器的高度。
3: 在古尘师姐的代码 background: white url("face.png") bottom center /70% no-repeat 这里面的 /70% 应该是表示background-size的,但是没明白为什么前面要有/,去掉或者单独设置background-size都会出问题,还没找到原因。
4:
上面右边的小图标我设置的是相对头部条进行绝对定位,按照PSD里面的像素 去 除父系(头部条)的宽度
结果应该是3%,设置TOP:3%结果就是这样太靠上了,看了@古尘师姐的设置是20%,不知道是怎么算出来的。
学到了哪些东西
1: 背景设置的缩写 http://www.jb51.net/css/23213.html
background:#FFF url(img) no-repeat fixed x y;
no-repeat: 是否重复 或者X/Y轴重复
fixed(不滚动)和scroll(滚动) 缺省是scroll
X Y 定位背景图
2:button是inline-block元素,居中用margin:0 auto没有,要使用text-align: center
收获:今天思路比较清晰,不像刚开始看到PSD完全不知道该怎么下手了。
评论