【實戰HTML5與CSS3】用HTML5和CSS3制作頁面（上）

前言

周一離職并且入職了，于是開始了做新項目，那天我問了下前端大哥，我們做的項目需要相容哪些浏覽器，他說需要相容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，如需轉載請自行聯系原作者