做完task3

分header container footer三块

头部是一个超链接的图片（别忘加上alt）

中间是logo+一句话

底部是左右两张图+各一句话

1、整个HTML就设置个max-width然后margin居中，这样不会铺满。我选铺满。然后就是下面没

铺满的问题，这是我html中<meta name="viewport" content="width=device-width,

initial-scale=1.0">这句话没加上。

2、因为这里要用到字体，对于字体设置，在html中定义了一个基本字体大小为62.5%（也就是

10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ）。从上面的计算结

果，我们使用“rem”就像使用“px”一样的方便，而且同时解决了“px”和“em”两者不同之

处。

设置行高调整位置。背景色用QQ截图看。

3、头部那个后退键用加上超链接的，然后用我用padding调整位置，不用margin，因为margin

不会显示背景色。这和盒子的3D模型有关（从上到下，border->content+padding->bcg-img->bcg-color-margin）。

4、中间的logo和文字就用内容居中text-align，然后用padding调整下四边距离，文字因为第

二行也是靠左的，所以设置文字left。

5、底部两个div就一个浮左边，一个浮右边，内容居中。  因为用来float，所以要在父元素中

用overflow来撑开，父元素没设置高度的，按子元素来撑开。

6、一个拉倒最小宽度会出现问题，设置min-width:320px;就可以了

task4中

1、header就是可以代替<div>

在header中的a标签不能用text-align对齐因为a是inline元素，inline元素是不能有text-

align的。

有2种方法，一种设置为display：block 再用text-align对齐。另一种是用float， 注意消除

浮动。我才用float对齐。

关于一行字体的的垂直居中http://www.blueidea.com/tech/web/2006/3231.asp

就是line-height和height设置为一样高就居中了。

用了超链接的字体“关闭”和“注册”用text-decoration取消下划线color来设置颜色。

2、container中的a标签这里display：block 使得整个蓝色背景颜色水平铺满。

username的图标和输入框我用float的话会分成2行，就换了display:flex;来设置。

对于容器（父元素）设置flex-direction:row;按行从左到右排列。

对于项目（子元素）设置order来排列，数字越小越靠左。

input的提示语句可以用placeholder，就是点击后消失不会了。

3.还有垂直方向上的自适应不会做，输入框那条黑色的短线懵逼。

明天计划的事情：完成任务四中输入框的黑色短线，input的placeholder点击后消失。

遇到的问题：输入框的黑色短线，input的placeholder点击后消失。

收获：切图保存为png，基本字体设置，居中设置，float消除，代码在不同平台上正常显示。一行文字垂直居中设置，文字的下划线，字体大小颜色，背景颜色图片设置。flex布局应用。

贴上任务四的

成果链接http://119.10.57.69:880/jnshu3938/CSS/task4/task4.html

代码链接https://github.com/xuoutput/HTML-CSS/blob/master/task4/task4.html