前言
周一离职并且入职了，于是开始了做新项目，那天我问了下前端大哥，我们做的项目需要兼容哪些浏览器，他说需要兼容IE9以上与chrome，ff，我一下就诡异的笑了。。。。
这不是HTML5与CSS3项目的温床吗？这次真的捡到宝了，再也不用担心IE678的问题了，可以肆意的使用最新的技术了。
紧接着问题也来了，我现在需要切图了，对于我这种前端，css一直是短板，更何况切图！！！说实话我还真没有完整的切一张图来试试，于是今天让我们来试试吧！！！
原型图
今天我们要做的是这张图，我在威客上面找了好久，终于找到一张较合适的图呀，今天我们就来无偿奉献下吧，有图有真相，先上图吧！！
这里也对自己提出要求，希望做出来的页面与设计图完全一致，但估计有点玄，希望大致一致吧，于是我们开始动手吧！
开始切图
第一步，让我们先把背景图给搞下来吧，这个尺寸与大小我感觉应该合适吧。
第二步，将logo剪切了
第三步，我们看看会用到哪些小图标，先全部给抠下来吧，暂时只弄了这么多需要再弄吧：
我PS水平更加水到没边了，完全初学水平，暂时就这样吧。。。
开始布局
第一步，重设浏览器样式
简单css
于是我们的界面变成了这个样子了：
第二步，开始布局头部
他这个是典型的两栏布局，所以我们先做头好了。
头部代码
css代码
PS：背景我本来想用渐变的，但是米有成功。。。。导航上的分割符就用了渐变啦。。。
第三步布局主体部分
我们看到主体部分还是很长的，主体是个标准的两列布局，我们还是使用float算了。。。于是就这个样子啦：
我们这里先做左边的东西，先来一个框吧：
光是左边还是不好，我们在右边也来一个呗，我们注意到左边有个比较通用的盒子模型，于是我们上手吧：
CSS
HTML
结语
好了，今天时间不早了，暂时做到这个程度，明天将它结束吧。
源码下载：http://files.cnblogs.com/yexiaochai/16%E5%B8%83%E5%B1%80.zip
本文转自叶小钗博客园博客，原文链接：http://www.cnblogs.com/yexiaochai/archive/2013/05/04/3059375.html，如需转载请自行联系原作者
