发表于： 2017-03-09 23:26:54
2 621
一、今天完成的事情：
1、解决了input前面插入图标问题，用div实现输入框前面有个竖线；
2、完善任务4，填写注释；
二、明天的计划：
熟悉任务5；
三、遇到的问题：
1、一直不会再input中插入图片，查找资料后，发现需要在其父元素中添加背景；
2、input输入框前面有个竖线，不会实现，询问师兄后，通过div设置一个1px的宽度加背景色，实现；
3、最后面登录按钮width无法铺满页面，询问师兄后，发现是input设置padding-left导致，更改代码后登录按钮显示正常；
四：收获：
1、学会了怎么在input中添加图标以及怎么控制图片大小，需要在其父元素中添加背景图片，通过background: url(01.png) no-repeat #fff left;
background-size: 2.5rem和在input中设置其背景为none来实现；
2、学会了怎么在input前面添加竖线，通过div设置1-2px的宽度加背景色实现；
3、了解了em和rem的区别：
“em”是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值，，在根元素中设置多大的字体，这完全可以根据自己的需要设置；
推荐一个对em和rem说明较为详细的文章：http://www.w3cplus.com/css3/define-font-size-with-css3-rem
4.巩固了设置button样式的知识，通过设置cursor: pointer属性来让button点击时显示手指的样式；
返回列表
评论