1.在html中引入css和jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css文件"> #引入css文件
</head>
<body>
    <script src="jquery-1.12.4.js"></script>#引入jQuery文件,src为路径

</body>
</html>

2.jQuery对象与DOM对象互相转化

  将jQuery转化为DOM: $("#i1")[0] = dom

  将DOM转化为jQuery: $(dom) = jQuery

             $(dom)=jquery

                    【$('<div id='i1'>123</div>') = [div#i1]或

d='<div id='i1'>123</div>'

$(d) = [div#i1]】

3.jQuery查找元素,选择器

  • id

    <div id='i1'>ww</div>

    $('#i1')

  • class

    <div class='c1'>123</div>

    $('.c1')

  • 标签

    <div class='c1'>

      <a>f</a>

      <a>f</a>

    </div>

    $('a')找到所有的a标签

  • 多选择器组合查找

    $('#i1,.c1,a')  

  • 层级选择器

    $('#i1 a')  找div id=‘i1’内的所有a标签,包括子子孙孙

    $('#i1 > a')  只找div id='i1'内的所有子a标签,不包括孙a标签,所谓的孙a标签就是子div下的a标签

    $('#i1 + a')   找div i1的下一个a标签,此a标签跟i1是同一级的

$('#i1 ~ a')  找div i1下边的所有兄弟标签,i1上边的就不找,此a标签跟i1是同一级的

    $('#i1 a:first') 找div id='i1'内的第一个a标签 【还有last找最后一个】

    $('#i1 a:eq(0)') 找div id='i1'内的所有a标签的第0个a标签【eq是等于的意思,0是索引,还有lt小于,gt大于  】

$('#i1').text()  获取div id='i1'内的内容

    $('#i1').next()  找div id='i1'的下一个兄弟标签

    $('#i1').prev()  找div id='i1'的上一个兄弟标签 

    $('#i1').prev()  找div id='i1'的上边的所有兄弟标签

    $('#i1').parent()  找div id='i1'的父标签

    $('#i1').children()  找div id='i1'的所有孩子标签

    $('#i1').siblings()  找div id = 'i1'的所有兄弟标签

    $('#i1').find('c1')  找div id='i1'内的所有class为‘c1’的标签

    $('#i1').addClass('c1')  找到div id='i1'并给该div添加class 'c1'

    $('#i1').removeClass('c1')  找到div id='i1'并给该div去掉class 'c1'

    $('#i1').hasClass('c1')  找到div id='i1'并判断该div是否有class 'c1',有则返回true

    $('#i1').toggleClass('c1') 找到div id='i1'并判断该div是否有class 'c1',有则去掉c1,没有则添加c1

    $('#i1').parents() 找div id='i1'的父标签以及祖宗标签,一直到html标签

    $('#i1').parentsUntil('.c1')  找div id='i1'的父标签以及祖宗标签,一直到class='.c1'标签结束

  • 属性选择器  

    $('[alex]') 找所有属性为alex的标签。【<a alex='123'></a> <p alex='456'></p>,会找到这两个属性为alex的a、p标签】

    $('[alex="123"]')  找属性为alex="123"的标签,注意引号的不同

$(':disabled')  找到所有不可编辑的标签【<input type='text' disabled />,disabled表示该输入框不可输入内容,enabled表示可以输入内容】

  • 文本操作

  $('#i1').text() # 获取文本内容
  $('#i1').text(“1”) # 设置文本内容

  $('#i1').html() #获取文本内容加网页标签
  $('#i1').html("<a>1</a>")#设置文本内容加网页标签

  $('#i1').val()  #获取value的值
  $('#i1').val(..)#设置value的值

  • 属性操作

  <input id='i1' type='button' value='取消' />

  $('#i1').attr('value') #获取div id='i1'内的属性value的值

  $('#i1').attr('value','new') #设置div id='i1'内的属性value的值为new,这种方式也可以新加一个属性

  $('#i1').removeAttr('value') #删除i1标签内的value属性 

  # prop()专门用于chekbox,radio框的选中操作
  $('#i1').prop('checked')   #获取i1标签内checkbox的checked值,打上对勾则返回true
  $('#i1').prop('checked', true) #设置i1标签内checkbox的checked值,true为打上对勾

  $('#i1').prop('checked', false) #设置i1标签内checkbox的checked值,false为去掉对勾

  $('.c1').index(2) #获取索引值2对应的标签

  • 文档操作

  $('#i1').append(temp)  #在i1标签内部的最后添加temp,此处temp为变量 

  $('#i1').prepend(temp)  #在i1标签内部的前边添加temp,此处temp为变量 

  $('#i1').after(temp)  #在i1标签外部的下边添加一个兄弟temp,此处temp为变量

  $('#i1').before(temp)  #在i1标签外部的上边添加一个兄弟temp,此处temp为变量

  $('#i1').remove()  # 找到i1标签并将该标签删除

  $('#i1').eq(index).remove()  #index为一个数值,找到i1标签内index值为对应值的标签并删除

  $('#i1').eq(index).clone() #index为一个数值,找到i1标签内index值为对应值的标签并复制

  • css样式操作 
    var tag = document.createElement('span');  #增加一个新标签span,这时tag为DOM对象
   $(tag).css('color','green');    #将DOM对象转换为jQuery对象,给标签span添加样式:颜色为green
  $(tag).css('position','absolute');  #给标签添加样式position
  $(tag).css('fontSize',fontSize + "px");  #给标签添加样式字体大小
  $(tag).css('right',right + "px"); #给标签添加样式右边距
  $(tag).css('top',top + 'px'); #给标签添加样式上边距
  $(tag).css('opacity',opacity); #给标签添加样式 透明度
  • 位置操作 

  $(window).scroolTop()  获取当前滚动条的位置

  $(window).scroolTop(0) 返回顶部,即给滚动条设置一个位置

  $(window).scroolLeft(0) 返回左部

  

  $('#i1').height()   =height #获取标签高度,不包括边框宽度

  $('#i1').innerHeight()  =padding-top + height + padding-bottom#获取标签定义高度+内边距高度

  $('#i1').outerHeight()  =boder-top + padding-top + height + padding-bottom + boder-bottom#获取标签定义高度+上下内边距高度+上下边框宽度

  $('#i1').outerHeight(true)  =boder-top + padding-top + height + padding-bottom + boder-bottom + margin-top + margin-bottom #获取标签定义高度+上下内边距高度+上下边框宽度+上下外

  边距

  $('#i1').offset()  获取坐标   {top:20,left:30}

  $('#i1').offset().top  获取i1标签距离顶部的高度

  $('#i1').offset().left  获取i1标签距离左部的高度

  $('#i1').position()  i1标签中含有position=absolute样式,该方法会获取i1标签与含有position=relative标签的距离

  • jQuery绑定事件的四种方式:(以click事件举例)

   1.$('#i1').click(function(){ })  #没有委托属性,新添加的标签,不能立即绑定事件

   2.$('#i1').bind('click',function(){   #没有委托属性,新添加的标签,不能立即绑定事件

      }) 绑定  

      $('#i1').unbind('click',function(){   解绑

      })

   3.$('#i1').delegate('a','click',function(){  })  绑定  #给i1标签下的所有a标签绑定事件。有委托属性,新添加的标签,立即可以绑定事件

      $('#i1').undelegate('a','click',function(){  })  解绑

   4.$('#i1').on('click', function(){ })  绑定 #没有委托属性,新添加的标签,不能立即绑定事件

      $('#i1').on('click', function(){ })  解绑

4.实现全选反选取消框

$('#tb:checkbox').prop('checked');         获取值
$('#tb:checkbox').prop('checked', true); 设置值
-
jQuery方法内置循环: 
- $('#tb:checkbox').each(function(){
       // this,在DOM中指代当前循环的元素
})
- var v = 条件 ? 真值 : 假值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="全选" onclick="checkAll()" />
    <input type="button" value="反选" onclick="reverseAll()" />
    <input type="button" value="取消" onclick="cancle()" />

    <table border="1">
        <thead>
            <tr>
                <th>选项</th>
                <th>选项</th>
                <th>选项</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"/></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr><tr>
                <td><input type="checkbox"/></td>
                <td>2.2.2.2</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $('#tb :checkbox').prop('checked',true);
        }
    </script>

    <script>
        function reverseAll() {
            $('#tb :checkbox').each(function () {
                //each()函数会循环遍历jQuery找到的所有标签,并给这些标签执行某函数
                //this指代当前正在循环的标签(是DOM对象)
                /* dom实现方式
                if(this.checked){  //表示如果this.checked为true,不要写成this.checked = true
                    this.checked = false;
                }else {
                    this.checked = true;
                }
                */
                /*jQuery实现方式*/
                if($(this).prop('checked')){  //若果checkbox被选中,则$(this).prop('checked')返回true
                    $(this).prop('checked',false);
                }else {
                    $(this).prop('checked',true);
                }
            })
        }
    </script>

    <script>
        function cancle() {
            $('#tb :checkbox').prop('checked',false);
        }
    </script>

</body>
</html>

5.jQuery支持链式编程

菜单栏显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color: black;
            color: wheat;
        }
        .content{
            min-height: 50px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div style="height:400px;width: 200px;border: 1px solid #dddddd">
        <div class="item">
            <div class="header">标题一</div>
            <div id="i1" class="content hide">内容</div>
        </div>
        <div class="item">
            <div class="header">标题二</div>
            <div class="content hide">内容</div>
        </div>

        <div class="item">
            <div class="header">标题三</div>
            <div class="content hide">内容</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.header').click(function(){
            //jQuery支持链式编程,可以一直点下去
            $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
        })
    </script>
</body>
</html>

6.表格页面编辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .modal{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #eeeeee;
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }
    </style>
</head>
<body>
    <a onclick="addElement();">添加</a>

    <table border="1" id="tb">
        <tr>
            <td target="hostname">1.1.1.11</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.12</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.13</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.14</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>

        </tr>
    </table>

    <div class="modal hide">
        <div>
            <input name="hostname" type="text"  />
            <input name="port" type="text" />
            <input name="ip" type="text" />
        </div>

        <div>
            <input type="button" value="取消" onclick="cancelModal();" />

        </div>
    </div>

    <div class="shadow hide"></div>

    <script src="jquery-1.12.4.js"></script>
    <script>

        $('.del').click(function () {
            $(this).parent().parent().remove();
        });

        }

        function  addElement() {
            $(".modal,.shadow").removeClass('hide');
        }
        function cancelModal() {
            $(".modal,.shadow").addClass('hide');
            $('.modal input[type="text"]').val("");
        }

        $('.edit').click(function(){
            $(".modal,.shadow").removeClass('hide');
            // this指代$(".modal,.shadow")获取的标签
            var tds = $(this).parent().prevAll();
            tds.each(function () {
                // 获取td的target属性值
                var n = $(this).attr('target');
                // 获取td中的内容
                var text = $(this).text();
                var a1 = '.modal input[name="';
                var a2 = '"]';
                var temp = a1 + n + a2;
                $(temp).val(text);
            });

        });
    </script>
</body>
</html>

7.标签的添加、删除、复制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="t1" type="text" />
    <input id="a1" type="button" value="添加" />
    <input id="a2" type="button" value="删除" />
    <input id="a3" type="button" value="复制" />

    <ul id="u1">

        <li>1</li>
        <li>2</li>

    </ul>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#a1').click(function () {  //添加
            var v = $('#t1').val();  //获取输入框的值
            var temp = "<li>" + v + "</li>";  //拼接要添加的内容
            // $('#u1').append(temp);
            $('#u1').prepend(temp);
            // $('#u1').after(temp)
            // $('#u1').before(temp)
        });

        $('#a2').click(function () {  //删除
            var index = $('#t1').val();
            $('#u1 li').eq(index).remove();
            //$('#u1 li').eq(index).empty();  使标签为空
        });
        $('#a3').click(function () {  //复制
            var index = $('#t1').val();
            var v = $('#u1 li').eq(index).clone();
            $('#u1').append(v);

        })
    </script>
</body>
</html>

8. 获取输入框的内容并添加到表格,删除表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .modal{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #eeeeee;
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }
    </style>
</head>
<body>
    <a onclick="addElement();">添加</a>

    <table border="1" id="tb">
        <tr>
            <td target="hostname">1.1.1.11</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.12</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.13</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.14</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a class="del">删除</a>
            </td>

        </tr>
    </table>

    <div class="modal hide">
        <div>
            <input name="hostname" type="text"  />
            <input name="port" type="text" />
            <input name="ip" type="text" />
        </div>

        <div>
            <input type="button" value="取消" onclick="cancelModal();" />
            <input type="button" value="确定" onclick="confirmModal();" />
        </div>
    </div>

    <div class="shadow hide"></div>

    <script src="jquery-1.12.4.js"></script>
    <script>

        $('.del').click(function () {  //删除操作
            $(this).parent().parent().remove();
        });

        function  confirmModal() {
          //笨拙的简单添加表格
            var tr = document.createElement('tr');
            var td1 = document.createElement('td');
            td1.innerHTML = "11.11.11.11";
            var td2 = document.createElement('td');
            td2.innerHTML = "8001";

            $(tr).append(td1);
            $(tr).append(td2);

            $('#tb').append(tr);

            $(".modal,.shadow").addClass('hide');
//            $('.modal input[type="text"]').each(function () {
//                // var temp = "<td>..."
//
//
//
//            })
        }

        function  addElement() {
            $(".modal,.shadow").removeClass('hide');
        }
        function cancelModal() {
            $(".modal,.shadow").addClass('hide');
            $('.modal input[type="text"]').val("");
        }

        $('.edit').click(function(){
            $(".modal,.shadow").removeClass('hide');
            // this
            var tds = $(this).parent().prevAll();
            tds.each(function () {
                // 获取td的target属性值
                var n = $(this).attr('target');
                // 获取td中的内容
                var text = $(this).text();
                var a1 = '.modal input[name="';
                var a2 = '"]';
                var temp = a1 + n + a2;
                $(temp).val(text);
            });

//            var port = $(tds[0]).text();
//            var host = $(tds[1]).text();
//
//            $('.modal input[name="hostname"]').val(host);
//            $('.modal input[name="port"]').val(port);
            // 循环获取tds中内容
            // 获取 <td>内容</td> 获取中间的内容
            // 赋值给input标签中的value

        });
    </script>
</body>
</html>

9.点赞动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding: 50px;
            border: 1px solid #dddddd;
        }
        .item{
            position: relative;
            width: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.item').click(function () {
            AddFavor(this);
        });

        function AddFavor(self) {  //self指代参数
            // DOM对象
            var fontSize = 15;
            var top = 0;
            var right = 0;
            var opacity = 1;

            var tag = document.createElement('span');
            $(tag).text('+1');    //添加样式
            $(tag).css('color','green');
            $(tag).css('position','absolute');
            $(tag).css('fontSize',fontSize + "px");
            $(tag).css('right',right + "px");
            $(tag).css('top',top + 'px');
            $(tag).css('opacity',opacity);
            $(self).append(tag);

            var obj = setInterval(function () {
                fontSize = fontSize + 10;  //自增自减
                top = top - 10;
                right = right - 10;
                opacity = opacity - 0.1;

                $(tag).css('fontSize',fontSize + "px");
                $(tag).css('right',right + "px");
                $(tag).css('top',top + 'px');
                $(tag).css('opacity',opacity);
                if(opacity < 0){     //当样式达到要求时,为防止函数继续执行,需在这里将定时函数清除
                    clearInterval(obj);
                    $(tag).remove(); //同时将增加的样式也清除
                }
            }, 40);

        }
    </script>

</body>
</html>

10.实现可拖动的标签

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;"></div>
        <div style="height: 300px;"></div>
    </div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
    $(function(){
        $('#title').mouseover(function(){
            $(this).css('cursor','move');
        });
        $("#title").mousedown(function(e){
            //console.log($(this).offset());
            var _event = e || window.event;
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;

            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;

            $('#title').on('mousemove', function(e){
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;

                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);

                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');

            })
        });
        $("#title").mouseup(function(){
            $("#title").off('mousemove');
        });
    })
</script>
</body>
</html>

11. find发现多个标签类型;判断输入框是否为空,若空则会报‘必填’;等框架加载出来就会执行函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color: red;
        }
    </style>
</head>
<body>

    <form id="f1" action="s5.html" method="POST">
        <div><input name="n1" tex = "用户名" type="text" /></div>
        <div><input name="n2" tex = "密码" type="password" /></div>
        <div><input name="n3" tex = "邮箱" type="text" /></div>
        <div><input name="n4" tex = "端口" type="text" /></div>
        <div><input name="n5" tex = "IP" type="text" /></div>

        <input type="submit" value="提交" />
        <img src="...">
    </form>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function(){// 当页面框架加载完毕后,自动执行函数,如果不加这个自执行函数,则会等当页面所有元素完全加载完毕后,再执行
            $(':submit').click(function () {
                $('.error').remove();
                var flag = true;
                $('#f1').find('input[type="text"],input[type="password"]').each(function () {
                    var v = $(this).val();
                    var n = $(this).attr('tex');
                    if(v.length <= 0){
                        flag = false;
                        var tag = document.createElement('span');
                        tag.className = "error";
                        tag.innerHTML = n + "必填";
                        $(this).after(tag);   //在标签的后边添加tag标签
                        // return false;  当第一个输入框未填内容时,函数不会继续执行
                    }
                });
                return flag;
        });
        });

    </script>
</body>
</html>

12.自定义jQuery扩展两种方式

  方式一: 

  <script>

    $.fn.extend({

      'wangsen':function() {

        return 'sb';

        }

    });

    $('#i1').wangsen(); //调用方式

  </script>

  方式二:

  <script>

    $.extend({

      'wangsen':function() {

        return 'sb';

        }

    });

    $.wangsen(); //调用方式

  </script>

  方式三:将扩展写成.js文件,一定要写成自执行函数,方便封装自己的全局变量。

    【使用其他现成的jQuery扩展:<script src='zidingyi.js'></script>】

/**
 * Created by wt on 2016/11/26.
 */
(function (arg) {
    var status = 1;  //封装的自己的全局变量
    arg.extend({     //自定义的扩展函数
       'wangsen': function () {
           return 'sb';
       }
    });
})(jQu$ery); //一定要写参数为jQuery

网页设计之jQuery的更多相关文章

  1. Httpster –世界各地最潮的网页设计案例聚合网站

    Httpster 这个网站聚合了世界各地最新最潮的网页设计案例,展示了创意的设计,精心的策划,优秀的排版.这些作品都按月份和类别进行了很好划分,你可以方便的找到自己感兴趣的网站案例. 立即去看看 您可 ...

  2. 手机web——自适应网页设计(html/css控制)

    一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name=" ...

  3. FROONT – 超棒的可视化响应式网页设计工具

    FROONT 是一个基于 Web 的设计工具,在浏览器中运行,使得各类可视化设计的人员都能进行响应式的网页设计,即使是那些没有任何编码技能的设计师.FROONT 使得响应式网页设计能够可视化操作,能够 ...

  4. 网页设计、java、Andorid资源清单整理

    多学多练做笔记很重要. 赤裸裸的干货非鸡汤 网页设计的主要技术:    Html,    Js,    Css,    Ps       HTML/HTML5     网页的基础Html必须知道的.但 ...

  5. paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结

    paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...

  6. PS网页设计教程XXX——在PS中创建一个漫画书主题网页布局

    作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,“熟读唐诗三百首,不会作诗也会吟”. 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试 ...

  7. css+div网页设计(二)--布局与定位

    在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子 ...

  8. 【转】手机web——自适应网页设计(html/css控制)

    手机web——自适应网页设计(html/css控制) 就目前形势来看,Web App 正是眼下的一个趋势和潮流,但是,对于Web App的设计可能大家有的不是很了解,下面就将整理好的网页设计的技巧奉献 ...

  9. 常用网站--前端开发类+网页设计类+平面素材类+flash类

    前端开发类 animate CSS 前端开发网 我爱CSS 大家网 W3School jQuery开发技术详解教程视频 jQuery中文社区 jQueryChina 网页设计类 禅意花园 CSS Do ...

随机推荐

  1. 【六年开源路】FineUI家族今日全部更新!

      FineUI(开源版) 基于 ExtJS 的开源 ASP.NET 控件库 FineUI的使命 创建 No JavaScript,No CSS,No UpdatePanel,No ViewState ...

  2. 地理信息系统 - ArcGIS - 高/低聚类分析工具(High/Low Clustering ---Getis-Ord General G)

    前段时间在学习空间统计相关的知识,于是把ArcGIS里Spatial Statistics工具箱里的工具好好研究了一遍,同时也整理了一些笔记上传分享.这一篇先聊一些基础概念,工具介绍篇随后上传. 空间 ...

  3. 2016 Web开发资源工具大搜罗

    来源于:https://zhuanlan.zhihu.com/p/22730771 作者:余博伦链接:https://zhuanlan.zhihu.com/p/22730771来源:知乎著作权归作者所 ...

  4. OC中的@property详解

    简介: @property 生成了变量的get set 方法,同时指定了变量名称. 例如@property (nonatomic,strong) NSString *name;表示生成了_name私有 ...

  5. 在asp.net mvc4项目里bootstrap datetimepicker控件的使用

    前段时间写了一篇关于调用阿里大于的短信接口来开发例会短信群发通知功能的文章http://www.cnblogs.com/zhouyuangan/p/apicall_1.html,其中的例会时间是需求中 ...

  6. 配置javac环境

    初始的javac是默认不可用,如下图: 系统变量->新建->变量名:JAVA_HOME 变量值:(C:\Program Files\Java\jdk1.7.0_03)(这只是我的JDK安装 ...

  7. UIDynamic(捕捉行为)

    一.简介 可以让物体迅速冲到某个位置(捕捉位置),捕捉到位置之后会带有一定的震动 UISnapBehavior的初始化 - (instancetype)initWithItem:(id <UID ...

  8. java中的System类

    System类代表系统,系统级的很多属性和控制方法都放置在该类的内部.该类位于java.lang包. 由于该类的构造方法是private的,所以无法创建该类的对象,也就是无法实例化该类.其内部的成员变 ...

  9. Webpack--自学笔记

    原文--http://webpack.github.io/docs/tutorials/getting-started/ 什么是webpack? webpack是一个模块打包器.webpack把模块( ...

  10. iOS-不用网线搭建IPv6网络测试环境

    前言 从6月1日开始苹果要求之后审核的项目必须支持iPv6,如果不支持将被拒绝,掘金最近一次审核被就被拒绝了....理由为下: Apps are reviewed on an IPv6 network ...