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 ...
随机推荐
- Java8新特性——lambda表达式.（案例：公司业务）
需求:现有一个员工姓名list,其中包含单字母索引.要求输出一个字符串,去掉所有单字母,所有名字首字母大写并用逗号隔开. package cn._2.thecompanyprocess; import ...
- MyBatis从入门到精通(四)：MyBatis XML方式的基本用法之增删改
最近在读刘增辉老师所著的<MyBatis从入门到精通>一书,很有收获,于是将自己学习的过程以博客形式输出,如有错误,欢迎指正,如帮助到你,不胜荣幸! 1. insert用法 1.1 简单的 ...
- 喵星人教你 HTTP 状态码
在我们日常 Web 开发中,或多或少的都接触过 HTTP 状态码,那这些状态码代表什么意思呢?熟悉这些状态码又有什么好处呢?下面我就为大家一一道来,可以把本片文章'收藏'以备不时之需. HTTP 状态 ...
- 记一次SQL优化。
程序是数据库的用户,为打造良好的用户体验,我们一直在努力. 此次介绍一个基于SQL的数据库优化.SQL的优劣对数据库的性能影响非常关键. 查询只涉及如下表结构中的三个字段.如下 开发原始SQL SEL ...
- iOS组件化开发一远程私有库的升级（三）
一.远程私有库的升级 1. 把新增的类 拖入到 classes 文件夹中 : 2. 修改 pod.spec 文件的 s.verson = ‘0.2.0': 二.更新远程仓库 1.cd 到本地仓库的位置 ...
- springboot项目快速搭建
1. 问题描述 springboot的面世,成为Java开发者的一大福音,大大提升了开发的效率,其实springboot只是在maven的基础上,对已有的maven gav进行了封装而已,今天用最简单 ...
- 20190716 NOIP模拟测试4 考试反思
总分 127分 满分300 第一题 礼物 10分 一道期望题,看起来挺简单,但对于概率与期望这一块我还不怎么会,花了一个小时调他,最后只QJ了一下10%的测试点 第二题 通讯 90分 显然的缩点求解, ...
- ~~函数基础（三）：嵌套函数&匿名函数~~
进击のpython 嵌套函数&匿名函数 讲完作用域之后 对变量的作用范围有大致的了解了吗? 讲个稍微小进阶的东西吧 能够帮助你更加的理解全局和局部变量 嵌套函数 玩过俄罗斯套娃不? 没玩过听过 ...
- akka 集群分片
akka 集群 Sharding分片 分片上下级结构 集群(多台节点机) —> 每台节点机(1个片区) —> 每个片区(多个分片) —> 每个分片(多个实体) 实体: 分片管理的 A ...
- Java编程思想：利用内部类实现的工厂模式
public class Test { public static void main(String[] args) { Factories.test(); } } /* 设计模式之禅中的工厂模式是这 ...