如何寫(xiě)出兼容性很好的頁(yè)面
寫(xiě)出好的頁(yè)面前首先你要把HTML4與HTML5學(xué)會(huì)了，然后CSS，CSS3也有一定的掌握。
通常情況下，不同類型的網(wǎng)站都去認(rèn)認(rèn)真真的排版后，對(duì)前端就有一定的掌握程度，對(duì)寫(xiě)靜態(tài)頁(yè)面問(wèn)題就不大了。至于個(gè)數(shù)嘛，3個(gè)完整網(wǎng)站以上。
提醒：如果要寫(xiě)出非常好的頁(yè)面，js是必不可少的，這對(duì)初學(xué)前端的人來(lái)說(shuō)，就有點(diǎn)難度了，但也別膽怯，按照學(xué)習(xí)的先后進(jìn)度來(lái)學(xué)習(xí)，先學(xué)HTML+CSS，再學(xué)習(xí)HTML5+CSS3，學(xué)到一定程序后，再去接觸javascript，我相信就算是自學(xué)，HTML+CSS 2個(gè)月左右，javascript一個(gè)月，肯定是能學(xué)出來(lái)的。
如果上面的還不會(huì)，就去學(xué)習(xí)一下吧：HTML教程、HTML5教程、CSS教程、CSS3教程、javascript教程。
說(shuō)多了，接下來(lái)說(shuō)一下如果寫(xiě)出兼容性好的網(wǎng)頁(yè)：
1.文檔聲明不可少:<!doctype>
其實(shí)這跟 WCAG 根本上連不上什么直接關(guān)系，但為了一個(gè)兼容性更好，特別是向后兼容的頁(yè)面，必須要把這個(gè)東西寫(xiě)上：
<!doctype>
2.有兼容性標(biāo)簽的盡量不要用
學(xué)習(xí)的過(guò)程當(dāng)中你就已經(jīng)有些兼容性的了，如果要用，除飛你只想讓該標(biāo)簽的效果只在某些瀏覽器里面有效果，特別是H5，現(xiàn)在好些標(biāo)簽都沒(méi)有統(tǒng)一在所有瀏覽器有效。
3、寫(xiě)CSS之前一定要先清格式
清除標(biāo)簽格式是必須的，因?yàn)榇蟛糠謽?biāo)簽都有兼容性，但又必須使用，例如ul標(biāo)簽在ie6,7下默認(rèn)是有外邊距的，在ie8,火狐，谷歌下默認(rèn)有內(nèi)邊距。
4、常見(jiàn)瀏覽器bug要避免
例如：在嵌套div中，如果外層div沒(méi)有設(shè)置邊框，內(nèi)層div的margin-top會(huì)無(wú)效，它會(huì)直接作用到外層DIV上（也就是外層div margin-top的效果了）
5、子元素浮動(dòng)，父元素默認(rèn)包不住子元素的情況
這種情況一般用如果方法處理：
1、給父元素加overflow:hidden; 但這種你要保證父元素以后沒(méi)有可顯示的元素，不然顯示不了哦。
- <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、在***一個(gè)浮動(dòng)子元素的后面加一個(gè)清浮動(dòng)的元素
- <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}
- /*清除浮動(dòng)代碼*/
- .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、父級(jí)div定義 偽類:after 和 zoom
/*清除浮動(dòng)代碼*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點(diǎn)類似，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動(dòng)問(wèn)題 4、父元素也浮動(dòng) 5、父級(jí)div定義 overflow:auto 6、父級(jí)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èn)題
要想網(wǎng)站兼容性好，就好比建立房子，要想房子建得牢固，框架牢固才是根本，所以說(shuō)要想網(wǎng)站兼容性好，框架結(jié)構(gòu)一定要好，這樣擴(kuò)展性也好，前臺(tái)后臺(tái)都一個(gè)道理。
前臺(tái)的框架應(yīng)該怎么建立呢，我覺(jué)得可以從如下方面注意：
-
層次結(jié)構(gòu)要淺析，就是有上、中、下、左、中、右層的概念
-
結(jié)構(gòu)應(yīng)該是先做大的，再做小的，例如網(wǎng)頁(yè)中間有左右，***有一個(gè)大的表示中間，然后再左，再右
-
順序***是先上后下，先左后右，先外后里，先整體再局部
7、關(guān)于定位浮動(dòng)之類的
有些同學(xué)排版的時(shí)候，當(dāng)結(jié)構(gòu)出現(xiàn)偏差的時(shí)候，就隨意給元素加定位或是浮動(dòng)屬性，突然間發(fā)現(xiàn)好了，只能說(shuō)是達(dá)到他所認(rèn)為是視覺(jué)效果了，但網(wǎng)頁(yè)兼容性好不好呢，自己就不得而知了。
這就有點(diǎn)類似于用殺豬刀殺雞，大材小用了，而且用得非常不合適，所以說(shuō)，該用什么的什么再用什么，不要?jiǎng)硬粍?dòng)就定位呀，浮動(dòng)什么的。
8、CSS書(shū)寫(xiě)問(wèn)題
盡量使用父子關(guān)系去定義，例如:#top .left img{}，以后這樣擴(kuò)展性也好，不會(huì)出現(xiàn)新class="left"與這個(gè)left沖突，只要id不要定義重復(fù)就OK。
