今天完成的事情：

今天在做JS任务4，主要写了黑夜解密和法官日记两个页面。这是成果：

明天计划的任务：

继续写任务4的页面，争取明天都搞定，然后就是处理JS部分

遇到的问题：

遇到的问题如上面红色所标的部分。其中，第一个页面，感觉难点不再定位，而是半椭圆的画法。我花了好长时间，都没画好半椭圆。以前主要用css画圆或者半圆，或者一个完整的椭圆。因而，对border-radius的属性值所表示的意义并不是很熟悉，浪费了很多时间。但是想的是设置底部border，然后border-bottom-left-radius和border-bottom-right-radius均设为100%；以为这样就OK了。结果发现根本不行，画出了很奇怪的图形。最终，通过Google，找到了一篇不错的帖子：http://www.w3cplus.com/css3/css-secrets/flexible-ellipses.html。终于解决了该问题。感觉个人对border-radius的理解错了。border-radius分部在四个角上，每一个border-radius其实可以设置两个值，如果只设置一个，表示两个值均相同。例如，左上角，border-top-left-radius:100% /50%;表示左上角水平方向圆角为100%、垂直方向圆角为50%。

另外，这个页面，感觉最主要的问题还是外边距合并的问题。其实，这条最长的竖线表示ul的左border，但是由于ul内的li垂直方向有margin，因而导致了外边距合并现象，使得border根本无法与上面的横线和半椭圆部分连在一起。通过对父元素ul设置overflow:hidden；可以来消除外边距合并现象。其实除此之外，这个页面还有其他部分也存在外边距合并现象，不过注意对父元素设置overflow:hidden就可以解决问题了。

第二个页面的问题，也标出了。主要是对左右两边套了div，并加了浮动，最终导致图片不能和"黑夜解密"这几个汉字的底部对齐。最终使得在header的垂直方向，上面比下面的距离要小一些，暂时也没有很好的解决方法。只是感觉不用浮动，或者对父元素设置display：flex加上align-items:center；可以解决这个问题，但是代码和思想都过于复杂了。

收获：

深入学习了border-radius的问题，并认识到了外边距合并的利与弊。外边距用的好，可以做出很神奇的效果。但是，如果忽略了这个问题，可能会产生意想不到的错误。因而，个人认为，应该充分理解外边距合并问题，并知道如何消除它的影响。当然，最重要的是，，巧妙运用这种现象，做出一些神奇的效果。