HTML
    1、一套规则,浏览器认识的规则。
    2、开发者:
        学习Html规则
        开发后台程序:
            - 写Html文件(充当模板的作用) ******
            - 数据库获取数据,然后替换到html文件的指定位置(Web框架)

    3、本地测试
         - 找到文件路径,直接浏览器打开(单个文件测试时,无需使用socket服务端)
         - pycharm打开测试
    4、编写Html文件
        
        - doctype对应关系  <!--对于不同的浏览器有自己的编码规范,<!DOCTYPE html>默认是统一的规范,否则显示的页面由于对应关系不同,会错位-->
        - html标签,标签内部可以写属性 ====> 只能有一个,<html lang="en"> </html>==>html标签,lang="en"叫html标签的属性。
        - 注释:  <!--  注释的内容  -->
    5、标签分类
        - 自闭合标签
            只写了一个<meta>标签,没有</meta>标签,自己就闭合了。
            例如:<meta charset="UTF-8">  
        - 主动闭合标签
            例如:<title>老男孩</title>  
    6、
        
        - <meta  -> 编码,跳转,刷新,关键字,描述,IE兼容
         6.1 编码:<meta charset="UTF-8">
          6.2 跳转:<meta http-equiv="Refresh" Content="5" Url="http://baidu.com" /> 5秒钟后跳转至baidu.com
          6.3 刷新:<meta http-equiv="Refresh" Content="30">  该页面默认30秒刷新一次
          
          6.4 关键字:<meta name="keywords" content="星际2,红警">
          6.5 描述: <meta name="description" content="汽车之家为您提供最新汽车报价。" />
          6.6 兼容:<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
            
            - title标签   ,网站的标题
            - <link /> 搞图标,欠
            - <style />欠
            - <script> 欠
    7、body标签
         - 图标,  &nbsp;  &gt;   &lt;
         - p标签,段落 <p></p>
         - br,换行  <br />
         ======== 小总结  =====
            所有标签分为:

            标签之间可以嵌套
            标签存在的意义:通过 css操作、js操作可以方便定位到哪个标签的值。
                 
            ps:chorme审查元素的使用
                - 定位
                - 查看样式
        - h系列   :标题字体大小,从h1到h6,h1最大,h6最小。   <h1></h1> 
        - 
        - span   :白板,横着输出。属于行内标签;  <span></span>
        - input系列 + form标签
            input type='text'     - name属性,value="赵凡" 
            input type='password' - name属性,value="赵凡" 
            input type='submit'   - value='提交' 提交按钮,表单
            input type='button'   - value='登录' 按钮
            
            input type='radio'    - 单选框 value,checked="checked",name属性(name相同则互斥)
            input type='checkbox' - 复选框 value, checked="checked",name属性(批量获取数据)
            input type='file'     - 依赖form表单的一个属性 enctype="multipart/form-data"
            input type='rest'     - 重置
    
            <textarea >默认值</textarea>  - name属性
            select标签            - name,内部option value, 提交到后台,size,multiple
        
        - a标签
            - 跳转
            - 锚     href='#某个标签的ID'    标签的ID不允许重复
            
        - img 
             src
             alt
             title
             
        - 列表
            ul
                li
            ol
                li
            dl
                dt
                dd
        - 表格
            table
                thead
                    tr
                        th
                tbody
                    tr
                        td
            colspan = ''
            rowspan = ''
        - label
            用于点击文件,使得关联的标签获取光标
            <label for="username">用户名:</label>
            <input id="username" type="text" name="user" />
        - fieldset
            legend
        
    - 20个标签
    -html中的注释
         <!-- 注释 -->
    
CSS

在标签上设置style属性:
    background-color: #2459a2;
    height: 48px;
    ...

编写css样式:
    1. 标签的style属性
    2. 写在head里面 style标签中写样式
        - id选择区
              #i1{
                background-color: #2459a2;
                height: 48px;
              }
              
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
    #i1 {
        background-color: #2459a2;
        height: 48px;
    }
    .c1,.c2{
        background-color: red;
        height: 48px;
    }

    .c1 div{
        background-color: green;
        height: 48px;
    }
    .c3[name='xiaofeng'] {
        width: 100px;
        height: 100px;
    }
</style>
</head>
<body>
<div id="i1">id标签不能重复</div>   <!--id不能重复 -->
<div class="c1">class标签可以复用</div>  <!-- class标签可以重复,最常用的一种方式 -->
<span class="c2">组合选择器
    <div>层级选择器,关联syle里的c1中的div样式</div>
</span>
<input class="c3" type="text" name="xiaofeng">
</body>
</html>

- class选择器 ******
    
      .名称{
        ...
      }
      
      <标签 class='名称'> </标签>

- 标签选择器
        div{
            ...
        }
        
        
        所有div设置上此样式

- 层级选择器(空格) 重点,必须掌握
       .c1 .c2 div{
            
       }
- 组合选择器(逗号) 重点,必须掌握
        #c1,.c2,div{
            
       }

- 属性选择器 重点,必须掌握
       对选择到的标签再通过属性再进行一次筛选
       .c1[n='alex']{ width:100px; height:200px; }
       
PS:
    - 优先级,标签上style优先,编写顺序,就近原则

2.5 css样式也可以写在单独文件中
1)创建一个stylesheet文件,文件名字叫commons.css,内容为style里的内容,如

#i1 {
background-color: #2459a2;
height: 48px;
}
.c1,.c2{
background-color: red;
height: 48px;
}

.c1 div{
background-color: green;
height: 48px;
}
.c3[name='xiaofeng'] {
width: 100px;
height: 100px;
}
2)在html中<head>标签中写入  <link rel="stylesheet" href="commons.css" /> 即可调用commons.css文件里的标签样式。
        
3、css中的注释
    /*   */

4、边框
     - 宽度,样式,颜色  (border: 4px dotted red;)
         -关于样式
                solid:实线
                dotted:虚线
     - border-left

5、基础样式
    height,         高度 百分比
    width,          宽度 像素,百分比
    text-align:ceter, 水平方向居中
    line-height,垂直方向根据标签height的高度居中,且水平方向也居中。 重点掌握
    color、     字体颜色
    font-size、 字体大小
    font-weight 字体加粗

6、float 漂浮
    让标签漂起来,比如让两个块级标签可以实现同一行里左右飘浮,使块级标签也可以堆叠。因为块级标签默认是占一行。
    例:
        <div style="width: 20%; height: 100px;border: 5px dotted blue;float: left"></div>
                   <div style="width: 70%; height: 100px;border: 5px dotted darkorchid;float: left"></div>
    
    老子管不住:
        <div style="clear: both;"></div>
    
7、display  
display: none; -- 让标签消失

display: inline;   将块级标签变成内连(行内)标签
    例:
     <div style="background: red;display: inline" >块级标签</div>
     
display: block;  将内连(行内)标签变成块级标签
        例:
          <span style="background: green;display: block">内连标签</span>
display: inline-block;  使行内标签可以设置高度和宽度,默认行内标签无法设置高度,宽度,边距。
    例:
     <span style="height:50px;width: 100px;background:  green;display: block;border:2px solid red;display:inline-block">内连标签</span>
         具有inline,默认自己有多少占多少
         
         具有block,可以设置无法设置高度,宽度,padding  margin
   
小结:
行内标签:无法设置高度,宽度,padding  margin
块级标签:可以设置高度,宽度,padding  margin
    
    
8、边距
padding:内边距
    padding-top:10px;距离当前div标签的顶部边框的距离是10像素
margin:外边距
    margin-top:10px; 当前div标签距离顶部10像素;
    
margin(0,auto) 设置对象上下间距为0,左右自动。 


事例:返回顶部
<body>
    <div style="height: 50000px">
        <div onclick="GoTop()" style="height: 100px;width: 100px;position: fixed;bottom: 20px;right: 20px;background: cadetblue ;font-size:29px;color: crimson ">返回顶部</div>
    </div>
</body>
<script>
    function GoTop(){
        document.body.scrollTop = 0;
    }
</script>
9 position
    position: fixed;  <: ;: ;: ;: ;: ;: ;:;: >返回顶部</>
    position: absolute;   父标签里定义一个position:relative;子标签里定义一个position:absolute; 子标签就会相对父标签定位。
    bottom:20px;  right: 20px;  margin-top: 50px;  

10 background
    background-image:url('img/1.gif')  background-repeat:repeat-x; background-repeat:repeat-y; background-repeat:no-repeat; background-position-x:0;
    background-position-y:-20px;
    background-position:0 -20px;

11 hover   
选择鼠标指针浮动在其上的元素,并设置其样式:
a:hover
{ 
background-color:yellow;
}

12 overflow  
如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。

13 z-index   
层级。设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。数值最大的,在顶层。

14 opacity
设置元素的不透明级别,规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。
   
    
三、JavaScript:(独立的编程语言,跟java半毛钱关系也没有。浏览器就自带js代码的解释器)
3.1 js代码书写方法和位置:
法一:以代码形式存在html里的head中,但是不够灵活
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* css 代码*/
    </style>
    <script>
        //javascript代码
    </script>
</head>

法二:js代码以文件的形式存放,html里调用这个文件
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="commons.css" >
    <script src="commons.js"></script>
</head>

法三: 临时书写,可以在浏览器终端的console里

小结:
    一般js都不放在head里,为了提高网页的打开效率和友好度,通常会把js的<scripts>js代码</scripts>放在<body>html代码</body>下面
    
3.2 js注释:   
     当行注释  //内容
     多行注释  /* 内容*/
     
3.3 js基本语法:  
3.4变量:
        python中:
            name = "xiaoming"   
        js中:
            name = "xiaoming"    #全局变量
         var name = "xiaoming" #局部变量,切记,使用过程中变量一般都要加上var
         
3.5 基本数据类型:
详见:


 
    注意: 
        null、undefinednull是JavaScript语言的关键字,它表示一个特殊值,常用来描述“空值”。
           undefined是一个特殊值,表示变量未定义。
           
3.5.1 数字
JavaScript中不区分整数值和浮点数值,JavaScript中所有数字均用浮点数值表示。
转换:
parseInt(..)    将某值转换成数字,不成功则NaN
parseFloat(..) 将某值转换成浮点数,不成功则NaN
特殊值:
 NaN,非数字。可使用 isNaN(num) 来判断。
Infinity,无穷大。可使用 isFinite(num) 来判断。
更多数值计算:

3.5.2字符串
字符串是由字符组成的数组,但在JavaScript中字符串是不可变的:可以访问字符串任意位置的文本,但是JavaScript并未提供修改已知字符串内容的方法。
常见功能:
obj.length                           获取当前字符串长度
obj.trim()                           移除空白
obj.trimLeft()                                                  移除左面
obj.trimRight)
obj.charAt(n)                        返回字符串中的第n个字符,n是索引位置
obj.concat(value, ...)               拼接
obj.indexOf(substring,start)         子序列位置,比如字符串索引位置
obj.lastIndexOf(substring,start)     子序列位置
obj.substring(from, to)              根据索引获取子序列,from是开始位置,to结束位置
obj.slice(start, end)                切片
obj.toLowerCase()                    大写
obj.toUpperCase()                    小写
obj.split(delimiter, limit)          分割
obj.search(regexp)                   从头开始匹配,返回匹配成功的第一个位置(g无效)
obj.match(regexp)                    全局搜索,如果正则中有g表示找到全部,否则只找到第一个。
obj.replace(regexp, replacement)     替换,正则中有g则替换所有,否则只替换第一个匹配项,
                                     $数字:匹配的第n个组内容;
                                     $&:当前匹配的内容;
                                     $`:位于匹配子串左侧的文本;
                                     $':位于匹配子串右侧的文本
                                     $$:直接量$符号
                                                                        

                                                                    

3.5。3 数组
JavaScript中的数组类似于Python中的列表
常见功能
obj.length          数组的大小
 
obj.push(ele)       尾部追加元素
obj.pop()           尾部获取一个元素
obj.unshift(ele)    头部插入元素
obj.shift()         头部移除元素
obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
                    obj.splice(n,0,val) 指定位置插入元素
                    obj.splice(n,1,val) 指定位置替换元素
                    obj.splice(n,1)     指定位置删除元素
obj.slice( )        切片
obj.reverse( )      反转
obj.join(sep)       将数组元素连接起来以构建一个字符串
obj.concat(val,..)  连接数组
obj.sort( )         对数组元素进行排序

3.5.4 字典
a={'k1':'v1','k2':'v2'}
执行a[k1],值为v1

3.5.5 布尔值
布尔类型仅包含真假,与Python不同的是其首字母小写。
==      比较值相等
!=       不等于
===   比较值和类型相等
!===  不等于
||        或
&&      且
        

3.6 For循环
此种方法循环的是元素的索引
<script>
    a=[11,22,33,44]
    for (item in a){
        console.log(a[item]);
    }
    b={'k1':'v1','k2':'v2'}
    for (item in b){
        console.log(b[item])
    }
</script>

        
3.7 条件语句
语法:
if(条件){
}else if(条件){
}else if(条件){
}else{
}

条件符号:  
        ==    只要值相同就相等
        !=
        ===   不仅要比对值,类型也要相等才会相等
        !==
        
        ||    或,相当于python里的or
        
        &&    且,相当于python里的and
        
    函数的定义:
        function func(){
            ...
        }
        
4、Dom
详看:
http://www.cnblogs.com/wupeiqi/articles/5643298.html  
  
4.1 找标签
4.1.1直接找 $('#id')  $('.c1').siblings()
document.getElementById             根据ID获取一个标签
document.getElementsByName          根据name属性获取多个标签(获取的是列表)
document.getElementsByClassName     根据class属性获取标签集合
document.getElementsByTagName       根据标签名获取标签集合

        直接查找
            var obj = document.getElementById('i1')
        间接查找
            文件内容操作:
                innerText    仅文本
                innerHTML    全内容
                value
                    input    value获取当前标签中的值
                    select   获取选中的value值(selectedIndex)
                    textarea value获取当前标签中的值
                
                搜索框的示例

4.1.2 间接找
先找到一个标签,然后根据这个标签去找其他标签;例如
var tag = document.getElementById('i1')  //先找到id=i1的标签
var content = tag.parentElement     //然后找i1的父标签
 
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素


parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点

4.2 操作:
4.2.1 内容
var tag = document.getElementById('i1')  //先找到id=i1的标签
var content = tag.innerText    //获取i1标签的文本内容

innerText   文本
outerText
innerHTML   HTML全内容
innerHTML   
value     值 
    input    value获取当前标签中的值
    select   获取选中的value值(selectedIndex)
    textarea value获取当前标签中的值
    
4.2.2 样式操作:
    className
    classList
        classList.add
        classList.remove
       
       
    obj.style.fontSize = '16px';
    obj.style.backgroundColor = 'red';
    obj.style.color = "red"
    
    
4.2.3 属性操作 
attributes                // 获取所有标签属性
setAttribute(key,value)   // 设置标签属性
getAttribute(key)         // 获取指定标签属性
removeAttribute 

/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/ 
        innerText
        
        checkbox: 
            checked    
        
        className
        classList

    
4.2.4 创建标签,并添加到HTML中:
    a. 字符串形式
    
    b. 对象的方式
        document.createElement('div')
    
    
4.2.5 提交表单
    任何标签通过DOM都可提交表单
    
    document.geElementById('form').submit()

4.2.6 其他:
    console.log()
    alert
    var v = confirm(信息)  v:true false
    
    location.href
    location.href = ""  # 重定向,跳转
    location.reload()   # 页面刷新
    location.href = location.href   < === > location.reload()
    
    
    var o1 = setInterval(function(){}, 5000)
    clearInterval(o1);
    
    var o2 = setTimeout(function(){}, 50000);
    clearTimeout(o2);
    
    var obj = setInterval(function(){
        
    }, 5000)
    
    clearInterval(obj); 

事件:
    onclick,onblur,onfocus
    
    行为  样式  结构 相分离的页面?
    js    css   html  
    
    绑定事件两种方式:
        a. 直接标签绑定 onclick='xxx()'  onfocus
                <div onclick='函数(123)'></div>
        
                <script>
                    。。。。
                </script>
        b. 先获取Dom对象,然后进行绑定
            document.getElementById('xx').onclick
            document.getElementById('xx').onfocus
            
    this,当前触发事件的标签
        a. 第一种绑定方式
            <input id='i1' type='button' onclick='ClickOn(this)'>
            
            function ClickOn(self){
                // self 当前点击的标签
                
            }
        b. 第二种绑定方式
            <input id='i1' type='button' >
            document.getElementById('i1').onclick = function(){
            
                // this 代指当前点击的标签
            }
        
            
    作用域示例:
            var myTrs = document.getElementsByTagName("tr");
            var len = myTrs.length;
            for(var i=0;i<len;i++){
                // i=0,i=1,i=2
                myTrs[i].onmouseover = function(){
                     this.style.backgroundColor = "red";
                };

            }        

        
4.2.7 定时器
 书写方法:setInterval('函数()', 4000)
 事例
 <script>
     function f1(){
        console.log(1);
     }
    //创建一个定时器,5000是毫秒,相当于5秒执行一个alert命令,弹出一个框,内容是123
     setInterval("alert(123)",5000);  
</script>        
    
4.2.8 其他:
        
  alert()
 console.log()
        
        

                
4.3 搜索框的示例
操作:      
    样式操作:
        className
        classList
            classList.add
            classList.remove
           
           
        obj.style.fontSize = '16px';
        obj.style.backgroundColor = 'red';
        obj.style.color = "red"
        
        
    属性操作:
        attributes
        getAttribute
        removeAttribute
        
    创建标签,并添加到HTML中:
        a. 字符串形式
        
        b. 对象的方式
            document.createElement('div')
        
        
    提交表单
        任何标签通过DOM都可提交表单
        
        document.geElementById('form').submit()
    
    其他:
        console.log()
        alert
        var v = confirm(信息)  v:true false
        
        location.href
        location.href = ""  # 重定向,跳转
        location.reload()   # 页面刷新
        location.href = location.href   < === > location.reload()
        
        
        var o1 = setInterval(function(){}, 5000)
        clearInterval(o1);
        
        var o2 = setTimeout(function(){}, 50000);
        clearTimeout(o2);
        
        var obj = setInterval(function(){
            
        }, 5000)
        
        clearInterval(obj);    
        

        
5 实战
<body>
    <div id="i1">欢迎领导莅临指导</div>
</body>
<script>
    function func(){
        //根据id获取标签的内容,定义局部变量
        var tag = document.getElementById('i1');
        //获取标签内部的内容
        var content = tag.innerText;
        var f = content.charAt(0);
        var l = content.substring(1,content.length);
        var new_content = l +f ;
        tag.innerText = new_content;
    }
    //创建一个定时器
     setInterval("func()",500);
</script>
        

6、for循环

    for(var item in [11,22,33]){
        console.log(item);
        continue;
    }

    var arra = [11,22,32,3]
    for(var i=0;i<arra.lenght;i=i+1){
        break;
    }

    while(条件){


    }
7、条件语句

    if(){

    }else if(){

    }else{

    }

    ==
    ===

    name='3';


    switch(name){
        case '1':
            age = 123;
            break;
        case '2':
            age = 456;
            break;
        default :
            age = 777;
    }

8. 函数
    function func(arg){

        return arg+1
    }
    var result = func(1)
    console.log(result);

    普通函数:
        function func(){

        }
    匿名函数:

        function func(arg){

            return arg+1
        }

        setInterval("func()", 5000);

        setInterval(function(){
            console.log(123);

        },5000)

    自执行函数(创建函数并且自动执行):
        function func(arg){
            console.log(arg);
        }
        // func(1)

        (function(arg){
            console.log(arg);
        })(1)
注意:对于JavaScript中函数参数,实际参数的个数可能小于形式参数的个数,函数内的特殊值arguments中封装了所有实际参数。

9、序列化
    JSON.stringify()   将对象转换为字符串
    JSON.parse()       将字符串转换为对象类型

10、转义
    客户端(cookie)   =》 服务器端
    将数据经过转义后,保存在cookie

11、eval
    python:
        val = eval(表达式)
              exec(执行代码)
    JavaScript:
        eval
12、时间
    Date类

    var d = new Date()

    d.getXXX  获取
    d.setXXX  设置

13、作用域
    ================================ 1. 以函数作为作用域 (let)================================

    其他语言: 以代码块作为作用域
                public void Func(){
                    if(1==1){
                        string name = 'Java';

                    }
                    console.writeline(name);

                }
                Func()
                // 报错

    Python:   以函数作为作用域
                情况一:
                    def func():
                        if 1==1:
                            name = 'alex'
                        print(name)

                    func()
                    // 成功
                情况二:
                    def func():
                        if 1==1:
                            name = 'alex'
                        print(name)

                    func()
                    print(name)
                    // 报错

    JavaScript:  以函数作为作用域

                function func(){
                    if(1==1){
                        var name = 'alex';
                    }
                    console.log(name);
                }
                func()

    ================================ 2. 函数的作用域在函数未被调用之前,已经创建 ================================

    function func(){
        if(1==1){
            var name = 'alex';
        }
        console.log(name);
    }

    ================= 3. 函数的作用域存在作用域链,并且也是在被调用之前创建 ==================
    示例一:
        xo = "alex";

        function func(){
            // var xo = 'eric';
            function inner(){
                // var xo = 'tony';
                console.log(xo);
            }

            inner()
        }

        func()

    示例二:
        xo = "alex";

        function func(){
            var xo = 'eric';
            function inner(){

                console.log(xo);
            }

            return inner;
        }

        var ret = func()
        ret()



    示例三:
        xo = "alex";

        function func(){
            var xo = 'eric';
            function inner(){

                console.log(xo);
            }
            var xo = 'tony';

            return inner;
        }

        var ret = func()
        ret()

    ================= 4. 函数内局部变量 声明提前 ==================

    function func(){
        console.log(xxoo);
    }

    func();
    // 程序直接报错

    function func(){
        console.log(xxoo);
        var xxoo = 'alex';
    }
    解释过程中:var xxoo;

    func();
    // undefined

14、JavaScript面向对象

    JavaScript面向对象
        function foo(){
            var xo = 'alex';
        }

        foo()



        function Foo(n){
            this.name = n;
            this.sayName = function(){
                console.log(this.name);
            }
        }

        var obj1 = new Foo('we');
        obj1.name
        obj1.sayName()


        var obj2 = new Foo('wee');
        obj2.name
        obj2.sayName()
        ==============》
            a. this代指对象(python self)
            b. 创建对象时, new 函数()


    Python的面向对象:
        class Foo:
            def __init__(self,name):
                self.name = name

            def sayName(self):
                print(self.name)

        obj1 = Foo('we')

        obj2 = Foo('wee')


    原型:

        function Foo(n){
            this.name = n;
        }
        # Foo的原型
        Foo.prototype = {
            'sayName': function(){
                console.log(this.name)
            }
        }


        obj1 = new Foo('we');
        obj1.sayName()

        obj2 = new Foo('wee');


              
        
小结:CSS重要的标签
    position
    background
    text-align
    margin
    padding
    font-size
    z-index
    over-flow
    :hover
    opacity
    float (clear:both)
    line-height
    border
    color
    display
    
补充:页面布局
主站—
    <div class='pg-header'>
           <div style='width:980px;margin:0 auto;'>
               内容自动居中
           </div>
    
    </div>
    <div  class='pg-content'></div>
    <div  class='pg-footer'></div>
后台管理布局:
position:
    fiexd    -- 永远固定在窗口的某个位置
    relative -- 单独无意义
    absolute -- 第一次定位,可以在指定位置,滚轮滚动时,不在了。。。。
    
a. 
    左侧菜单跟随滚动条
b. 
    左侧以及上不不动   ******






            
        
jQuery