寫出好的頁面前首先你要把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。
這多問題可直接跟我留言