【實戰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，如需轉載請自行聯系原作者