html+css+dom补充

补充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补充的更多相关文章

dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
第八十五节，css布局补充一
css布局补充一图片边框问题注意css布局时img图片标签默认有的浏览器有边框,所以大多时候需要去除图片的边框 CSS各种居中方法水平居中的text-align:center 和 margin: ...
css杂项补充
css杂项补充一.块与内联 1.块独行显示支持宽高,宽度默认适应父级,高度默认由子级或内容撑开设置宽高后,采用设置的宽高 2.内联同行显示不支持宽高 margin上下无效果,左右会起作用, ...
CSS补充之--页面布局、js补充，dom补充
CSS补充之--页面布局主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...
[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 ...
css选择器补充
前面文章总结了常用的8种选择器,今天再来补充5中选择器,其中一部分是css3中新加入的. 1.相邻选择器 E+F { sRules } 相邻选择符只会命中符合条件的相邻的兄弟元素. 2.兄弟选择器 E ...
javaScript中的DOM补充
一.DOM树二.DOM节点 DOM 是这样规定的: 整个文档是一个文档节点每个 HTML 标签是一个元素节点包含在 HTML 元素中的文本是文本节点每一个 HTM ...
Html,Css,Dom,javascript细节总结
最近愈发觉得基础的重要性,细节决定成败,所以希望能够将自己注意到的搜集到的一些关于前端的小细节小知识整理出来,更好的方便自己记忆回顾. 1.在构建网页Html框架时,尽量只给外层标记(即是父标记)定义 ...
css知识点补充、css属性、
1.媒体查询的css代码的优先级要比其他的高! 2.text-overflow: 定义文本溢出父级元素如何处理! clip/ellipsis/string 3.overflow: visible ...

随机推荐

使用pymysql操作mysql数据库
PyMySQL的安装和连接 PyMySQL的安装 python3. -m pip install pymysql python连接数据库 import pymysql # 创建连接 conn = py ...
element-ui中轮播图自适应图片高度
哈哈,久违了各位.我又回来了,最近在做毕设,所以难免会遇到很多问题,需要解决很多问题,在万能的博友帮助下,终于解决了Element-ui中轮播图的图片高度问题,话不多说上代码. 那个axios的使用不 ...
Java中的关键字synchronized
1. 介绍在Java并发系列的文章中,这个是第二篇文章.在前面的一篇文章中,我们学习了Java中的Executor池和Excutors的各种类别. 在这篇文章中,我们会学习synchronized关 ...
单个单选框radio 点击选中点击取消选中
$("input:radio").click(function(){ var domName = $(this).attr('name');//获取当前单选框控件name 属性值 ...
实战Spring4+ActiveMQ整合实现消息队列(生产者+消费者)
引言: 最近公司做了一个以信息安全为主的项目,其中有一个业务需求就是,项目定时监控操作用户的行为,对于一些违规操作严重的行为,以发送邮件(ForMail)的形式进行邮件告警,可能是多人,也可能是一个人 ...
python 多个装饰器的调用顺序
python 多个装饰器的调用顺序一般情况下,在函数中可以使用一个装饰器,但是有时也会有两个或两个以上的装饰器.多个装饰器装饰的顺序是从里到外(就近原则),而调用的顺序是从外到里(就远原则). 原代 ...
free()函数释放一段分配的内存之陷阱
朋友们对malloc函数应该是比较熟悉了,此函数功能是分配一段内存地址,并且将内存地址给一个指针变量,最后记得再调用free函数释放这段内存地址就可以了,标准的流程对吧,好像没什么问题.但是按照此标准 ...
【拓扑排序】威虎山上的分配-C++
威虎山上的分配描述每年过年的时候,座山雕都会给兄弟们分银子,分银子之前,座山雕允许大伙儿发表意见,因为要是没法满足所有人的意见,指不定谁要搞出什么大新闻.不过每个人在提意见的时候只能说:" ...
通过sparkstreaming分析url的数据
spark version 1.6.2 scala verson 2.10.6 此代码参考官方例子---- 自定义接收器 import java.io.BufferedReader import or ...
pytorch实现yolov3(5) 实现端到端的目标检测
torch实现yolov3(1) torch实现yolov3(2) torch实现yolov3(3) torch实现yolov3(4) 前面4篇已经实现了network的forward,并且将netw ...

html+css+dom补充

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

随机推荐

热门专题