2018.6.5

今天完成的事情:

1.提交了任务四并审核通过

2.学习了css编码规范

3.任务五做了一个demo

4.如何使input宽度的自适应

明天计划的事情:

1.任务五提交

2.任务六做一个demo版本出来

遇到的问题:

1.切出来的手机和密码图标其实是要用雪碧图来制作的,本周任务紧,如果没时间的话这个还需要之后再学习

收获:

对任务四进行下总结

1.表单Input以及button的使用

2.position:absolude和fixed的用法,也就是定位的属性需要熟悉

3.其中在position:absolute下如何使得文字居中

a.父元素设定line-height属性

b.利用transform:translateY属性

4.在input左边有块元素的情况如何实现input的自适应

a.left: xrem; width: calc(100% - xrem);

b.在position:absolute加上left: xrem; right:0;

c.width: 100%; 父元素:overflow:hidden;

5.间隔线如何产生

a.建立一个div元素,定义width：1px；height：25px；使用display:inline属性,将其变成行内元素

b.使用伪元素来实现,比如:

.phonenumber::after{

        content: "";

        width: 1px;

        height: 60%;

        background-color:#eff0f4;

        position: absolute;

        left: 1.1rem;

        top: 20%;

c.利用boder-left属性,比如:1px solid #00F

6.注册的手机号如何限制只能是11位的数字

<input name="phone" type="text" onkeyup="value=value.replace(/[^\d]/g,'')" placeholder="11位手机号码"  maxlength="11"/>