今天完成的事情：

1、完成了task8-1首页的布局和样式的制作。总的还可以吧，不是很丑。完善了task8-2和task8-3中不同屏幕宽下用bootstrap，可以对xs sm md lg设置不同的列数来达到适应。

2、对PS中的切图后保存为png后会有一些jpg图，这里选择保存后应该选择一遍你要的切图，然后选中会变成黄色的外框，然后选择格式保存。

3、这里还用到了box-shadow，语法是box-shadow: h-shadow v-shadow blur spread color inset;，一般就用类似box-shadow: 10px 10px 5px #ccc;就好了。

4,、对于友情链接这块，前面的小黑圆点可以用list-style-type这里用到了disc也就是实心圆。

有需要还可以通过改变content内容即可替换其他各种标记形状了，color可以控制标记的颜色，font-size可以控制标记的大小。如

li::before{

  content:"★";

  color:blue;

  font-size:30px;

}

还有就是这里的li的排列：

1这里可以不用bootstrap的给他们每个分配一个div col-xs-1 col-sm-3 col-md-6 col-lg-12用作不同屏幕下的列，只需要给每个li设置好宽，然后float就行。

2、当然这里还是可以用bootstrap的，col-xs-12情况下只需要用flex来先左对齐，但别用nowarp了，要换行的。就行了

明天计划的事情：做下task8-1首页的轮播图，开始task9的任务做一个响应式的网站。

遇到的问题：轮播图

收获：flex布局挺好用，但有时候要注意用了之后别忘了这里干了什么，我就是忘了li处用了nowrap的情况下搞不出来了换行。bootstrap在不同屏幕宽下用不同的col。

成果链接http://119.10.57.69:880/jnshu3938/CSS/task8/task8-1/task8-1.html

代码链接https://github.com/xuoutput/HTML-CSS/blob/master/task8/task8-1/task8-1.html

成果链接http://119.10.57.69:880/jnshu3938/CSS/task8/task8-2/task8-2.html

代码链接https://github.com/xuoutput/HTML-CSS/blob/master/task8/task8-2/task8-2.html

成果链接http://119.10.57.69:880/jnshu3938/CSS/task8/task8-3/task8-3.html

代码链接https://github.com/xuoutput/HTML-CSS/blob/master/task8/task8-3/task8-3.html