今天完成的事情：

通过任务8，学到了很多。。。

明天计划的事情：

任务9完善工作开始，目前task8响应式做的还不好

遇到的问题： 

关于图片在盒子里的定位问题

同时文字多少不确定，导致盒子大小不一致

收获：

1.多用html5写语义化标签，这个是任务8主要练习的

有article，section，nav，main

学会了写“原子类” 比如green gray bold 等样式类，一起放到common.css里方便使用

2.整体布局用的

<div class="container-fluid">

<div class="row">

<div class="col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0">

这里进行列嵌套,写内容

</div></div></div>

3.header上3个小icon，学习使用雪碧图进行布局，减少img请求

4.  nav使用 bootstrap自带的折叠菜单，省的写js

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">  //重点是target到下面的id

<span class="sr-only">导航</span>  //这是给残疾人阅读用的？

<span class="icon-bar"></span>  //这里要改颜色

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<div class="navbar-brand"></div> //放logo

</div>

<div class="collapse navbar-collapse" id="navbar-collapse">

<ul class="nav navbar-nav"> <li></li><li></li><li></li>XXXX

5.banner 用js写，方法有很多，用的最简单的切换opacity

6.学会用boxshadow 代替border，outline也不错

7.有的东西用px写还是很方便的，比如写几个小圆点

.student-pages-circle {

padding: 5px;

display: inline-block;

border-radius: 50%;

background-color: white;

box-shadow: 0 0 10px lightgray;

}

8.因为盒子内文字不同，但是盒子的高度还是要相同

先直接定好外盒子的高度，用的width配合padding-top，然后让文字绝对定位在这个student-card这个盒子里

还尝试了直接给p这个段落写height：130px,效果也不错，省的绝对定位了。

9.最下面的5个公司很让人头疼，用bootstrap不能平分

最后用flexbox配合媒体查询写的

感觉也不错- -还方便对齐，一个align-items：center就好了

10.需要改进的还很多，还有很多思路想法没有整理，明天继续- -