三列布局

三列布局由双飞翼布局基础上建立，实现思路一致。实现效果：两边固定宽度的侧栏悬浮在两侧，中间自适应宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!doctype hmtl>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css" media="screen">
        *{
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
        }
        #main{
            width: 100%;
            height: 500px;
            float: left;
        }
        #content{
            background: blue;
            height: 500px;
            margin-left:203px;
            margin-right: 203px;
        }
        aside{
            background: green;
        }
        #aside_left{
            width: 200px;
            height: 500px;
            float: left;
            margin-left: -100%;
        }
        #aside_right{
            width: 200px;
            height: 500px;
            float: left;
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <main id="main">
        <div id="content">#content</div>
    </main>
    <aside id="aside_left">#aside_left</aside>
    <aside id="aside_right">#aside_right</aside>
</body>
</html>

博客

Flex伸缩盒模型实现三列布局

伸缩盒模型key:flex属性。flex属性是CSS3中新增的属性，不支持IE8及以下，所以如果要兼容低版本的浏览器须用float和margin传统的布局方式
实现效果1：两边固定宽度的侧栏悬浮在两侧，中间自适应宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css" media="screen">
        *{
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
        }
        .container{
            width: 100%;
            display: flex;
        }
        .aside{
            flex-basis: 200px;
            height: 500px;
            background: green;

        }
        .main{
            flex: 1;
            height: 500px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <aside class="aside">aside_left</aside>
        <main class="main">main</main>
        <aside class="aside">aside_right</aside>
    </div>
</body>
</html>

博客

阅读全文 >>

JS作用域链

作用域链的执行：如图所示，当在查找变量的定义时，JavaScript引擎首先在局部执行环境对象上查找。如果没有定义，则跳出作用域链，到创建它的执行环境中去，并且在该执行环境对象中查找变量的定义，以此类推，直到找到定义或者到达全局作用域为止。

为了演示作用域链，下面我们来看一份例子,下面的代码清单将会依次打印下面的内容：
-I am here to save the day
-regular_joe is assigned
-undefined

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var regular_joe = 'I am here to save the day'; //在全局作用域里，设置regular_joe

    //logs 'I am here to save the day'
    console.log(regular_joe); //调用作用域：全局。作用域链中的最近匹配：全局的regular_joe
    function supermax(){
        var regular_joe = 'regular_joe is assigned';

        //logs 'regular_joe is assigned'
        console.log(regular_joe); //调用作用域：全局->supermax(),作用域链中的最近匹配：在supermax()中定义的regular_joe

        function presion(){
            var regular_joe;
            console.log(regular_joe); //调用作用域：全局->supermax()->presion(),作用域链中的最近匹配：在presion()中定义的regular_joe
        }

        //logs 'ubdefined'
        presion();
    }
    supermax();
博客

阅读全文 >>

AJAX 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
oBtn.onclick = function(){
            //1.创建AJAX对象
            if(window.XMLHttpRequest){
                //非IE6
                var oAjax = new XMLHttpRequest();
            }
            else{
                //兼容IE6
                var oAjax = new ActiveXObject("Microsoft.XMLHttp");
            }

            //2.连接服务器
            //open(方法,文件名,异步传输true/同步传输false)
            oAjax.open('GET','data.json',true);

            //3.发送请求
            oAjax.send();

            //4.接收返回
            oAjax.onreadystatechange = function(){
                //已经接收到全部响应数据
                if(oAjax.readyState == 4){ 
                    if(oAjax.status == 200){
                        console.log("成功"+oAjax.responseText);
                    }
                    else{
                        console.log("失败");
                    }
                }
            }
        }
    }
博客