今天完成的事情：

今天做完了任务6，巩固了一下前天学会的雪碧图

顺便提醒大家，制作雪碧图的时候一定要检查好是不是把所有图片都包括了。

我今天突然发现漏了张图，前天已经调好位置大小的图，今天又得重调一遍

做下拉菜单的时候学会了渐变色，我使用一个宽度为1px的div添加渐变背景色实现了中间的渐变分隔线

.line {

    width: 1px;

    background: linear-gradient(0deg,#fff, #ddd,#fff);

}

linear-gradient是线性渐变，中间的deg表示轴向，0deg就是从下往上渐变，后面的是起始颜色，至少两个，中间可以加入很多过渡色。

明天计划的事情：

明天开始任务7

遇到的问题：

1、在左中右布局的问题上，每次都会出现一些和预想不一样的情况，反复调整后才令人满意。

这个任务中也出现了很多次左中右布局。

总结一下套路：

前两个是中和右的布局

中间元素设置：

display：inline-block；

父元素中添加 text-align:center；

左边或右边的元素中设置：

float：left/right；

position：relative；

中间元素为block的时候要改为行内块元素inline-block，block的水平居中是设置margin-left和margin-right为auto，会占满整行，此时右边元素会下移

最后一张图中，页脚的左中右结构通过弹性盒子的justify-content：space-between布局实现。

2、左边文字的省略

遇到的问题：缩短页面宽度时，左边的文字不能隐藏

解决：师兄说弹性盒子要加宽度，不然宽度可以无限大。

因此为左边文字添加宽度 width：50%。

隐藏并显示省略号：

text-overflow: ellipsis;

    white-space: nowrap;

    overflow: hidden;

3、下拉菜单的添加

<select>

   <option>菜单选项</option>

</select>

下拉菜单文本居中：在select选择器中添加：text-align-last：center；

收获：

学会了渐变背景

学会了溢出隐藏，并用省略号代替隐藏部分。

了解了html的select元素，以及对其应用样式