今天完成的事情：

由于没有看清楚任务要求，昨晚提交的任务审核不通过，师兄还是挺负责的，因此今天下班回来第一件事就是修改代码。

1.第一个问题：header上的按钮图标在屏幕尺寸小于300px时，文本会换行，我知道是空间不够的原因导致文本换行。但是在这里我有个疑问，在chrome和sougou浏览器上，chrome显示的效果是并不会换行，但是sougou浏览器会换行，这是否是浏览器的兼容性问题？

然后我把代码改了下，把button的width去掉，然后用padding去撑开，就解决了换行的问题。

2.第二个问题：listheader没有按要求写出二级菜单，师兄让我采用select或者bootstrap写下拉菜单，我决定先用css先写完二级菜单，然后用select和bootstrap写一个demo放在下面。

由于用css写二级菜单需要用到伪类选择器的知识，虽然以前看过一遍，但是从来没有用过，印象也不深，因此我又回去w3c把伪元素和伪类选择器的知识学习了一遍。

a.伪元素

伪元素的语法：

selector:pseudo-element {property:value;}  即：  选择器：伪要素{属性：值}

b.伪类选择器

我只把我要用到的说一下，:hover是指当鼠标悬浮在元素上方时，向元素添加样式。

经过一番折腾，终于写出了二级菜单，如下：

明天用select和bootstrap写一下，看效果是不是会比这个强多了。

3.任务要求列表信息左边的文字在屏幕尺寸过窄时多余的内容显示成“……”的样式。

我百度了下，原来只需要加入css样式：

{

overflow: hidden;

text-overflow: ellipsis;

o-text-overflow: ellipsis;

white-space: nowrap;

width: 100%;

}

其中overflow: hidden 是指不显示超过对象尺寸的内容，也就是隐藏了溢出的内容；

text-overflow: ellipsis 是指超出尺寸的文本内容显示为“……”；

o-text-overflow: ellipsis 这个是针对Opera浏览器的设定；

white-space：nowrap 表示文本不会换行，在同一行继续，直到遇到<br/>标签为止；

width：100% 宽度的设定是针对IE6的。

4.最后一个问题是footer的三个按钮图标在屏幕过窄时也会发生换行，这个图片自适应到目前为止我查询到的两种方法：

a.使用max-width:100% 和 width: 100%；

b.对于不同的分辨率的屏幕进行媒体查询，然后加载不同的css文件。

第一种方法虽然简单，但是有时候并不能很好的自适应，我是添加上去了的，但是感觉效果不明显。第二种方法需要加载不同的css文件和不同分辨率的图片，很麻烦，至于效果怎样我也没试过。

明天计划的事情：

1.使用select和bootstrap写下拉菜单的demo。

2.开始详细学习bootstrap，为任务7打下基础。

遇到的问题：

1.当header采用position:fixed时，上面的定位图标采用absolute时，是根据body定位的，但是为什么我的top数值竟然达到了25%，才能让它差不多垂直居中，如果header不采用fixed时，而是采用relative时，定位图标absolute的top数值只需要3.77%就可以差不多垂直居中，说简单一点，我现在的问题是脱离了文档流的父元素的子元素在采用absolute定位时，是根据的哪个元素进行定位的?（如果无法理解我问题的意思，不回答也行的，因为我知道自己的语言表达能力并不好）

2.图片自适应有没有更好一点的办法，最优的办法？

收获：

1.学会了使用css写二级菜单的方法；

2.复习巩固了伪类选择器和伪元素的知识点；

3.学会了如何让文本溢出时显示为“……”；

4.复习了css选择器的优先级和权重知识点。