第一個頁面是從設計達人這個平臺上找來的，這個平臺的頁面設計主要也是推薦的是國外的設計還有一些網頁設計上的教程，推薦頁面都比較簡潔、大方。比起內容爆炸的中國特色頁面來說，我也是欣賞國外的設計。

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

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

一、Header部分

 header nav > 其中遇到了一個問題是，圖片和無序列表在瀏覽器中顯示時分為了兩行，查找了資料以后是使用div元素包含無序列表，并且設值margin和padding的值才使得兩個元素在同一行中。無序列表表示鏈接的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實現的，而在這個banner部分的設置中使用了position的定位方法，將所有的文字內容模塊相對于背景模塊的絕對定位，使得在縮小視口的時候，兩個模塊可以保持位置的不變形、不一位，position屬性值也是CSS中很重要的一點。HTML代碼和兩個模塊的絕對定位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部分
 因為三個模塊的布局是一模一樣的，所以只要使用同一個class屬性就能保證樣式相同。圖片和文字都處理都比較簡單，沒有特別需要指出的了，因此代碼也省略了。
四、Footer部分
 在footer部分，導航欄的部分同樣是使用無序列表的方式，要注意的是，在設置的時候發現，因為無序列表中設置了向左浮動，因此會影響后面的兩個段落在瀏覽器中的顯示，需要使用clear: both; 清除兩個段落的浮動，才能使得兩個段落在導航欄的下方。問題產生和清除浮動的部分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;}
 
 當然在根據設計稿實現這個靜態頁面的時候也會遇到一些問題，比如說要知道每個元素的大小、元素間的間距、字體的大小顏色屬性之類的很是麻煩的一個操作呢（吐槽）。當然，真正遇到的問題不是這個，而是一些自己認為應該是這個樣子的，結果在瀏覽器中顯示就會變成另一個模樣，這才是讓人頭疼的根源。因此，在實現的過程中也記錄了一些遇到的問題，嘗試找找是什么原因以及解決的方案。
1、當文字和圖片出現在同一行，或是同一個div元素中時，瀏覽器運行的效果是在不同的行。
通過查詢了資料，給出了三種解決的方案：
①在CSS中，為div設置vertical-align: middle;的屬性。這個div是包含了圖片和文字的，使得div中的元素可以垂直居中對齊。
②當圖片為背景圖片時，將圖片使用background-img設置，并將文字的padding修改即可在同一行了。
③將圖片和文字放在兩個div中，并設置margin值即可。我使用的就是這個方法，相對于第一種方法麻煩了一些。
2、行內元素不支持上下方向上的margin和padding屬性值，修改需要使用line-height。
3、元素經常會莫名奇妙地出現一些多余的邊距，其實是瀏覽器的默認效果，需要在設置CSS樣式前，將這些效果手動清除。如無序列表ul會有多余的左邊距。

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