如何制作兼容性很高的网页（主求性价比，ie9）

制作一个□□□□兼容性很□□高的网页□□□□不难，但是追求□□□□性价比与□□□□兼容性的□□成比例的※网页就很◥难了。笔者自己□□整理了一◈份笔记希○望对看见□□的人有点□□□帮助。
笔者写的网页基本上兼容主流浏览器（火狐，谷歌，360，qq，ie9以上【包括ie9】）。

从css出发：

基本使用□□□□的兼容代□□码：

（1）
transition: all 500ms;
-webkit-transition: all 500ms;

（2）
transform: scale(1.1);
-webkit-transform: scale(1.1);

（3） .box > li{}

（4）@media书写方法：
@media screen and (max-width: 1400px) {}
@media screen and (max-width: 1366px) {}
@media screen and (max-width: 1280px) {}

从js出发：

2.1使用前需□□□要加的代△码：

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

2.2使用js实现鼠标□□□□悬停效果□□一定要写□□□成这样！

    $(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中用于控□□制页面动□□□□画效果的□□□□方法。运行之后•立刻结束□□当前页面□□上的动画□□□效果。
   第一个参□□数的意思◤是是否清□□空动画序□□□列，也就是stop的是当前□□元素的动□□画效果还□□是停止后□□□□面附带的□□所有动画△效果，一般为false，跳过当前□□动画效果，执行下一□□个动画效☆果；
   第二个参□□□数是是否◉将当前动□□□画效果执□□行到最后，意思就是□□□□停止当前□□□动画的时□□□候动画效□□果刚刚执□□□□行了一般，这个时候◤想要的是□□动画执行□□□□之后的效□□果，那么这个•参数就为true。否则动画□□效果就会□□停在stop执行的时□□□□候。

2.3 图片轮播□□使用slick.js(具体使用□□□□方法我会●在下个月□□□□写文档)

从html的基本代□□□□码出发：（重点！！！）

3.1 要有规律

Eg：
编写header代码
<header>
    <div class="header">
        <div class="box clearfix">
            <ul class="nav">
                <li><a href="index.html">首页</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>应急照明</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">服务中心</a></li>
                <li><a href="about.html">关于微观</a></li>
            </ul>
        </div>
    </div>
</header>
效果图：

前端制作