其实今天做的是任务4，由于任务3还在审核中就提交到这了

今天事情不多，做了好久写了很多，学习了position之后发现有些功能可以用多种方法实现，就尝试了一下，能不能达到上品的标准呢

今天完成的事情

1.切图，将图片保存在images文件夹中

2.新建html文件，及css文件，并在html文件头部进行链接

根据设计图将页面分为四部分

在css文件中设置body的外边距为0以消除浏览器默认边距（不消除的话有白边）

1.   html,body{  

2.       margin: 0;  

3.       height:100%;  

4.   }  

设置header

由于关闭、登陆、注册位于同一行，所以用行内元素span

设置注册及关闭块绝对定位 position:absolute; left:15px/right:15px

为了使登陆实现居中

方法1：设置登陆块margin:auto,父元素设置text-align:center

方法2：设置登陆块绝对定位，position:absolute;left:50%;margin-left:-18px(块登陆的宽度的一半)

设置输入框

box块与上一块的缝隙

方法1：设置box块上边距 margin-top:7px

方法2：设置box块相对定位，第一块top:7px,第二块top:14px

方法一较简单

输入框内提示文字，在html中input标签中添加placeholder="提示信息”

更改提示信息样式

1.   input::-webkit-input-placeholder {    

2.             /* placeholder颜色  */    

3.            color: #bababa;    

4.            /* placeholder字体大小  */    

5.            font-size: 16px;    

6.        }   

设置密码框输入值加密设置type="password"

现在输入框获取焦点时会显示边框，去掉获取焦点时的边框在css中加属性outline:none;

块内插入图片

方法1：html中直接插入图片

html文件中

1.   <div class="box"><img src="images/icon1.png"><input type="text" name=""></div>  

为box设置样式line-hight:50px，图标下移但是仍不能上下居中，但是文本框可以

1.   .box{  

2.       height: 50px;  

3.       width:100%;  

4.       line-height: 50px;  

5.       background: #ffffff;  

6.       margin-top: 7px;  

7.   }  

设置图标上下居中，为img设置vertical-align:middle;

方法2：采用设置图标为背景图片的方法

html文件中

1.   <div class="box1"><input type="text" name=""></div>  

css文件中

1.   .box1{  

2.       height: 50px;  

3.       width:100%;  

4.       line-height: 50px;  

5.       background: #ffffff;  

6.       margin-top: 7px;  

7.       background-image: url(../images/icon1.png);/*图片路径*/  

8.       background-size:14px 21px;/*图片大小*/  

9.       background-position: 20px center;/*图片位置*/  

10.     background-repeat: no-repeat;/*图片不复制*/  

11. }  

12. input{  

13.     line-height: 25px;  

14.     border: none;  

15.     border-left: solid 1px #bababa;  

16.     padding-left: 15px;  

17.     width: 70%;  

18.     position: relative;  //相对定位

19.     left:55px;  //向左偏移

20. }  

设置登录按钮及忘记密码块

在css中设置字体、背景颜色、高度、颜色等属性，忘记密码块向右浮动

知识点：

position属性

static：（默认）无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。

relative：（根据自己原来的位置定位）对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

absolute：（根据父级元素border定位，父级元素margin变化会跟着移动，padding变化不动）对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

fixed：（相对于窗口定位，弹窗广告效果）对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。

input组件

type="password"设置密码不显示

placeholder="提示信息”设置提示信息

    css中更改提示信息样式input::-webkit-input-placeholder {}  

css中添加outline:none;避免获取焦点时显示输入框边框

明天计划的事情：

任务4可以提交的话就开始任务5 

遇到的问题：

用方法一向块内插入图片时，给box块加line-height=块高度，发现输入框可以垂直居中显示，但是img图标虽然下移但不居中，原因是什么？

解决方法：为img设置vertical-align:middle;后图标可以垂直居中

收获：

position属性，input标签