今天完成的事情：

完成了任务8第2页和第3页，进行了任务的提交。

明天计划的事情：

将任务8的代码再过一遍，相关的知识点再复习一下；准备小课堂。

遇到的问题：

利用table来实现表格，进行表格嵌套的时候编辑器一直报错，但不明白原因。经过查找才知道，<table>可以嵌套，但必须嵌套在<td></td>里面，如下：

<table>

<tr>

<td>

      <table>

      <tr><td></td></tr>

      </table>

</td>

</tr>

</table>

在编写第3个页面的时候，发现中间的大图不随宽度变化而自适应。通过设置width：100%进行了解决。

main > img {

    width: 100%;

    max-width: 100%;

}

收获：

学会了设置li前面的小图标为背景图像：

.enterprise-all ul li {

    list-style: none;

    margin: 2rem auto 0;

    list-style-image: url(images/circle1.png);

}

链接选中之后依然有设置的效果（用focus伪类实现）：

.enterprise-all ul li a:hover, .enterprise-all ul li a:focus {

    color: orange;

}

在继续学习bootstrap教程，集合源码来看组件和功能，会发现更易于理解和记忆，也方便自己的学习和之后的改写。比如：

.container {  

padding-right: 15px;  

padding-left: 15px;  

margin-right: auto;  

margin-left: auto; }

@media (min-width: 768px) {  .container {    width: 750px;  }} 

@media (min-width: 992px) {  .container {    width: 970px;  }} 

@media (min-width: 1200px) {  .container {    width: 1170px;  }}

理解之后再进行相应的重写和覆盖：

<div class="container wrap">
     <div class="row" >
           <div class="col left"></div>
           <div class="col center"></div>
           <div class="col right"></div>
     </div>
</div>

.wrap{
    width:100%;  
}
.wrap .left{
    width:14%;
    margin-right:1%;
}
.wrap .center{
    width:65%;
}
.wrap .right{
    margin-left:1%;
    width:19%;
}
@media (max-width: 768px) {
    .wrap .center{width:100%;}
    .wrap .left,.wrap .right{display:none;}
}