寫出相容性好的頁面前首先你得把HTML與HTML5學會了，然後CSS，CSS3也有一定的掌握。
通常情況下，不同類型的網站都去認認真真的排版後，對前端就有一定的掌握程度，對寫靜態頁面問題就不大了。至於個數嘛，3個完整網站以上。
提醒：如果要寫出相容性非常好的頁面，js是必不可少的，這對初學前端的人來說，就有點難度了，但也別膽怯，按照學習的先後進度來學習，先學HTML+CSS，再學習HTML5+CSS3，學到一定程式後，再去接觸javascript，就算是自學，HTML+CSS 2個月左右，javascript一個月，肯定是能學出來的。
如果上面的還不會，就去學一下：HTML視頻教程、HTML5教程、SSCSS視頻教程視頻教程、SSCSS視頻教程影片教程、教學。
說太多了，接下來說一下如果寫出相容性好的網頁：1.文檔聲明不可少:
其實這跟不上什麼直接關係，但為了一個相容性更好，特別是向後相容的頁面，必須要把這個東西寫上：
2.有相容性標籤的盡量不要用學習的過程當中你就已經有些相容性的了，如果要用，除飛你只想讓該標籤的效果只在某些瀏覽器裡面有效果，特別是H5，現在好些標籤都沒有統一在所有瀏覽器有效。
3、寫CSS之前一定要先清格式清除標籤格式是必須的，因為大部分標籤都有相容性，但又必須使用，例如ul標籤在ie6,7下默認是有外邊距的，在ie8,火狐，Google下方預設有內邊距。
4、常見瀏覽器bug要避免例如：在嵌套p中，如果外層p沒有設定邊框，內層p的margin-top會無效，它會直接作用到外層DIV上（也就是外層p margin-top的效果了）
5、子元素浮動，父元素默認包不住子元素的情況這種情況一般用如果方法處理：
1、給父元素加overflow:hidden; 但這你要保證父元素以後沒有可顯示的元素，不然顯示不了哦。
<style type="text/css">
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}
.p2{background:#800080;border:1px solid red;height:100px;width:98%;}
.left{float:left;width:20%;height:200px;background:#DDD}.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<p class="p1">
<p class="left">Left</p>
<p class="right">Right</p>
</p>
<p class="p2">
p2
</p>2、在最後一個浮動子元素的後面加上一個清浮動的元素
<style type="text/css">
.p1{background:#000080;border:1px solid red}
.p2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat{clear:both}
</style>
<p class="p1">
<p class="left">Left</p>
<p class="right">Right</p>
<p class="clearfloat"></p>
</p>
<p class="p2">
p2
</p>3、父級p定義偽類:after 和zoom
/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}原理：IE8以上和非IE瀏覽器才支援:after
<style type="text/css">
.p1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;}
.p2{background:#800080;border:1px solid red;height:100px;width:98%;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<p class="p1">
<p class="left">Left</p>
<p class="right">Right</p>
</p>
<p class="p2">
p2
</p>原理：IE8以上和非IE瀏覽器才支援:after ，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
4、父元素也浮動5、父級p定義overflow:auto 6、父級p定義display:table
rrreee6、排版結構問題
要想網站兼容性好，就好比建立房子，要想房子建得牢固，框架牢固才是根本，所以說要想網站兼容性好，框架結構一定要好，這樣擴充性也好，前台後台都一個道理。
前台的框架該怎麼建立呢，我覺得可以從如下方面注意：
層次結構要淺析，就是有上、中、下、左、中、右層的概念
結構應該是先做大的，再做小的，例如網頁中間有左右，最好有一個大的表示中間，然後再左，再右
順序最好是先上後下，先左後右，先外後裡，先整體再局部
7、關於定位浮動之類的
有些同學排版的時候，當結構出現偏差的時候，就隨意給元素加定位或是浮動屬性，突然間發現好了，只能說是達到他所認為是視覺效果了，但網頁相容性好不好呢，自己就不得而知了。
這就有點類似於用殺豬刀殺雞，大材小用了，而且用得非常不合適，所以說，該用什麼的什麼再用什麼，不要動不動就定位呀，浮動什麼的。
8、CSS書寫問題
盡量使用父子關係去定義，例如:#top .left img{}，以後這樣擴展性也好，不會出現新class="left"與這個left衝突，只要id不要定義重複就OK。
