1. HTML+CSS补充

- 布局：

                <style>

                    .w{

                        width:980px;margin:0 auto;

                    }

                </style>

                <body>

                    <div style='background-color:red;'>

                        <div class='w'>dsfg</div>

                    </div>

                </body>

清除浮动

                .clearfix:after{

                    content: '.';

                    display: block;

                    clear: both;

                    visibility: hidden;

                    height: 0;

                }

响应式布局 @media

            <style>

            @media (min-width: 800px){

                .item{

                    width: 20%;

                    float: left;

                }

            }

            @media (max-width: 800px){

                .item{

                    width: 33.3%;

                    float: left;

                }

            }

            </style>

2. DOM事件

- 如何绑定事件（2）

- 如何阻止默认事件的发生（2），DOM绑定事件的时候，必须在前面加return

         方法一：

             <a href="http://www.baidu.com" onclick="return func();">走一发</a>

             <script>

                function func() {

                    alert(123);

                    return false;

                }

             </script>

         方法二：

            <a href="http://www.google.com.hk" id="i1">走一发</a>

            <script>

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

                    alert('');

                    return false

                }

            </script>

匿名函数循环方式

setInterval(function () {},500)

实例：阻止空字符提交：

            <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>0){

                        return true;

                    }else{

                        alert('请输入内容222');

                        return false;

                    }

                };

            </script>

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

            <div id="i1">战争</div>

            <script>

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

                    var v = this.innerHTML;

                    alert(v);

                }

            </script>

- 一个标签可以绑定多个不同的事件

实例：获取焦点

<body>

    <input type="text" value="请输入关键字" onfocus="fuckFocus(this);" onblur="fuckBlur(this);"/>

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

    <script>

        /*

        当标签获取焦点时，执行该函数

         */

        function  fuckFocus(ths) {

            // value   innerText   innerHtml

            var v = ths.value;

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

                ths.value = "";

            }

        }

        /*

        当标签失去焦点时

         */

        function fuckBlur(ths) {

            var v = ths.value;

            if(v.length == 0){

                ths.value = "请输入关键字";

            }

        }

    </script>

</body>

- 绑定多个相同的事件

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

    <script>

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

            console.log(2);

        })

    </script>

- 事件执行顺序：

　　- 冒泡：从内向外查找

       <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>

　　- event是当前事件的信息，

window.onkeydown监控全局事件

捕获用户按下ctrl键

<body>

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

    <script>

        function  func(ths,e) {

            console.log(ths,e);

        }

        window.onkeydown = function(j){

            console.log(j);
　　　　　　　console.log(j['j'])

        }

    </script>

</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>
window.location.href   获取当前url

window.location.href = "http://www.baidu.com"   跳转

window.location.reload() 重新加载当前页面

HTML+CSS补充的更多相关文章

  1. CSS补充与JavaScript基础

    一.CSS补充 position 1.fiexd 固定在页面的某个位置; 示例将顶部菜单始终固定在页面顶部 position: fixed; 将标签固定在某个位置 right: 0; 距离右边0像素 ...

  2. CSS补充之--页面布局、js补充，dom补充

    CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...

  3. css补充、JavaScript、Dom

    css补充: position: fixed:可以将标签固定在页面的某个位置 absolute+relative:通过两者的结合可以让标签在一个相对的位置 代码例子:(通过fixed标签将某些内容固定 ...

  4. 53、css补充

    css其余问题补充 一.默认的高度和宽度问题 1.父子都是块级元素 <!DOCTYPE html> <html> <head> <title>...&l ...

  5. 5、css补充

    css其余问题补充 本篇导航: 默认的高度和宽度问题 后台管理布局 css响应式布局 一.默认的高度和宽度问题 1.父子都是块级元素 <!DOCTYPE html> <html> ...

  6. 第五篇、css补充二

    一.内容概要 1.图标 2.目录规划 3.a标签中的img标签在浏览器中的适应性 4.后台管理系统设置 5.边缘提示框 6.登录页面图标 7.静态对话框 8.加减框 补充知识: line-height ...

  7. 前端之CSS：CSS补充

    css样式之补充... css常用的一些属性: 1.去掉下划线 :text-decoration:none ;2.加上下划线: text-decoration: underline; 3.调整文本和图 ...

  8. Python之路【第十一篇续】前端之CSS补充

    CSS续 1.标签选择器 为类型标签设置样式例如:<div>.<a>.等标签设置一个样式,代码如下: <style> /*标签选择器,如果启用标签选择器所有指定的标 ...

  9. CSS 补充

    属性选择器下面的例子为带有 title 属性的所有元素设置样式:[title]{ color:red;} <h1>可以应用样式:</h1><h2 title=" ...

随机推荐

  1. day02编程语言介绍及python介绍

    编程语言介绍 机器语言:以二进制数为代码的编程语言,直接控制硬件运行 优点:执行效率非常快 缺点:以二进制数为编码编程,编程效率非常低下,掌握它需要深厚的硬件原理功底 汇编语言:将二进制编码用英文字符 ...

  2. Guarding the Chessboard(UVa 11214)

    本题题意: 输入一个n*m的棋盘,某些格子有标记,用最少的皇后占据或者攻击所以带标记的格子.皇后的攻击范围为同行同列和同对角线. 可以使用IDA*算法,即从样例可以发现只需要最多5个棋子就可以对棋盘上 ...

  3. Python 3.5 in win10 pip install Orange3

    http://www.lfd.uci.edu/%7Egohlke/pythonlibs/ 下载Orange3 以及 依赖包 注意网页上标出的Orange 的依赖,以及 https://github.c ...

  4. MySQL Transaction--事务相关查询

    MySQL支持的四种事务隔离级别 READ-UNCOMMITTED READ-COMMITTED REPEATABLE-READ SERIALIZABLE 查看全局事务隔离级别和会话事务隔离级别 SH ...

  5. Hasura GraphQL 内部表结构

    Hasura 使用pg 数据库存储引擎的元数据信息,在hdb_catalog schema 下面,是在初始化的时候生成的 对于表的管理.权限的信息存储都在这个schema下 hdb_table 这个表 ...

  6. GCC related commands

    GCC   -l  option is to link the library. It can use for static and share link.  Link -l with library ...

  7. opencv人脸识别代码

    opencv人脸识别C++代码 /* * Copyright (c) 2011,2012. Philipp Wagner <bytefish[at]gmx[dot]de>. * Relea ...

  8. Tensorflow 笔记

    TensorFlow笔记-08-过拟合,正则化,matplotlib 区分红蓝点 TensorFlow笔记-07-神经网络优化-学习率,滑动平均 TensorFlow笔记-06-神经网络优化-损失函数 ...

  9. 求两个数的平均值，不能只用（a+b）/2的方法

    #include<stdio.h> int avg1(int a, int b) { //利用移位操作符 //右移移位相当于——>除以2 :(a+b)>>1 //考虑到溢 ...

  10. BinaryReader 自己写序列化

    听说过BinaryReader和BinaryWriter吗? 序列化无非就是网络通信时所使用的传输数据的方式,而BinaryWriter可以将数据以二进制的方式写入到流当中.比如Int32型的1用Bi ...