今天完成的事情：

1. 任务四刚写完，趁热乎写点有关任务四的问题和想法。

今天上午刚看了CSS权威指南的上浮动和定位一章，结果下午的任务四立刻就用到了，所以相对以前，任务四做的稍微轻松了那么一点，至少不再是两眼一抹黑，满世界的找资料的状态了。

带有“关闭，登陆，注册”字样的头部应该是任务四的重点，其中最大的问题就是居中。让这三块文字左中右分布且垂直居中的方法有好几种，例如text-align+line-height, flex和position。

1) 第一种居中方法比较简单，是常用text-align和line-height，这两种属性的结合完全可以满足任务四的需求，且不存在兼容性问题，但缺点是无法达到任意移除一块或多块文字而余下的文字仍在其原位的要求。因为这种方法下，三块文字仍处于正常的文档流中，任何一块消失都会引起相邻文字块的位置变动。具体实现方法如下：（以下代码是缩略版，只为实现水平和垂直居中功能）

header{

    height: 0.9rem;            /*为父元素设置一个高度*/

    line-height: 0.9rem;     /*将行高和高度设为一样的数字，即可实现单行文字的垂直居中（仅限单行文字）*/

    text-align: center;        /* 可实现文字的水平居中 */

}   

到这一步还有一些问题，这时左边的关闭和右边的注册会紧挨着中间的登陆一起挤在头部中间，为了使其呈左中右分布，可将关闭文字float：left，将注册文字float：right，即可达成目的。

2) 第二种方法是利用flex进行居中，flex是一种新的布局方式，能够轻易的实现各种复杂的布局，且好用易学，性价比超高！推荐阮一峰的教程。缺点就是对一些老旧版本的浏览器不大友好。这种方法要想实现任务四的头部居中只需两三行代码即可：

header{

     display: -webkit-flex;                      /*兼容处理*/

     display: flex;

     justify-content: space-between;    /*使文字 左中右 分布*/

     align-items: center;                        /*文字垂直居中  */

     height: 0.9rem;

}

就是这么任性！但是这个方法仍然不能满足任意移除一块或多块文字而余下的文字仍在其原位的要求（只满足一种状况：中间的登陆文字被移除时，关闭和注册会待在自已的原位置）。

3) 接下来要出场的就是position中的绝对定位，这种方式可以满足任意移除一块或多块文字而余下的文字仍在其原位的要求，只是代码要比以上两种方法要多：

header{

    position: absolute;   /* 为父元素设置相对定位*/

}

/* 关闭 */

.close{

    position: absolute;                   /*子元素设置绝对定位*/

    top: 50%;                                  /*top为父元素的50%(一半)即向下移动到父元素的一半位置处*/  

    transform: translateY(-50%);    /*；利用CSS3中的transform将子元素在Y轴方向上（即向上）提升自身高度的一半*/

}

/* 注册 */

.login{

    position: absolute;                   /*同上*/

    top: 50%;

    transform: translateY(-50%);  

}

/* 登陆 */

.signin{

    position: absolute;                /*子元素设置绝对定位*/

    top: 50%;                              /*top为父元素的50%(一半)，即向下移动到父元素的一半位置处*/ 

    left: 50%;                              /*left为父元素的50%(一半)，即向右移动到父元素的一半位置处*/ 

    transform: translate(-50%, -50%);       /*；利用CSS3中的transform将子元素在X, Y轴方向上分别移动自身高度/宽度的一半*/

}

因为绝对定位已经脱离了正常的文档流，所以一个或多个元素的消失，并不会影响到其他元素，他可以完美的达到任务要求。

2. 主体部分文本框和密码框的设置和placeholder和更改都比较简单，度娘上遍地都是做法，但是input中的图片及图片右边的分隔线也算是一处难点，此处也有三种实现方法。

1)  第一种是比较偷懒的方法，就是在切图的时候连同将图片极其右侧的分隔线切为同一张图，然后将其设为input的背景即可，实现方法如下：

input[type=text]{

    background: url(images/iphone.png) #fff no-repeat 0.3rem center;   /*将input的宽度设为100%，将图片设为背景，不重复， 背景图所在位置是水平居左，垂直居中*/

    padding-left:   一个合适的值;        /*再为input设置一个合适的左padding值即可*/

}

/* 密码输入框的背景图片设置 */

input[type=password]{

    background: url(images/locked.png) #fff no-repeat 0.3rem center;  /*将input的宽度设为100%，将图片设为背景，不重复， 背景图所在位置是水平居左，垂直居中*/

    padding-left:   一个合适的值;         /*再为input设置一个合适的左padding值即可*/

}

2) 使用position+span；这种方式需要我们自已制作出一个分隔线。利用span模拟出一个类似的分隔线，然后利用定位的方式将模拟出的分隔线定位在合适的位置上，如下：（input的宽度100%）

/* 设置背景图片右侧的分隔线 */

form{

    position： relative；     /*将父元素设置为relative;*/

}

/*利用span模拟分隔线*/

form span{

    position: absolute;        /*将子元素设置为relative*/

    left: 1rem;                                   

    z-index: 1;                                   /*浮在最上层*/

    height: 0.55rem;                         /*设置高度*/

    width: 0.02rem;                          /*设置宽度*/

    background-color: #eaedee;     /*设置颜色*/

}

 /*文本框的分隔线*/

.phone-line{

    top: 0.375rem;                          /*通过计算使其在input中垂直居中，这里的计算比较麻烦*/

}

 /*密码框的分隔线*/

.pwd-line{

    top: 1.525rem;                          /*通过计算使其在input中垂直居中，这里的计算比较麻烦*/

}

3）将图片放置在input的左侧，然后为图片加上右边框，这种方法最简单也比较合适，推荐。（具体代码略）

明天计划的事：

1. 继续看权威指南，这本书好像有些老了，里面有很多内容和浏览器上显示的不一样，一开始还以为自已做错了，怎么找都找不出来毛病，各种暴躁。老话说得好，尽信书不如无书。

2.继续写任务。

遇到的问题：

暂无

收获

如上。

编辑日报内容...