今天早上拿着辞职报告去公司签字，跑了一小时，告诉我人力的部长去开会了，不开心。听之前辞职的同事说他跑了十八个部门才办完所有手续，我的天，万恶的国企。我回宿舍之后继续昨天未完成的东西。

昨天写完代码，只是页面上看着可以，可是在手机端完全就是屎啊。。。

回来之后我分析了一下感觉应该是逻辑上的错误，我重新布置了一下各个div，看起来好多了。

写完日报我再去公司转转，刷刷脸去。

今天完成的事情：对昨天代码的修改，使它在pc和移动端都可以看了。主要领悟到的事情还是这个块状元素。

 手机端：

明天计划的事情：进行task3的总结（今天晚上吃完元宵就回来总结），task4的分析。

收获：对于块浮动的理解。

       先定义一个块1，这个块宽度100%，高度是这个页面的高度。在块1里边定义一个块2，用左浮动，宽给定一个10%，高给定一个值（这是相对块1来说的高）；然后定义一个块3，还是用左浮动，那么只要宽度不大于90，就跟块2在一行排列。如果不给定浮点，那么这个块会和块2左对齐。

      我在这个里边定义了两个大的块。

在我的top这个大块中使用了

{
    color: white;
    width: 100%;
    height: 10%;
    background-color:#22292c;
    margin: 0 auto;
    overflow: hidden;
}

这个overflow：hidden；是防止溢出，对另外块造成影响。

问题：通过上边的那个图也能看出来了，右边那三个点点为什么那么靠上。。

  那三个点点我的代码如下    （这个块包含在上边的那个top块中）

{
    float:right;
    text-align: right;
    width: 25%;
    height: 100%;
    margin-top: 3%;
}

      我知道肯定是margin-top的问题，可是看下图：

这是pc端显示的，这三个点点为什么这么靠下啊。。。。。。。。。

丧心病狂的东西。。一定是哪里出错了。但究竟是哪呢。。。

还有一个地方更丧心病狂：

看到了吧，就是左边的那个返回的标志，我在想是不是切图的问题，但应该不是啊。

我贴上代码：

{
    height: 50%;
    width: 8%;
    float: left;
}

就这么个东西，height设定为50的时候，手机上显示刚刚好，可是pc上这是什么东西。。如果改的话，pc上显示正好，那手机端就小了。。。。什么啊啊

看到我这日报的大神给指点一下吧。。

我发表之后就去公司了，晚上回来看看。

-------------------------------------------------------------------------------------------

吃完回来啦，祝大家元宵快乐

回顾一下今天对代码的改进：先对整体body的设定，然后用*{}归零，再设定两个大div块。

在上边div中再左浮动，设定宽高，上下位置用margin-top 。然后text-align是块中东西的位置。

字体大小最好用em，或者rem，用rem时现在html中设定个基础值font-size：14px，也就是1rem=14px

如果块状元素中有图，在.xx下边再设一个.xx img{}在这里边设定大小。恩。