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

通常情況下，不同類型的網(wǎng)站都去認(rèn)認(rèn)真真的排版后，對前端就有一定的掌握程度，對寫靜態(tài)頁面問題就不大了。至于個數(shù)嘛，3個完整網(wǎng)站以上。

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

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

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

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

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

<!doctype>

2.有兼容性標(biāo)簽的盡量不要用

學(xué)習(xí)的過程當(dāng)中你就已經(jīng)有些兼容性的了，如果要用，除飛你只想讓該標(biāo)簽的效果只在某些瀏覽器里面有效果，特別是H5，現(xiàn)在好些標(biāo)簽都沒有統(tǒng)一在所有瀏覽器有效。

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

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

4、常見瀏覽器bug要避免

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

5、子元素浮動，父元素默認(rèn)包不住子元素的情況

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

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轉(zhuǎn)有屬性)可解決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、排版結(jié)構(gòu)問題

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

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

• 層次結(jié)構(gòu)要淺析，就是有上、中、下、左、中、右層的概念

• 結(jié)構(gòu)應(yīng)該是先做大的，再做小的，例如網(wǎng)頁中間有左右，***有一個大的表示中間，然后再左，再右

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

7、關(guān)于定位浮動之類的

有些同學(xué)排版的時候，當(dāng)結(jié)構(gòu)出現(xiàn)偏差的時候，就隨意給元素加定位或是浮動屬性，突然間發(fā)現(xiàn)好了，只能說是達(dá)到他所認(rèn)為是視覺效果了，但網(wǎng)頁兼容性好不好呢，自己就不得而知了。

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

8、CSS書寫問題

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