今天完成的事情：

1.完成任务8.1自适应

2.完成任务8.2页面

明天计划的事情：

完成任务8

遇到的问题：

1. 实现下图hover效果，理解psd应该为鼠标悬浮在<a>标签上的时候，前面的圆点也产生hover效果。也就是说选择一个元素，在另一个元素上产生hover效果。

前面圆点使用div边线实现，

.dots-orange{

    float: left;

    display: inline-block;

    margin: .15rem .05rem 0 30%;

    width: .1rem;

    height: .1rem;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    border-radius: 50%;

    border: .01rem solid #ff650e;

    background: transparent;

}

将背景设置为透明，当鼠标悬浮在<a>上时，此div也出现hover效果，由于两个元素为兄弟元素，所以使用选择器：

li a:hover+.dots-orange{  background:rgba(255, 101, 14, .5)；为div加上hover效果；此时效果并没有出现。

解决方法：

查阅资料发现兄弟选择器只能用于向后选择，所以当<a>标签位于<div>之后时此方式失效，虽然选中了<a>标签，但是没有施加属性的对象。将<div>放在<a>标签后面，使用浮动将<div>挪到<a>标签前面。

2.为了达到自适应要求，使用栅格（同一种布局下）不可能兼容所有尺寸的屏幕，即使bootstrap提供了使用比较广泛的栅格，但是在多列排版时，依然会因为分列不合理二产生各种各样的问题。

上面使用了两种栅格布局，但是在屏幕继续缩小的情况下，6列已经不能满足需求，将6改为12又会导致在稍大的屏幕上浪费大量空间。

解决方式：使用媒体查询：调试合理的分辨率设为分界线，让浏览器在不同的分辨率下显示不同的布局。但是这样的方式如何实现

1️⃣ 在布局相同，没有引入其他构件的话可以设置不同分辨率使用不同的css文件，这样的好处是加载速度快，节省资源

2️⃣ 需要变动布局，且引入的其他构件，可以让某些元素显示，某些不显示，这样页面的适应能力强，但是加载了大量的资源，响应速度可能会受到影响。

收获：

1.list-style 具有许多属性，其中一个可以方便任务的是circle

2.复习的类选择器，后代选择器，加深印象

3.如果对块元素设置了阴影，外层盒子没有预留margin空间，会导致阴影不可见。