补充1：页面布局

一般像京东主页左侧右侧都留有空白，用margin：0 auto居中，一般.w。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{

            margin: 0;

        }

        .w{

            width: 980px;

            margin: 0 auto;

            border: 1px solid green;

        }

    </style>

</head>

<body>

    <div style="background-color: black;color: white">

        <div class="w">标题</div>

    </div>

    <div>

        <div class="w">内容</div>

    </div>

</body>

</html>

补充2：页面清除浮动

之前都是用clear:both

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>
.clearfix:after {

     visibility: hidden;

     display: block;

     font-size: 0;

     content: " ";

     clear: both;

     height: 0;

}
 </style> </head> <body> <div style="background-color: #3ba354" class="clearfix"> <div style="border: 1px solid red;width: 100px;height: 100px;float: left"></div> <div style="border: 1px solid red;width: 100px;height: 100px;float: left"></div> <div style="border: 1px solid red;width: 100px;height: 100px;float: left"></div> <div style="border: 1px solid red;width: 100px;height: 100px;float: left"></div> </div> </body> </html>

.clearfix:after对clearfix类里面的孩子做点什么

display:none隐藏，位置都不留　　visibility：hidden隐藏，位置留着

一般页面都需要，放在commons.css,引入

补充3：页面响应式布局

页面布局随着页面大小变化

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        @media (min-width: 800px) {

            .item {

                float: left;

                width: 20%;

            }

        }

        @media (max-width: 600px) {

            .item{

                float: left;

                width: 25%;

            }

        }

    </style>

</head>

<body>

    <div class="item">

        <label>用户名</label>

        <input type="text">

    </div>

    <div  class="item">

        <label>用户名</label>

        <input type="text">

    </div>

    <div class="item">

        <label>用户名</label>

        <input type="text">

    </div>

    <div class="item">

        <label>用户名</label>

        <input type="text">

    </div>

    <div class="item">

        <label>用户名</label>

        <input type="text">

    </div>

</body>

</html>

补充四：事件绑定的两种方式

阻止默认事件的发生 return false

方式1（直接在标签中绑定事件）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Title</title>

</head>

<body>

    <a href="http://www.baidu.com" onclick="return func();">揍你</a>

    <script>

        function  func() {

            alert(123);

            return false;

        }

    </script>

</body>

</html>

方式2（在js中找到这个标签再绑定事件）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Title</title>

</head>

<body>

    <a href="http://www.baidu.com" id="i1">揍你</a>

    <script>

        document.getElementById('i1').onclick = function () {

            alert(123);
　　　　　　　return false;

        }

    </script>

</body>

</html>

应用：用户没输入就不让他往后台发

input标签取值用value，其他标签用innerText

方式一：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form action="http://www.baidu.com">

        <input type="text" id="user" name="user"/>

        <input type="submit" value="提交" onclick="return func()"/>

    </form>

    <script>

        function func() {

            var v = document.getElementById('user').value;

            if (v.length){

                return true;

            }else {

                alert('请输入内容')

                return false;

            }

        }

    </script>

</body>

</html>

方式二：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form action="http://www.baidu.com">

        <input type="text" id="user" name="user"/>

        <input type="submit" id="sb" value="提交"/>

    </form>

    <script>

        document.getElementById('sb').onclick = function () {

            var v = document.getElementById('user').value;

            if (v.length){

                return true

            }else {

                alert('输入内容');

                return false

            }

        }

    </script>

</body>

</html>

补充五：this

this表示当前触发事件的标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!--<div id="i1">-->

        <!--whatever-->

    <!--</div>-->

    <div onclick="oclick(this);">anyway</div>

</body>

    <!--<script>-->

        <!--document.getElementById('i1').onclick = function () {-->

            <!--var v = this.innerHTML-->

            <!--alert(v)-->

        <!--}-->

    <!--</script>-->

    <script>

        function oclick(sel){

            var v = sel.innerHTML;

            alert(v);

        }

    </script>

</html>

应用：文本框有默认值，鼠标放在文本框里面，默认值消失，鼠标点文本框外，默认值出现。

用了两种绑定事件，一个标签可以绑定多个不同的事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!--<input type="text" value="请输入关键字" onfocus="ofocus(this);"onblur="oblur(this);"/>-->

    <input id="test" type="text" value="请输入关键字"/>

</body>

    <script>

//        function ofocus(ths) {

//            var v = ths.value;

//            if (v == '请输入关键字'){

//                ths.value = '';

//            }

//        }

//        function oblur(ths){

//            var v = ths.value;

//            if(v.length==0){

//                ths.value='请输入关键字'

//            }

//        }

        document.getElementById('test').onfocus = function () {

            var v = this.value;

            if (v == '请输入关键字'){

                this.value = '';

            }

        }

        document.getElementById('test').onblur = function () {

            var v = this.value;

            if(v.length==0){

                this.value = '请输入关键字'

            }

        }

    </script>

</html>

补充六：一个标签绑定多个相同的事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Title</title>

</head>

<body>

    <div id="i1" onclick="console.log(1);" >鸡建明</div>

    <script>

//        document.getElementById('i1').onclick = function () {

//            console.log(2);

//        }

        document.getElementById('i1').addEventListener('click',function () {

            console.log(2);

        })

    </script>

</body>

</html>

补充七：事件执行顺序

捕获 true

冒泡

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Title</title>

</head>

<body>

       <!--<div id="i1" style="height: 400px;width: 400px;background-color: red" onclick="alert(1);">-->

        <!--<div id="i2" style="height: 300px;width: 300px;background-color: green" onclick="alert(2);">-->

            <!--<div id="i3" style="height: 200px;width: 200px;background-color: antiquewhite" onclick="alert(3);"></div>-->

        <!--</div>-->

    <!--</div>-->

    <div id="i1" style="height: 400px;width: 400px;background-color: red" >

        <div id="i2" style="height: 300px;width: 300px;background-color: green" >

            <div id="i3" style="height: 200px;width: 200px;background-color: antiquewhite" ></div>

        </div>

    </div>

    <script>

            document.getElementById('i1').addEventListener('click',function () {alert(1);},true);

            document.getElementById('i2').addEventListener('click',function () {

                alert(2);

            },true);

            document.getElementById('i3').addEventListener('click',function () {

                alert(3);

            },true);

    </script>

</body>

</html>

补充八：event当前事件的信息

全局绑定事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Title</title>

</head>

<body>

    <input type="text" onkeydown="func(this,event);" />

    <script>

        function  func(ths,e) {

            console.log(ths,e);

        }

        window.onkeydown = function(e){

            console.log(e);

        }

    </script>

</body>

</html>

补充九：表单提交

1.submit

2.js  找到form这个标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title></title>

</head>

<body>

    <form id="f1" action="http://www.baidu.com">

        <input type="submit" value="提交" />

        <a onclick="submitForm();">提交</a>

    </form>

    <script>

            function submitForm() {

                document.getElementById('f1').submit();

            }

    </script>

</body>

</html>
window.location.href   获取当前url
window.location.href = "http://www.baidu.com"   跳转
window.location.reload() 重新加载当前页面

最新文章

  1. JAVA锁的膨胀过程和优化
  2. poj2763
  3. 使用MYSQL命令直接导入导出SQL文件
  4. sp_help 快速查看表结构、视图信息
  5. [CareerCup] 4.9 All Paths Sum 所有路径和
  6. hdoj-1233-还是畅通工程
  7. mybatis动态sql中where标签的使用
  8. Matlab实现单变量线性回归
  9. 设置HTTP header方式
  10. Android studio优点及快捷键
  11. JAVA二维数组小记
  12. 团队作业6——展示博客（Alpha）
  13. 我是如何理解Android的Handler模型_3
  14. Win7远程桌面：发生身份验证错误
  15. Spring boot中普通工具类不能使用@Value注入yml文件中的自定义参数的问题
  16. python调用PHP方法
  17. ajax基本原理
  18. ABP框架系列之十六：(Dapper-Integration-Dapper集成)
  19. pstStream-&gt;pstPack[i].pu8Addr详解
  20. vba遗传算法之非一致性突变

热门文章

  1. Linux htop 使用
  2. C++ 洛谷 P2704 [NOI2001]炮兵阵地
  3. 一套简单的web即时通讯——第三版
  4. HDU 5723：Abandoned country（最小生成树+算期望）
  5. HDU 5773：The All-purpose Zero（贪心+LIS）
  6. 如何实现LRU算法？
  7. 阿里云域名的ssl证书申请与腾讯服务器域名的证书安装
  8. c++学习书籍推荐《C和C++安全编码》下载
  9. .Net Core 学习依赖注入自定义Service
  10. markdown插入表格语法