今天完成的事情：

task3完成，这个托了好久了，最近总是加班，今天终于抽空搞定了。

九宫格完成之后，这个做起来其实就很简单了，没什么太难的地方。

关于切图、PS什么的，本人就是做平面设计的，这个问题对我来说就不是问题了。

主要就是div+css布局的应用，重点就是居中，div如何配合css实现在页面中居中。

看设计图，页面从上到下可以分成四个大的DIV：

第一个：左上角返回箭头，其实严格来说这个应该算是导航，根据html5的语义化标签，可以用nva来做，nav里面放个img标签，指定nav大小和图片大小一致（测试不指定也是可以的），在指定nav的margin左边距和上边距，下边距和右边距设为auto（自动）。

第二个：第二个就是那个葡萄藤的那张图片，就是div里面放个img标签，指定div大小和图片大小一致，然后这个div的css样式就是重点了，下面贴上我的这个div的css样式。

width: 181px;
height: 70px;
margin: 10% auto 5% auto;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;

width和height宽度和高度就不说了，和图片一致就行。

要注意的是margin的top,left,right,bottom四个属性值可以连起来写在一起的，顺序是margin:上，右，下，左。

position这个就是做这个任务最最最重要的东西了，定位，这个最常用的有三个属性：

1、绝对定位（absolute），absolute定位是相对于其父元素而决定的，如果没有父元素，那就是html根元素，absolute定位和文本流无关，也就是用了absolute定位之后的这个元素，将会脱离原来所在的文本流，不在占用原来文本流所在的空间。还会和其他元素重叠。

2、相对定位（relative），relative定位不会脱离原来的文本流，同样原来所占的空间也不会改变，可以精确的控制元素的位置，也可以控制和其他元素重叠。

3、浮动定位（fixed），fixed定位，是相对于浏览器窗口而言的，就是用这个属性一定给某个元素定位之后，他将会固定在浏览窗口的这个位置，即使页面滚动，它也会在浏览器窗口的这个位置不懂。

其实这个任务用relative或者是absolute都是可以的，不过经过一段时间的研究，个人觉得，能用relative的最好不用absolute，一旦元素脱离了文本，在控制就比较困难了。所以我用relative来做的（这个根据个人的习惯，用哪个都行，只要能很好的解决问题就OK）。

第三个：就是一段文字，div里面写一段文字，用第二div的方法控制这个div就搞定了，宽设80%，高auto。

第四个：最下面的分开两边的两个图片，控制方法同上，里面的两个图片用float，浮动一个靠左一个靠右。