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

1、完成了主体的前一部分。

         

  

    

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

1、尝试先开始写html框架，

2、开始主体的表单制作。

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

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

calc函数的简单运用。

任务总结：

任务名称：CSS-task8-9

成果链接：https://guilinxi.github.io/task8/task8-9/task8-1.html

任务耗时：本次任务从18.12.7-18.12.21 共耗时12天，期间请假两天。

官方脑图：

个人脑图：

任务总结：

刚开始接触任务八九我是懵的，什么下拉菜单，什么响应式布局，什么媒体查询，听着头都大。光一个首页的下拉菜单组件就已经磨了我三天，前面都是写移动端页面，写的内容比较少，而且做的是自适应，但这次任务8、9是做响应式的pc端，难度相比前面对我而言算是难度增加了不少，所以在这个任务中耗时过长，因为对于bootstrap库不是很了解，因为开始不会写下拉菜单，所以师兄们建议是引用去找模板复制过来再自己调整样式，这里就有几个难点了。

1、因为下拉菜单是引用的组件有很多库里样式，有一些是不需要的所以你要覆盖掉，所以这里就涉及到权重问题，怎么去找上级给你想要改变元素覆盖样式，开始对于这个不是太懂，怎么覆盖，问题就是需要在调试中找到需要修改的类名，然后找到上级再修改，方法给上一级类名加id或者新设一个类名，让权重高的自己去找，这样就比自己去一级一级的找要快很多，不懂的原因也是写的少了，后面写的多了就懂了，对于bootstrap这里学到一个方法就是重新建一个html文件，把组件单独复制过去单独调试好，这样避免自己设置其他的属性相互影响，然后去找问题原因就比较耗时间。

2、因为是响应式布局，所以就会运用到媒体查询，因为要适应不同移动设备样式就需要再改变它在不同分辨率下的样式，这个问题的解决方法就只能是使用媒体查询。不然在不同的分辨率下没有响应式的样式就会崩掉。所以响应式也可以理解为适应不同分辨率的设备的布局，让排版看上去好看并能适应相应的屏幕大小。

3、bootstrap栅格的运用可以是实现响应式布局，col-xs-sm-md-lg代表的是不同屏幕分辨率。

4、做的是网站页面，所以有很多需要设hover效果，这里的hover选择器伪类需要多了解下。

任务八九其实难点就在于怎么用栅格和媒体查询来布局，这点写明白了后面就轻松很多，遇到的问题基本上都在前面的日报上，这个任务是关键还是要好好做，不要担心耗的时间太长，积累后悔产生质的飞跃。

两个任务时间最晚是9天，我超时了三天，前面一个星期划水了，所以碰到问题还是要勇于去尝试面对，问题也会迎刃而解，不然就会像我这样浪费了一个星期的时间得不偿失。