今天完成的事情：

1.制作雪碧图

切图，将小图标上传到https://www.toptal.com/developers/css/sprite-generator制作雪碧图。可在右侧选择图标排列方式。

2.html页面框架

根据效果图将页面分为三部分

3.设置header及footer部分

小图标定位，主要用到background-position属性。

4.设置内容部分

利用flex使价格及时间行垂直居中，为价格块设置margin-left: auto;使其右对齐

明天计划的事情：

把任务6做完，搞清楚下拉框的制作

遇到的问题：

1.设置html{font-size:62.5%；}换算rem不生效，测试后发现是在chrome浏览器中有一个问题是字体小于12px统一都按12px

因此设置html{font-size:625%；}，其他单位换算时都统一除以100

2.由于效果图是二倍图，设置背景图片大小时缩放了，导致定位时出现问题

使用雪碧图时，背景图片大小设置为原图大小，容器大小也无需缩放，在最后添加transform:scale(0.5);属性。

3.内容部分使用transform:scale(0.5);进行缩放出现错位，添加属性transform-origin: center bottom;设置缩放基准点。改变基准点可以实现小图标和文字对齐，但是由于占据的原始尺寸不变而出现难以垂直居中的情况。

查找资料后发现zoom属性虽然可以解决占位问题，但只有ie支持，因此只能设置backg-size等比例缩小，同时改变容器大小和位置。

4.下拉选择框用select实现时，option的宽度总是比select宽，因此需要用ul li实现

未解决

5.下拉框只有点击了才能出现，但是我设置的是hover啊

6.下拉框的背景色设置以后下方的文字内容仍然未被遮挡，设置z-index也不行。

收获：

1.zoom属性（ie专用）

zoom：normal | <number> | <percentage> 

 normal：使用对象的实际尺寸。

<number>：用浮点数来定义缩放比例。不允许负值

<percentage>：用百分比来定义缩放比例。不允许负值

2.zoom与transfrom：scale区别，：

zoom的缩放是相对于左上角的；而scale默认是居中缩放；

zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化；

zoom和scale对元素的渲染计算方法可能有差异（需要自己动手，用高清图，仔细去看其中的区别）。

对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制，文字50%原来尺寸。

3.flex设置最后一块右对齐，为该块添加margin-left: auto;

4.如下去掉链接下划线样式：a{text-decoration:none}