今天完成的事情：

1.初步学习flex布局。

2.初步学习用css模拟下拉列表。

3.完成任务六。

明天计划的事情：

1.开始做任务七。

2.主要用flex布局写，所以先好好学习flex。

遇到的问题：

1.用css模拟下拉列表，百度出来的内容有些晦涩难懂。理解了半天才算明白。

2.文本超出宽度时显示省略号出现问题。

要求左边的2015-7-5至2015-7-12碰到右边的25元/时就要出现省略号而不是屏幕右侧。

显示省略号的css要求元素不能是行内元素，也不能是块元素不然无法在一行，而行内块元素在屏幕变窄时会把右边的价格挤到下一行。所以都不可以采用。在师兄的建议下去学习了一下flex，解决问题。

 的

收获：

1.初步认识到了flex的强大，flex布局果然是神器。看了一两个小时阮一峰大神的flex教程。

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

跟着这个上面的教程跟做了一下骰子的点数，理解加深一点点。问题2是这样解决的：

将服务日期和下面的地址用position：absolute硬贴上去，然后给 2015-7-5至2015-7-12 和 25元/时 套一个父元素。设置父元素display：flex。高度宽度100%，设置 justify-content：space-between;（主轴对齐方式：两端对齐）align-items；（纵轴对齐方式：居中）然后设置左右margin到想要的位置。布局完成。

只是完成了这个小问题而已，皮毛都没有学到，明天还得好好看。

2.学会了文本超出宽度时如何显示省略号。上代码：

如果没用试一下设置宽度。一般会自适应文本宽度的。

以上是单行文本。多行文本如下：

overflow: hidden;同上

text-overflow: ellipsis;同上

 display: -webkit-box;         将对象作为弹性伸缩盒子模型显示 。

-webkit-line-clamp: 3;      （用来限制在一个块元素显示的文本的行数：3，则在第三行出现省略号）

-webkit-box-orient: vertical;       设置或检索伸缩盒对象的子元素的排列方式 。

3.大致理解了css模拟下拉列表的原理。

设置这三个为导航栏nav，并且也作为表头ul，li作为下拉选项。

注意要设置他们float，不然出现下拉列表的时候会有：

 设置float可以解决。

关键点在于设置下拉选项display：none；设置表头和副导航栏

}

就可以实现不点击的时候下拉列表不显示，鼠标悬浮时出现下拉列表。

最后要给这个页面的header设置index（在设置position为非static的情况下）。出现下拉列表可以挡住main的内容。