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 ...
随机推荐
- js中新增动态属性
var cc = 'hell' var mm = { [cc](){ alert(33) } } mm.hell() 使用的就是数组形式
- PATB 1032 挖掘机技术哪家强(20)
#include <cstdio> #include <vector> using namespace std; const int N = 100001; vector &l ...
- C++用EGE简单实现别踩白块游戏
本项目已开源:https://github.com/wmpscc/AvoidBlank 关于EGE 介绍:EGE(Easy Graphics Engine),是windows下的简易绘图库,是一个类似 ...
- JVM中的本机内存跟踪
1.概述 有没有想过为什么Java应用程序通过众所周知的-Xms和-Xmx调优标志消耗的内存比指定数量多得多?出于各种原因和可能的优化,JVM可以分配额外的本机内存.这些额外的分配最终会使消耗的内存超 ...
- 机器学习经典算法之Apriori
一. 搞懂关联规则中的几个概念 关联规则这个概念,最早是由 Agrawal 等人在 1993 年提出的.在 1994 年 Agrawal 等人又提出了基于关联规则的 Apriori 算法,至今 Apr ...
- LeetCode刷题------------------------------LeetCode使用介绍
临近毕业了,对技术有种热爱的我也快步入码农行业了,以前虽然在学校的ACM学习过一些算法,什么大数的阶乘,dp,背包等,但是现在早就忘在脑袋后了,哈哈,原谅我是一枚菜鸡,为了锻炼编程能力还是去刷刷Lee ...
- ElasticStack学习（三）：ElasticSearch基本概念
1.文档 1)ElasticSearch是面向文档的,文档是所有可搜索数据的最小单位.例如: a)日志文件中的日志项: b)一张唱片的详细信息: c)一篇文章中的具体内容: 2)在ElasticSea ...
- 第七章 手动部署Fisco Bcos 区块链并完成新增群组，在原有群组中新增机构
鉴于笔者以前各大博客教程都有很多人提问,早期建立一个技术交流群,里面技术体系可能比较杂,想了解相关区块链开发,技术提问,请加QQ群:538327407 目标 1.新增群组搭建完整联盟链 2.根据群组新 ...
- UVALive 6255：Kingdoms（状压DFS）
题目链接 题意 给出n个王国和n*n的矩阵,mp[i][j] 代表第 i 个王国欠第 j 个王国 mp[i][j] 块钱.如果当前的王国处于负债状态,那么这个王国就会被消除,和它相连的王国的债务都会被 ...
- jieba GitHUb 结巴分词
1.GitHub jieba-analysis 结巴分词: https://github.com/fxsjy/jieba 2.jieba-analysis 结巴分词(java版): https://g ...