今日完成的事

       完成任务八九

明日完成的事

       进行任务十

收获

      再进行任务十的时候发现这个图标我是用after来进行制作的，然而hover却没有反应，查看了相关资料发现需要先写：hover 再写：：after才有反应。

几天下来终于完成了任务八九，可以说熟悉了响应式网站开发的方式，看了下深度思考，梳理了下响应式网站的利与弊。首先维护成本低，无需开发多个版本，其次兼容性好，多平台，多设备也能适配，然后方便改动，可以只对页面改动，别的不影响。

不过改动的时候发现代码太多，响应时间变慢，图片加载太慢。

任务总结

      任务名称：CSS-task8-9      

      任务成果：https://tarzanshen.github.io/seventh-project/html/mission7.html

     任务耗时：2019.6.9-6.17

官网脑图

个人脑图

任务总结

     学习了bootstrap，第一次接触框架，任务开始熟悉属性花了不少时间，一开始以为使用这个框架必须使用已经封装好的css属性才行，时间浪费在记住属性上了。不过熟悉了使用方法之后就非常简单了，开发速度也越来越快，使用框架确实可以节省很多力气，在使用bootstrap的轮播图时，由于三张图片大小不一致，导致在缩放时整个页面会受到波及，调整图片大小即可。

    主要还是学会了bootstrap自带的导航栏还有轮播图。自带的栅格布局container表示容器里面包含row表示行，行中容纳col表示列，通过这个框架可以在页面缩放的时候，调整列宽来达到在不同分辨率下的不同，col表示针对对所有设备，col-sm表示平板宽度大于等于576px，col-md表示显示器，宽度大于等于768px，col-lg表示大桌面显示器，屏幕宽度大于等于992px，col-xl表示超大显示器，屏幕大于等于1200px。配合媒体查询可以开发出不同分辨率下的不同布局网页。

在设置样式时使用@media来调试样式，在and前后一定要加空格，，否则无效。html头上面要加上meta代码，虽然现在可以一键生成头文件，但还是得注意一下。<meta name="viewport" content="width=device-width, initial-scale=1.0">