寫出好的頁面前首先你要把HTML4與HTML5學會了，然后CSS，CSS3也有一定的掌握。

通常情況下，不同類型的網站都去認認真真的排版后，對前端就有一定的掌握程度，對寫靜態頁面問題就不大了。至于個數嘛，3個完整網站以上。

提醒：如果要寫出非常好的頁面，js是必不可少的，這對初學前端的人來說，就有點難度了，但也別膽怯，按照學習的先后進度來學習，先學HTML+CSS，再學習HTML5+CSS3，學到一定程序后，再去接觸javascript，我相信就算是自學，HTML+CSS 2個月左右，javascript一個月，肯定是能學出來的。

如果上面的還不會，就去學習一下吧：HTML教程、HTML5教程、CSS教程、CSS3教程、javascript教程。

說多了，接下來說一下如果寫出兼容性好的網頁：

1.文檔聲明不可少:<!doctype>

其實這跟 WCAG 根本上連不上什么直接關系，但為了一個兼容性更好，特別是向后兼容的頁面，必須要把這個東西寫上：

<!doctype>

2.有兼容性標簽的盡量不要用

學習的過程當中你就已經有些兼容性的了，如果要用，除飛你只想讓該標簽的效果只在某些瀏覽器里面有效果，特別是H5，現在好些標簽都沒有統一在所有瀏覽器有效。

3、寫CSS之前一定要先清格式

清除標簽格式是必須的，因為大部分標簽都有兼容性，但又必須使用，例如ul標簽在ie6,7下默認是有外邊距的，在ie8,火狐，谷歌下默認有內邊距。

4、常見瀏覽器bug要避免

例如：在嵌套div中，如果外層div沒有設置邊框，內層div的margin-top會無效，它會直接作用到外層DIV上（也就是外層div margin-top的效果了）

5、子元素浮動，父元素默認包不住子元素的情況

這種情況一般用如果方法處理：

1、給父元素加overflow:hidden; 但這種你要保證父元素以后沒有可顯示的元素，不然顯示不了哦。

<style type="text/css">  
.div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;overflow:hidden}  
.div2{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>  
<div class="div1">  
<div class="left">Left</div>  
<div class="right">Right</div>  
</div>  
<div class="div2">  
div2  
</div> 

2、在***一個浮動子元素的后面加一個清浮動的元素

<style type="text/css">  
.div1{background:#000080;border:1px solid red}  
.div2{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>  
<div class="div1">  
<div class="left">Left</div>  
<div class="right">Right</div>  
<div class="clearfloat"></div>  
</div>  
<div class="div2">  
div2  
</div> 

3、父級div定義 偽類:after 和 zoom

/*清除浮動代碼*/

.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}

.clearfloat{zoom:1} 

原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題 4、父元素也浮動 5、父級div定義 overflow:auto 6、父級div定義 display:table

<style type="text/css">  
.div1{background:#000080;border:1px solid red;/*解決代碼*/width:98%;display:table;margin-bottom:10px;}  
.div2{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>  
<div class="div1">  
<div class="left">Left</div>  
<div class="right">Right</div>  
</div>  
<div class="div2">  
div2  
</div> 

6、排版結構問題

要想網站兼容性好，就好比建立房子，要想房子建得牢固，框架牢固才是根本，所以說要想網站兼容性好，框架結構一定要好，這樣擴展性也好，前臺后臺都一個道理。

前臺的框架應該怎么建立呢，我覺得可以從如下方面注意：

• 層次結構要淺析，就是有上、中、下、左、中、右層的概念

• 結構應該是先做大的，再做小的，例如網頁中間有左右，***有一個大的表示中間，然后再左，再右

• 順序***是先上后下，先左后右，先外后里，先整體再局部

7、關于定位浮動之類的

有些同學排版的時候，當結構出現偏差的時候，就隨意給元素加定位或是浮動屬性，突然間發現好了，只能說是達到他所認為是視覺效果了，但網頁兼容性好不好呢，自己就不得而知了。

這就有點類似于用殺豬刀殺雞，大材小用了，而且用得非常不合適，所以說，該用什么的什么再用什么，不要動不動就定位呀，浮動什么的。

8、CSS書寫問題

盡量使用父子關系去定義，例如:#top .left img{}，以后這樣擴展性也好，不會出現新class="left"與這個left沖突，只要id不要定義重復就OK。