补充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() 重新加载当前页面

html+css+dom补充的更多相关文章

  1. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  2. 第八十五节，css布局补充一

    css布局补充一 图片边框问题 注意css布局时img图片标签默认有的浏览器有边框,所以大多时候需要去除图片的边框 CSS各种居中方法 水平居中的text-align:center 和 margin: ...

  3. css杂项补充

    css杂项补充 一.块与内联 1.块 独行显示 支持宽高,宽度默认适应父级,高度默认由子级或内容撑开 设置宽高后,采用设置的宽高 2.内联 同行显示 不支持宽高 margin上下无效果,左右会起作用, ...

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

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

  5. [CSS] DOM Hierarchy Pseudo Classes :first-child :last-child :nth-child (demystified)

    DOM hierarchy pseudo-classes allow you to style specific elements based on where they fall in the hi ...

  6. css选择器补充

    前面文章总结了常用的8种选择器,今天再来补充5中选择器,其中一部分是css3中新加入的. 1.相邻选择器 E+F { sRules } 相邻选择符只会命中符合条件的相邻的兄弟元素. 2.兄弟选择器 E ...

  7. javaScript中的DOM补充

    一.DOM树 二.DOM节点 DOM 是这样规定的:    整个文档是一个文档节点     每个 HTML 标签是一个元素节点     包含在 HTML 元素中的文本是文本节点     每一个 HTM ...

  8. Html,Css,Dom,javascript细节总结

    最近愈发觉得基础的重要性,细节决定成败,所以希望能够将自己注意到的搜集到的一些关于前端的小细节小知识整理出来,更好的方便自己记忆回顾. 1.在构建网页Html框架时,尽量只给外层标记(即是父标记)定义 ...

  9. css知识点补充、css属性、

    1.媒体查询的css代码的优先级要比其他的高! 2.text-overflow: 定义文本溢出父级元素如何处理!    clip/ellipsis/string 3.overflow: visible ...

随机推荐

  1. 使用回调的方式实现中间件-laravel

    $app = function ($request) { echo $request . "\n"; return "项目运行中....."; }; // 现在 ...

  2. python 基本数据类型之字符串功能

    字符串常用功能: # name.upper() #全部大写变小写 # name.lower() #全部小写变大写 # name.split() #分割 # name.find() #找到指定子序列的索 ...

  3. CentOS 6.x 安装 JDK1.8

    安装方式:rpm(此方式不需要手动配置环境变量) 1. 查看系统是否自带了jdk 查看centos是否自带了openjdk,如果有则卸载掉(当然也可以不卸载,但要注意冲突及版本的使用) # 查看 rp ...

  4. CDH CM元数据梳理，包括HIVE

      一.Schema SCM 表结构梳理(对应生产BAOFOO_SCM) AUDITS 登录信息.服务,角色重启.配置更改 PROCESSES 进程信息.这里面有很多信息.开放的web端口. HOST ...

  5. 设计模式-解释器模式（Interpreter）

    解释器模式是行为型模式的一种.给定一个语言(如由abcdef六个字符组成的字符串集合),定义它的文法的一种表示(S::=abA*ef,A::=cd)并定义一个解释器,解释器使用该表示来解释语言中的句子 ...

  6. 02(e)多元无约束优化问题- 梯度的两种求解方法以及有约束转化为无约束问题

    2.1 求解梯度的两种方法 以$f(x,y)={{x}^{2}}+{{y}^{3}}$为例,很容易得到: $\nabla f=\left[ \begin{aligned}& \frac{\pa ...

  7. Android安卓书籍推荐《Android驱动开发与移植实战详解》下载

    百度云下载地址:点我 Android凭借其开源性.优异的用户体验和极为方便的开发方式,赢得了广大用户和开发者的青睐,目前已经发展成为市场占有率很高的智能手机操作系统. <Android驱动开发与 ...

  8. 自定义HashSet判重标准

    HashSet在执行add时会首先根据目标类的hashcode判断是否有与其hashcode相同的对象,若有则使用equals该对象判断是否与其相同. HashSet保证了元素的唯一性, 我们可以通过 ...

  9. C# Linq 常用查询操作符

    限定操作: 1. All:用来确定是否序列中的所有元素都满足条件 2. Any:用来确定序列是否包含任何元素,有参方式用来确定序列中是否有元素满足条件 3. Contains:方法用来确定序列是否包含 ...

  10. Linux关闭进程。

    一.shell命令根据端口后关闭指定进程. $(netstat -nlp | | awk '{print $7}' | awk -F"/" '{ print $1 }') nets ...