今天完成的事情：PS切图；px,em,rem的区别和使用；
明天计划的事情：让图片适应屏幕大小和清晰度。
遇到的问题：

Question_1:使用的是photoshop CS6，切片工具找不到了。

Answer_1:切片工具,在CS6里整合到了裁剪工具下面,可以按SHIFT+C切换，或者在图标上面按右键。

收获：

PS切图：参考线切图，套索的使用。抠图是一件很费心费力的事情！！！

px,em,rem的区别:

px是最早的相对长度单位，是相对于屏幕显示器的像素。

所以当初设计了是多少像素的字体，放在别的显示器上面也是多少个像素的大小，所见即所得。

em是相对长度单位。相对于父级对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

所以如果父级的字体大小改变了，子级的字体大小也会相应的增大或减小。

rem则是em的更进一步，使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。

只要修改最开头的根属性中的字体大小，整个网页里面的字体都会跟着变大或缩小。和em层层递进更改大小比起来，不会出现局部字体未及时变化的情况。

目前除了ie8以前的浏览器，其他的所有浏览器都已经支持em和rem，所以为了兼容性考虑的话，栗子：p {font-size:14px; font-size:.875rem;}可以两种都写进去，浏览器会自己支持的。

字体设置可以从xx-small~xx-large，对比的都是父级字体，比其大p{font-size:large},比其小p{font-size:small}。

面对今天这个需求，思考将布局分成几个盒子，从上到下首先是后退图标的图片盒子，接着是葡萄藤的logo图标盒子，然后是中央的字符串，最后是左下和右下的两个图标加字符串盒子。思路清楚了，接下来就是调试的过程。

调到最后发现竟然还需要让图片做到自适应？效果展示里面我看不出来这个图片除了位置关系以外还有什么变化？