css-任务八，九-总结

任务名称：CSS=TASK8-9

成果链接：https://zhanglinqian.github.io/HTML/task8/html/home/Home.html

任务耗时：　2019.6.25-2019.7.1    共6天

官网脑图：

技能脑图：

任务总结：

1.css8-9学习bootstap布局，然后学习媒体查询，学习table布局。

   要了解bootstrap，首先必须要知道它是一种前端框架，用来优化前端界面的。提供优雅的HTML和CSS规范，能够响应式布局，兼容PC端及手机端。这个好处就是我们只需要制作一版就可以适用于手机端和PC端，而不必花费精力去制作两版，这样大大提升了我们开发的效率。

2.任务8和9是做官网页面，任务8没有要求响应式布局，任务9要求响应式布局适应各种屏幕。任务8和9放在一起做，使用bootstrap栅格布局，栅格布局中响应式中应用很方便，有问题的是地方就会盒子嵌套太多了，代码量增加，响应式导航栏和轮播图都可以用bootstrap实现，三个页面头和尾是可以通用的，减少了一些工作量，页面2中合作企业中，文字长短不一样，设定一个固定的width固定文字长度实现对齐效果，页面三中需要注意的是hover出现的时候要有动画效果。

      4.display：table的应用

          td默认设置display：table-cell;tbody默认vertical-align:middle;tr、td继承tbody的设置table-cell属性值可以让元素渲染为表格单元格，轻松实现让子元素水平垂直居中

         父层：display:table-cell;
                   text-align:center;
                   vertical-align:middle;
         子层：display:inline-block;