制作一個(gè)兼容性很高的網(wǎng)頁(yè)不難，但是追求性價(jià)比與兼容性的成比例的網(wǎng)頁(yè)就很難了。筆者自己整理了一份筆記希望對(duì)看見(jiàn)的人有點(diǎn)幫助。
筆者寫(xiě)的網(wǎng)頁(yè)基本上兼容主流瀏覽器（火狐，谷歌，360，qq，ie9以上【包括ie9】）。

從css出發(fā)：

基本使用的兼容代碼：

（1）
transition: all 500ms;
-webkit-transition: all 500ms;
 
（2）
transform: scale(1.1);
-webkit-transform: scale(1.1);
 
（3） .box > li{}
 
（4）@media書(shū)寫(xiě)方法：
@media screen and (max-width: 1400px) {}
@media screen and (max-width: 1366px) {}
@media screen and (max-width: 1280px) {}

從js出發(fā)：

2.1使用前需要加的代碼：

Js（未加載jquery）：
window.onload=function(){}
Jquery：
  $(function(){}
 

2.2使用js實(shí)現(xiàn)鼠標(biāo)懸停效果一定要寫(xiě)成這樣！

    $(function(){
        $(".nav li").hover(function(e){
         $(this).children('.nav-cell').stop(fasle,true).slideToggle(250);
        });
        $(".nav-cell dd").hover(function(e){
            $(this).children('a').toggleClass("on");
        $(this).children('.nav-cell1').stop(fasle,true).slideToggle(500);
        });
    })
 
 
解釋紅色文字[stop(fasle,true)]的意思：
.stop 是jQuery中用于控制頁(yè)面動(dòng)畫(huà)效果的方法。運(yùn)行之后立刻結(jié)束當(dāng)前頁(yè)面上的動(dòng)畫(huà)效果。
   第一個(gè)參數(shù)的意思是是否清空動(dòng)畫(huà)序列，也就是stop的是當(dāng)前元素的動(dòng)畫(huà)效果還是停止后面附帶的所有動(dòng)畫(huà)效果，一般為false，跳過(guò)當(dāng)前動(dòng)畫(huà)效果，執(zhí)行下一個(gè)動(dòng)畫(huà)效果；
   第二個(gè)參數(shù)是是否將當(dāng)前動(dòng)畫(huà)效果執(zhí)行到最后，意思就是停止當(dāng)前動(dòng)畫(huà)的時(shí)候動(dòng)畫(huà)效果剛剛執(zhí)行了一般，這個(gè)時(shí)候想要的是動(dòng)畫(huà)執(zhí)行之后的效果，那么這個(gè)參數(shù)就為true。否則動(dòng)畫(huà)效果就會(huì)停在stop執(zhí)行的時(shí)候。

2.3 圖片輪播使用slick.js(具體使用方法我會(huì)在下個(gè)月寫(xiě)文檔)

從html的基本代碼出發(fā)：（重點(diǎn)！！?。?/h2>

3.1 要有規(guī)律

Eg：
編寫(xiě)header代碼
<header>
    <div class="header">
        <div class="box clearfix">
            <ul class="nav">
                <li><a href="index.html">首頁(yè)</a></li>
<li>
                    <a href="jjzm.html" class="on">家居照明</a>
                    <div class="nav-cell">
                        <dl class="clearfix">
                            <dd>
                                <a>教室照明</a>
                                <div class="nav-cell1">
                                    <a>蝶翼系列</a>
                                    <a>蝶翼系列</a>
                                    <a>蝶翼系列</a>
                                </div>
                            </dd>
                            <dd>
                                <a>黑板照明</a>
                                <div class="nav-cell1">
                                    <a>蝶翼系列</a>
                                    <a>蝶翼系列</a>
                                    <a>蝶翼系列</a>
                                </div>
                            </dd>
                            <dd>
                                <a>應(yīng)急照明</a>
                                <div class="nav-cell1">
                                    <a>蝶翼系列</a>
                                    <a>蝶翼系列</a>
                                    <a>蝶翼系列</a>
                                </div>
                            </dd>
                        </dl>
                    </div>
                </li>
                <li><a href="jyzm.html">教育照明</a></li>
                <li><a href="brand.html">品牌中心</a></li>
                <li><a href="ser.html">服務(wù)中心</a></li>
                <li><a href="about.html">關(guān)于微觀</a></li>
            </ul>
        </div>
    </div>
</header>
效果圖：

3.2編寫(xiě)過(guò)程要注釋解釋說(shuō)明代碼，塊與塊之前要注釋分隔

  原因：代碼后續(xù)可能由別人接手，方便他人，也方便自己后期修改。
效果圖：

 
以上為筆者的經(jīng)驗(yàn)，每個(gè)人寫(xiě)代碼都有每個(gè)人的習(xí)慣。如有錯(cuò)誤，希望您能指出；不喜勿噴，謝謝。

作者：方維網(wǎng)絡(luò)馮秋寧