今天完成的事：完善任务六

明天的计划：完善任务六，查看任务七

遇到的问题：

问题：

1、css模拟下拉框时，出现文字不居中。

2、顶部的两个按钮组中间有间隔。

解决：

1、我给它一个宽度，加上代码：left: 50%;transform: translateX(-50%);根据问题解决问题。居中用text-agin不居中，那么用margin： 0 auto；如果都没有自己想要的效果。在尝试其它方法，总有一个方法会成功。

2、这是由line-bock元素带来的，我的解决方法是用了负的margin-left：-10px解决的，它的解决方法还有很多种很多种

今天的收获：

一、完善了任务六顶部导航的三个下拉小图标，用css模拟出了下拉的效果。我用的是ul嵌套，在第一层的li里面嵌套ul。这时候先让嵌套的隐藏，然后当鼠标经过第一层的li时，在让隐藏的ul显示。这里用到的隐藏属性是display：none。然后就是小细节，具体的位置和其它的就看个人喜好调。

二、顶部的按钮组完善了。了解了为啥之前的按钮组中间总会有一个小空隙，这是有inline-block元素带来的。要消除这个空隙，有很多中方法。例如：

1、margin-left: -4px；2、font-size: 0；3、letter-spacing: 0;4、  word-spacing: 0;我的解决方法用的是负值margin解决。去除空隙方法可参考：https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/

三、我把顶部导航栏的三个小灰色角标换成了用css画，之前是用PS抠图的下角标，放在雪碧图里显示，今天把它换成了css直接画，不用雪碧图。代码如下：.nav li .more{margin-left: 20px;margin-right: 5px;border-width: 5px;border-style: solid; border-color:#dadcdd transparent transparent transparent;}，重要的是红色的代码。这个可以改变图标大小比较方便，比用雪碧图方便。

四、让底部导航栏一直居于低部，我才用的是相对浏览器定位，加上bottom：0；这样就一直居于底部了

五、同时我把整个界面限制宽度为768px.max-width:768;让中间的列表超出范围自动出现滚动条。

max-height: 500px;限制列表高度，否则它一直显示，知道全部数据显示完全。

overflow-y: scroll;在Y轴上超出了500px就出现滚动。

margin-bottom: 100px;这句也是相当关键的，如果只显示列表高度，刚才说过了。让底部导航一直位于底部，而它有高度的。而且它又是位于第一层，自然挡住了下面的列表数据，就看不全。那么我们让列表距离底部的高度等于底部导航栏的高度，那么底部就当不到列表了