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 ...
随机推荐
- Redis 在java中的使用（登录验证，5分钟内连续输错3次密码，锁住帐号，半小时后解封）（三）
在java中使用redis,做简单的登录帐号的验证,使用string类型,使用redis的过期时间功能 1.首先进行redis的jar包的引用,因为用的是springBoot,springBoot集成 ...
- Python操作ElasticSearch
Python批量向ElasticSearch插入数据 Python 2的多进程不能序列化类方法, 所以改为函数的形式. 直接上代码: #!/usr/bin/python # -*- coding:ut ...
- Selenium驱动如何选择？
最近有朋友也想学Selenium然后问我应该用什么Python版本.装什么驱动.用什么浏览器,然后今天在这里总结一下 Python版本的话个人用的是3.7 ,比较推荐,目前比较流行的是Python 3 ...
- Programming In Lua 第十章
1,lua中的数据结构都是表来实现的.数组就是索引为数值的表. 2,矩阵就是二维数组,三角矩阵就是矩阵的一半. 3,稀疏矩阵问题: 4, 5, 6,
- VirtualBox中安装CentOS使得在ssh和外网都能正常链接
一.网卡模式选择 网卡1:Host-only 用于主宿机互访,这是主宿机通过192.168.56.X这一网络通信,主机是否能上网不影响双方通信 网卡2:NAT 宿机用这一网卡通过主机上网 二.具体配置 ...
- spark 源码分析之十二 -- Spark内置RPC机制剖析之八Spark RPC总结
在spark 源码分析之五 -- Spark内置RPC机制剖析之一创建NettyRpcEnv中,剖析了NettyRpcEnv的创建过程. Dispatcher.NettyStreamManager.T ...
- [golang]golang time.After内存泄露问题分析
无意中看到一篇文章说,当在for循环里使用select + time.After的组合时会产生内存泄露,于是进行了复现和验证,以此记录 内存泄露复现 问题复现测试代码如下所示: package mai ...
- Egret入门学习日记 --- 第四篇
第四篇(学习篇) 好了,今天继续把昨天的问题解决了. 今天见鬼了. 现在界面又出来了.唯一我动过的地方,应该就是这里: 是的,我点了一下刷新.之后,不管我怎么创建新的EXML文件,放在src目录,还是 ...
- 深入学习Spring框架（三）- AOP面向切面
1.什么是AOP? AOP为 Aspect Oriented Programming 的缩写,即面向切面编程, 通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术..AOP是OOP的延续, ...
- Hash的应用
思路:此题比较简单,直接贴代码 #include <stdio.h> int main(){ int N; ){ ]={}; ;i<N;i++){ int x; scanf(&quo ...