今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

1.更改重新提交了task4，更改了header里面“登录”字样的居中显示，更改了input栏在输入时候的样式。

2.task5的大概样式搞定了，现在是这样

，有几个地方还没有搞定，我写在下面了。

明天计划的事情：（一定要写非常细致的内容） 

1.完善task5

2.学习bootstrap

遇到的问题：（遇到什么困难，怎么解决的）

task4碰到的问题：

1.问题：登录字样没有完全居中

   解决：text-align:center;没法做到居中的原因是两边文字块的宽度影响了整体的宽度，所以把两边都改成绝对定位，就可以做到居中了。

2.问题：input在输入时的样式改进

   解决：样式方面主要有两个地方与设计图不符，不过首先应该确认的是正在输入状态的伪类是:focus，

              一个是因为input type=number导致右边会出现加减的按钮，而且是默认样式，很不好看，通过

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
}

input[type="number"]{
    -moz-appearance:textfield;
}

可以去掉。

           另一个是输入的时候会有边框进行高亮显示，这个边框并不是border，而是outline，设置为outline:none;就可以去掉边框样式了。这个属性的使用方法和outline基本一致。

3.问题：服务器文件已经更新了，但是输入网址访问还是原本的样式。

   解决：这个问题真的超汗，我找了好久，结果最后发现是缓存的问题…………

task5碰到的问题：

1.问题：背景图片的灰色遮罩的实现

   解决：查了一下网上的各种资料，最后选择直接在图片的html前面加了一个空白的div，设置成绝对布局，并且z-index设置为1让其更靠前，再把透明度设置成0.2，就可以实现设计稿上的效果了。

代码如下：

html：
<div class="cover"></div>
<img class="avatar-picture" src="images/picture.png" alt="头像">

css：
.avatar .cover {
    background: black;
    opacity: 0.2;
    position: absolute;
    top: 0.95rem;
    z-index: 1;
    background-size: 100% 3.25rem;
    width: 100%;
    height: 4.15rem;
}
.avatar-picture {
    position: absolute;
    left: 0.3rem;
    height: 1.7rem;
    width: 1.7rem;
    z-index: 2;
}

2.问题：专业技能这一行左边这一小块，很明显比placeholder小，所以没法用border了，怎么办

   解决：在前面插入了一个空白的span，并且设置相应的width，给span设置border。

3.问题（未解决！！！！）：下面的两行布局我是用table写的，但是如果给td都设置上border-bottom会变成

这个样子，可以明显的看见左边和右边的边框有分隔，下面还有双层边框的情况出现，但是因为我使用了:nth-child(odd)和:nth-child(even)的选择器，好像:nth-child(2)这样的选择器无法覆盖上去了，这种情况除了加class没有别的方法了吗？

我也尝试了一下给tr加border-bottom，但是不知道为什么显示不出来……

4.问题：还是昨天的问题，设计稿尺寸过大

   解决：我看了师兄和另一位同学给的留言，通过

content="width=device-width,initial-scale=0.5, minimum-scale=1, maximum-scale=1, user-scalable=no">

和

html {
    font-size: 400%;
}

双管齐下似乎解决了，现在在最小尺寸的320px上显示是这样的

收获：（通过今天的学习，学到了什么知识）

好多……

1.更熟练的交替使用float和absolute以及fixed，对流有了更深的了解。

2.对input相关的样式设置有了更深的理解。

3.对于ul里面li的一些样式，例如padding和margin的交替使用，更加熟练了。