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 安装和配置（一）
一. mac下redis的安装 1. 官网http://redis.io/ 下载最新的稳定版本,这里是3.2.0 2. sudo mv 到 /usr/local/ 3. sudo tar -zxf r ...
- Spring Bean 生命周期之destroy——终极信仰
上一篇文章 Spring Bean 生命周期之我从哪里来 说明了我是谁? 和 我从哪里来? 的两大哲学问题,今天我们要讨论一下终极哲学我要到哪里去? 初始化 Spring Bean 有三种方式: @P ...
- ConnectionPool实现redis在python中的连接
这篇文章主要介绍了Python与Redis的连接教程,Redis是一个高性能的基于内存的数据库,需要的朋友可以参考下 今天在写zabbix storm job监控脚本的时候用到了python的re ...
- 001_html基本结构
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- springboot自动装配（1）---@SpringBootApplication注解怎么自动装配各种组件
1.对于springboot个人认为它就是整合了各种组件,然后提供对应的自动装配和启动器(starter) 2.@SpringBootApplication注解其实就是组合注解,通过它找到自动装配的注 ...
- 实例解说AngularJS在自动化测试中的应用
一.什么是AngularJS ? 1.AngularJS是一组用来开发web页面的框架.模板以及数据绑定和丰富UI的组件: 2.AngularJS提供了一系列健壮的功能,以及将代码隔离成模块的方法: ...
- ElasticStack学习（七）：ElasticSearch之Mapping初探
一.Mapping的概念 1.Mapping类似于数据库中的Schema的定义,作用如下: 1)定义索引中的字段的名称: 2)定义字段的数据类型,例如字符串.数字.日期.布尔等: 3)对每个字段进行倒 ...
- codeblocks出现'to_string' was not declared in this scope 的问题，用g++11编译环境
在将数字转化为字符串时使用to_string()竟然出现了'to_string' was not declared in this scope,我头文件用的万能头文件肯定没问题,而这个函数在其他的CB ...
- 组件--button详解
一.wxss尺寸单位rpx rpx(responsive pixel): 可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx. 严格按照XML语法. 二.icon 图标组件 <!--index ...
- 微信小程序开发--页面结构
一.微信小程序开发--页面文件组成 [page.name].js 页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理 [page.name].wxml wxml指的是Wei Xin M ...