今天完成的事情

任务八页面一

以上使用bootstrap栅格布局完成，上半部分4和8后面没有箭头，使用媒体查询来完成，代码如下

以上使用媒体查询直接完成，因为bootstrap将页面等分5分需要修改源码，目前不太熟练，暂不使用此方法

今天遇到的问题

问题：如上图，使用栅格系统，以上等分为4份，且四个部分之间没有间距，但是ui图中是有间距的

解决：可给上方四个盒子外各套一个盒子 ，四个盒子四等分，子盒子在使用padding来撑开距离。

今天的收获

1.加深了bootstrap和媒体查询的熟练度，今天的进度明显比之前快

2.bootstra当需要间距等分的时候，可以外面再套一个父盒子

3.盒子边框阴影的效果：

box-shadow 属性向框添加一个或多个阴影

语法

box-shadow: h-shadow v-shadow blur spread color inset;

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

1. 示例：     box-shadow:1px 2px 3px 4px #ccc inset；

2. 以上六个值的含义： 1px  从原点开始，沿x轴正方向的长度（倘若为负值，为沿x轴负方向的长度）；

3. 　　　　　　　　　2px  从原点开始，沿y轴正方向的长度；（倘若为负值，为沿y轴负方向的长度）；

4. 　　　　　　　　　 3px  阴影的模糊度，只允许为正值；

5. 　　　　　　　　　4px  阴影扩展半径；

6. 　　　　　　　　　 #ccc  阴影颜色；

7. 　　　　　　　　　inset  设置为内阴影（如果不写这个值，默认为外阴影）；

明天的计划

1.完成页面一剩下的底部部分页面

2.争取完成页面二，因为页面二头部和尾部和页面一一样的，所以只需要完成中间部分即可