第一個(gè)頁面是從設(shè)計(jì)達(dá)人這個(gè)平臺(tái)上找來的，這個(gè)平臺(tái)的頁面設(shè)計(jì)主要也是推薦的是國外的設(shè)計(jì)還有一些網(wǎng)頁設(shè)計(jì)上的教程，推薦頁面都比較簡潔、大方。比起內(nèi)容爆炸的中國特色頁面來說，我也是欣賞國外的設(shè)計(jì)。

設(shè)計(jì)稿上的頁面寬度為1550像素的，頁面主體是960像素的12欄網(wǎng)格布局。設(shè)計(jì)的總體寬度是遠(yuǎn)遠(yuǎn)超過了瀏覽器的視口寬度，因此我在設(shè)計(jì)的時(shí)候，因?yàn)槭庆o態(tài)頁面，也沒有使用響應(yīng)式的設(shè)計(jì)，就將所有的寬高度都設(shè)置為以像素為單位的靜態(tài)尺寸了。使用div元素將寬度設(shè)置為960px，并且將margin屬性為0px auto，就能保證頁面的主體內(nèi)容在瀏覽器窗口中居中，而且不用再去介意頁面的總寬度了。

根據(jù)這個(gè)思路，我也開始搭建頁面的框架了，分為了四大部分：header、section、main、footer。并且根據(jù)每個(gè)部分中的內(nèi)容把所需要的標(biāo)簽也寫上，還根據(jù)需要添加上了html' target='_blank'>class屬性。接著就是每一部分一點(diǎn)一點(diǎn)完成頁面內(nèi)容以及使用CSS3添加樣式了。下面看我詳細(xì)的說明。

一、Header部分

 header nav > 其中遇到了一個(gè)問題是，圖片和無序列表在瀏覽器中顯示時(shí)分為了兩行，查找了資料以后是使用div元素包含無序列表，并且設(shè)值margin和padding的值才使得兩個(gè)元素在同一行中。無序列表表示鏈接的CSS代碼如下：
.headnav {width: 280px;padding-left: 170px;margin-top: -70px;}.headerlimit ul {list-style-type: none;padding-left: 0px;}.headerlimit li a{text-decoration: none;border-left: 1px solid #fff;border-right: 1px solid #ebebeb;width: 90px;text-align: center;line-height: 25px;color: #68676a;float: left;font-family: PTSans;font-size: 14px;}
二、Banner部分
 背景的大圖是使用background-img實(shí)現(xiàn)的，而在這個(gè)banner部分的設(shè)置中使用了position的定位方法，將所有的文字內(nèi)容模塊相對(duì)于背景模塊的絕對(duì)定位，使得在縮小視口的時(shí)候，兩個(gè)模塊可以保持位置的不變形、不一位，position屬性值也是CSS中很重要的一點(diǎn)。HTML代碼和兩個(gè)模塊的絕對(duì)定位CSS代碼如下：
 section >
.bannercontent {width: 960px;margin: 0px auto;position: absolute;left: 10px;top: 25px;}.backimg {width: 1055px;height: 415px;margin-left: 195px;background-image: url(../images/banner.png);position: relative;}
三、Main部分
 因?yàn)槿齻€(gè)模塊的布局是一模一樣的，所以只要使用同一個(gè)class屬性就能保證樣式相同。圖片和文字都處理都比較簡單，沒有特別需要指出的了，因此代碼也省略了。
四、Footer部分
 在footer部分，導(dǎo)航欄的部分同樣是使用無序列表的方式，要注意的是，在設(shè)置的時(shí)候發(fā)現(xiàn)，因?yàn)闊o序列表中設(shè)置了向左浮動(dòng)，因此會(huì)影響后面的兩個(gè)段落在瀏覽器中的顯示，需要使用clear: both; 清除兩個(gè)段落的浮動(dòng)，才能使得兩個(gè)段落在導(dǎo)航欄的下方。問題產(chǎn)生和清除浮動(dòng)的部分CSS代碼如下：
.footernav li a{color: #fff;font-size: 12px;margin-right: 15px;margin-top: 35px;float: left;}.footercontent {width: 960px;margin: 0px auto;padding: 25px 0px;clear: both;}
 
 當(dāng)然在根據(jù)設(shè)計(jì)稿實(shí)現(xiàn)這個(gè)靜態(tài)頁面的時(shí)候也會(huì)遇到一些問題，比如說要知道每個(gè)元素的大小、元素間的間距、字體的大小顏色屬性之類的很是麻煩的一個(gè)操作呢（吐槽）。當(dāng)然，真正遇到的問題不是這個(gè)，而是一些自己認(rèn)為應(yīng)該是這個(gè)樣子的，結(jié)果在瀏覽器中顯示就會(huì)變成另一個(gè)模樣，這才是讓人頭疼的根源。因此，在實(shí)現(xiàn)的過程中也記錄了一些遇到的問題，嘗試找找是什么原因以及解決的方案。
1、當(dāng)文字和圖片出現(xiàn)在同一行，或是同一個(gè)div元素中時(shí)，瀏覽器運(yùn)行的效果是在不同的行。
通過查詢了資料，給出了三種解決的方案：
①在CSS中，為div設(shè)置vertical-align: middle;的屬性。這個(gè)div是包含了圖片和文字的，使得div中的元素可以垂直居中對(duì)齊。
②當(dāng)圖片為背景圖片時(shí)，將圖片使用background-img設(shè)置，并將文字的padding修改即可在同一行了。
③將圖片和文字放在兩個(gè)div中，并設(shè)置margin值即可。我使用的就是這個(gè)方法，相對(duì)于第一種方法麻煩了一些。
2、行內(nèi)元素不支持上下方向上的margin和padding屬性值，修改需要使用line-height。
3、元素經(jīng)常會(huì)莫名奇妙地出現(xiàn)一些多余的邊距，其實(shí)是瀏覽器的默認(rèn)效果，需要在設(shè)置CSS樣式前，將這些效果手動(dòng)清除。如無序列表ul會(huì)有多余的左邊距。

總結(jié) 很久之前也曾經(jīng)模仿過微軟中國的項(xiàng)目，那時(shí)候利用課余的時(shí)間來完成，對(duì)于結(jié)構(gòu)和布局還沒有全局觀，會(huì)花費(fèi)很大的精力去完成。而這兩天再做這個(gè)，就沒有那么吃力了，本以為自己很久沒有代碼實(shí)戰(zhàn)，會(huì)很生疏，但實(shí)際上會(huì)的知識(shí)點(diǎn)仍然會(huì)，不會(huì)的知識(shí)點(diǎn)仍然欠缺，實(shí)戰(zhàn)的過程中也一直在查找資料，找到方法運(yùn)用到實(shí)例中，真的能提高知識(shí)點(diǎn)的理解和記憶。雖然水平依舊不怎么高，很高興自己一直在進(jìn)步著，繼續(xù)努力，那樣就很好。 接下也會(huì)繼續(xù)把靜態(tài)頁面的實(shí)現(xiàn)多練習(xí)，直到很熟練后，就會(huì)開始練習(xí)JavaScript的動(dòng)態(tài)頁面了，這一直是我拖延癥的地方，不敢嘗試是大忌！要繼續(xù)加油追趕大家的步伐呢！ 完整的項(xiàng)目，包括設(shè)計(jì)圖psd、HTML代碼、CSS代碼放在了github上，希望有心、有余力的大神可以指出我的不足，希望能和大家一起交流、一起進(jìn)步！
 
以上就是HTML5+CSS3靜態(tài)頁面項(xiàng)目經(jīng)驗(yàn)總結(jié) 的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。