【实战HTML5与CSS3】免费制作威客页面啦（附源码）

前言

接着昨天的写，居然有圆友找到了网站原网址，这里也一并弄出来了，发现他们做出来其实和原型图还有一点差异呢：

http://www.tmtpost.com/

原型图

今天我们要做的是这张图，我在威客上面找了好久，终于找到一张较合适的图呀，今天我们就来无偿奉献下吧，有图有真相，先上图吧！！

这里也对自己提出要求，希望做出来的页面与设计图完全一致，但估计有点玄，希望大致一致吧，于是我们开始动手吧！

开始切图

第一步，让我们先把背景图给搞下来吧，这个尺寸与大小我感觉应该合适吧。

第二步，将logo剪切了

第三步，我们看看会用到哪些小图标，先全部给抠下来吧，暂时只弄了这么多需要再弄吧：

我PS水平更加水到没边了，完全初学水平，暂时就这样吧。。。

开始布局

第一步，重设浏览器样式

简单css

于是我们的界面变成了这个样子了： 

第二步，开始布局头部

他这个是典型的两栏布局，所以我们先做头好了。

头部代码

css代码

PS：背景我本来想用渐变的，但是米有成功。。。。导航上的分割符就用了渐变啦。。。

第三步布局主体部分

我们看到主体部分还是很长的，主体是个标准的两列布局，我们还是使用float算了。。。于是就这个样子啦：

我们这里先做左边的东西，先来一个框吧：

光是左边还是不好，我们在右边也来一个呗，我们注意到左边有个比较通用的盒子模型，于是我们上手吧：

CSS

HTML

上面右边小图标还没加上呢，于是我们给他加上吧，应该是绝对定位了。

好，接着左边往下做吧，最后写着写着，居然就写完了。。。。

css

html

图片较长，这里就不截图了。

结语

嗯，就这样，我第一次完整切图形成HTML结束。

源码下载：http://files.cnblogs.com/yexiaochai/16%E5%B8%83%E5%B1%80.zip

若是您觉得此篇文章不错，请不要吝啬顶哟！

 

您可以考虑给小钗发个小额微信红包以资鼓励 

本文转自叶小钗博客园博客，原文链接：http://www.cnblogs.com/yexiaochai/archive/2013/05/05/3060770.html，如需转载请自行联系原作者