今天完成的事情：

1.进行任务八界面二。

明天计划的事情：

1.完成界面二，着手界面三。

遇到的问题：

1.卡片内容换行不正确，出现很大一片空白。

查找资料，找到两条指令：

·word-break:break-all

·word-wrap:break-word

它们都能使容器内的内容自动换行，不过有所区别。word-break:break-all会强制截断单词，截断效果如下：

word-wrap:break-word要相对温和点，它会自动换行，不过不会打断单词。此处使用的是word-break:break-all。

2.卡片栏用的是bootstrap的样式。不过遇到一些问题。表格栏设置宽度，使用colspan和rowspan。

 ·td的colspan属性表示单元格所占的列数。

 ·td的rowspan属性表示单元格所占的行数。

例如

rowspan="3" colspan="4"

意为占3行，4列。以此可以调节表格宽度。不过实际使用发现后使用的colspan和rowspan并不能很好的调整。如下图，前两行使用了colspan：6，大盒子使用了col-指令，列最多应该是12列，6即为一半（不知此处理解是否正确）。故第一行和第二行应该各占一半。

第三行薪资待遇colspan：4，右边年限colspan：8。按理应该是4:8排布。实际效果却和一二行差不多。

查找原因发现，此处应该加一句

table-layout: fixed;

固定表格布局：（table-layout: fixed）

含义：

·固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局。

·在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。

即使用后每行将不再受上面的影响。

完成效果如图：

收获：

1.点击链接跳转到对应标题的方法：

<ul class="nav nav-pills direction-middle-1">
    <li class="nav-link word-direction-1">方向:</li>
    <li class="nav-item direction-top">
        <a class="nav-link word-direction" href="#">全部</a>
    </li>
    <li class="nav-item direction-top">
        <a class="nav-link word-direction" href="#font-end">前端开发</a>
    </li>

    <li class="nav-item direction-top">
        <a class="nav-link word-direction" href="#back-end">后端开发</a>
    </li>
    <li class="nav-item direction-top">
        <a class="nav-link word-direction" href="#direction-mobile">移动开发</a>
    </li>
    <li class="nav-item direction-top">
        <a class="nav-link word-direction" href="#Whole-station">整站开发</a>
    </li>
    <li class="nav-item direction-top">
        <a class="nav-link word-direction" href="#Operate">运营维护</a>
    </li>
</ul>

在标题href里写入id，id为每个大行的id。

<div class="container-fluid" id="font-end">
    <h4 class="direction-1">前端开发方向</h4>

2.了解了bootstrap表格的部分使用方法。但感觉调整样式特别麻烦。学会了使用word-break:break-all换行。

3.正在写遮罩的文字，明日完成。