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="请输入关键字" οnfοcus="ofocus(this);"οnblur="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" οnclick="alert(1);">--><!--<div id="i2" style="height: 300px;width: 300px;background-color: green" οnclick="alert(2);">--><!--<div id="i3" style="height: 200px;width: 200px;background-color: antiquewhite" οnclick="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   获取当前urlwindow.location.href = "http://www.baidu.com"   跳转window.location.reload() 重新加载当前页面

转载于:https://www.cnblogs.com/hongpeng0209/p/6472753.html

html+css+dom补充相关推荐

【总结】IE6，IE7，IE8，Firefox兼容的css hack 补充!
IE6,IE7,IE8,Firefox兼容的css hack 补充: .color{ background-color: #CC00FF; /*所有浏览器都会显示为紫色*/ background-co ...
js jquery操作的方面xml dom html dom css dom
1 xml dom 类似xml document 操作 --文档处理 js createTextNode createElementNode ... jq ...
前端：JS/28/CSS DOM动态样式（style对象，style 对象属性与CSS属性的转换），Event DOM，事件对象简介（DOM和IE中的Event对象），实例：点出满天小星星
CSS DOM动态样式使用JS操作CSS中的各个属性: JS只能操作或修改行内样式,如:imgObjstyle.border = "1px solid red"; 对于类样式,通 ...
HTML-CSS_Day_1：CSS要点补充说明、项目演练
一.CSS要点补充说明 1.margin:0 auto:自适应页面两边宽度 2.inlineinine-block都是文本类元素 3.position:absolutefloat:left/right ...
(13) css浮动补充
一.字围现象与前面压盖效果结构类似,同级元素中前面的元素浮动,后面的元素不浮动,不浮动的元素内部还有一些文字,浮动的蓝盒子会压盖住黄绿盒子的一部分,但是文字内容不会被盖住,蓝色盒子中的文字会让开蓝盒 ...
《DOM编程艺术》中CSS—DOM的总结（一）
前言:前面是纯总结,后面实现了一个用DOM改变样式的Demo. -------------------开始------------------------- 1.元素节点的style属性 HTML文档 ...
CSS选择器补充，CSS三大特性以及字体、文本样式。
在昨天基础上补充的三个选择器伪元素选择器使用伪元素来表示元素中的一些特殊的位置 ::after 表示元素的最后边的部分一般需要结合content这个样式一起使用, 通过conte ...
day 32 css后续补充以及js 简单入门
前情提要: 利用html 和css ,js 模拟小米的官网(待做) 一:第一个sj利子 <!DOCTYPE html> <html lang="en"> & ...
CSS的补充（3 空间转换动画）
一.空间转换属性 transform 语法 transform:translate3d(x,y,z) 透视属性 perspective(添加给父级)视距,指人眼到屏幕的距离取值像素单位,数一般 ...

html+css+dom补充

html+css+dom补充相关推荐

最新文章

热门文章