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 ...
随机推荐
- 【工具】java 文本文档txt写出记录工具
彩蛋!http://abowman.com/google-modules/dog/ 以下是自己小游戏生成人物经历的传记时保存txt所用到的工具类,功能简单,不多说什么,贴上代码: package co ...
- 大流量下的 ElasticSearch 搜索演进
这是泥瓦匠(bysocket.com)的第27篇精华分享 ES (ElasticSearch)是分布式搜索引擎.引擎太晦涩,其实类似一个 MySQL ,一个存储.方便提供下面功能: 近实时搜索 全文检 ...
- 对于BIO/NIO/AIO，你还只停留在烧开水的水平吗？
1.发发牢骚 相信大家在网上看过不少讲解 BIO/NIO/AIO 的文章,文章中举起栗子来更是夯吃夯吃一大堆,我是越看越觉得 What are you 你讲啥嘞? 本文将针对 BIO/NIO/AIO ...
- Python笔记【1】_字符串学习
#!/usr/bin/env/python #-*-coding:utf-8-*- #Author:LingChongShi #查看源码Ctrl+左键 #字符串:通常有单引号“'”.双引号“" ...
- 高效 MacBook 工作环境配置，超实用！
作者:正鹏 & 隃墨 http://www.xialeizhou.com/?p=71 前言 工欲善其事,必先利其器,工具永远都是用来解决问题的,没必要为了工具而工具,一切工具都是为了能快速准确 ...
- gulp使用详情 及 3.0到4.0的坑
项目的所有依赖都可以安装,每个都有详细的注释. const gulp = require('gulp'); const sass = require('gulp-sass'); const brows ...
- 跟我学SpringCloud | 第十篇：服务网关Zuul高级篇
SpringCloud系列教程 | 第十篇:服务网关Zuul高级篇 Springboot: 2.1.6.RELEASE SpringCloud: Greenwich.SR1 如无特殊说明,本系列教程全 ...
- 并发编程-concurrent指南-计数器CountDownLatch
java.util.concurrent.CountDownLatch 是一个并发构造,它允许一个或多个线程等待一系列指定操作的完成. CountDownLatch 以一个给定的数量初始化.count ...
- iOS 矢量图pdf替换2倍3倍图
一.在开发中矢量图的使用大大提高设计的切图效率! ios 中可以用pdf替换现在的2倍3倍图(1倍图已经忽略) 1.将pdf矢量图拖进工程Assets.xcassets中 2.按照步骤操作 3.矢量图 ...
- 【Aizu - 0121】Seven Puzzle （反向bfs）
-->Seven Puzzle 原文是日语 这里就直接写中文了 Descriptions: 7拼图由8个正方形的卡和这些卡片完全收纳的框构成.每张卡都编号为0, 1, 2, …, 7,以便相互 ...