1. HTML+CSS补充

- 布局:

                <style>
.w{
width:980px;margin:0 auto;
}
</style>
<body>
<div style='background-color:red;'>
<div class='w'>dsfg</div>
</div>
</body>

清除浮动

                .clearfix:after{
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}

响应式布局 @media

            <style>
@media (min-width: 800px){
.item{
width: 20%;
float: left;
}
}
@media (max-width: 800px){
.item{
width: 33.3%;
float: left;
}
}
</style>

2. DOM事件

- 如何绑定事件(2)

- 如何阻止默认事件的发生(2),DOM绑定事件的时候,必须在前面加return

         方法一:
<a href="http://www.baidu.com" onclick="return func();">走一发</a>
<script>
function func() {
alert(123);
return false;
}
</script>
方法二:
<a href="http://www.google.com.hk" id="i1">走一发</a>
<script>
document.getElementById('i1').onclick = function () {
alert('');
return false
}
</script>

匿名函数循环方式

setInterval(function () {},500)

实例:阻止空字符提交:

            <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>0){
return true;
}else{
alert('请输入内容222');
return false;
}
};
</script>

- this表示当前触发事件的标签

            <div id="i1">战争</div>
<script>
document.getElementById('i1').onclick = function () {
var v = this.innerHTML;
alert(v);
}
</script>

- 一个标签可以绑定多个不同的事件

实例:获取焦点

<body>
<input type="text" value="请输入关键字" onfocus="fuckFocus(this);" onblur="fuckBlur(this);"/>
<input type="button" value="提交" />
<script>
/*
当标签获取焦点时,执行该函数
*/
function fuckFocus(ths) {
// value innerText innerHtml
var v = ths.value;
if(v == '请输入关键字'){
ths.value = "";
}
}
/*
当标签失去焦点时
*/
function fuckBlur(ths) {
var v = ths.value;
if(v.length == 0){
ths.value = "请输入关键字";
}
}
</script>
</body>

- 绑定多个相同的事件

    <div id="i1" onclick="console.log(1);" >鸡建明</div>
<script> document.getElementById('i1').addEventListener('click',function () {
console.log(2);
})
</script>

- 事件执行顺序:

  - 冒泡:从内向外查找

       <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>

  - event是当前事件的信息,

window.onkeydown监控全局事件

捕获用户按下ctrl键

<body>
<input type="text" onkeydown="func(this,event);" /> <script>
function func(ths,e) {
console.log(ths,e);
}
window.onkeydown = function(j){
console.log(j);
       console.log(j['j'])
} </script>
</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>
window.location.href   获取当前url
window.location.href = "http://www.baidu.com" 跳转
window.location.reload() 重新加载当前页面

HTML+CSS补充的更多相关文章

  1. CSS补充与JavaScript基础

    一.CSS补充 position 1.fiexd 固定在页面的某个位置; 示例将顶部菜单始终固定在页面顶部 position: fixed; 将标签固定在某个位置 right: 0; 距离右边0像素 ...

  2. CSS补充之--页面布局、js补充,dom补充

    CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...

  3. css补充、JavaScript、Dom

    css补充: position: fixed:可以将标签固定在页面的某个位置 absolute+relative:通过两者的结合可以让标签在一个相对的位置 代码例子:(通过fixed标签将某些内容固定 ...

  4. 53、css补充

    css其余问题补充 一.默认的高度和宽度问题 1.父子都是块级元素 <!DOCTYPE html> <html> <head> <title>...&l ...

  5. 5、css补充

    css其余问题补充 本篇导航: 默认的高度和宽度问题 后台管理布局 css响应式布局 一.默认的高度和宽度问题 1.父子都是块级元素 <!DOCTYPE html> <html> ...

  6. 第五篇、css补充二

    一.内容概要 1.图标 2.目录规划 3.a标签中的img标签在浏览器中的适应性 4.后台管理系统设置 5.边缘提示框 6.登录页面图标 7.静态对话框 8.加减框 补充知识: line-height ...

  7. 前端之CSS:CSS补充

    css样式之补充... css常用的一些属性: 1.去掉下划线 :text-decoration:none ;2.加上下划线: text-decoration: underline; 3.调整文本和图 ...

  8. Python之路【第十一篇续】前端之CSS补充

    CSS续 1.标签选择器 为类型标签设置样式例如:<div>.<a>.等标签设置一个样式,代码如下: <style> /*标签选择器,如果启用标签选择器所有指定的标 ...

  9. CSS 补充

    属性选择器下面的例子为带有 title 属性的所有元素设置样式:[title]{ color:red;} <h1>可以应用样式:</h1><h2 title=" ...

随机推荐

  1. 对Functional Language的认识

    What: A functional language is a programming language built over and around logical functions or pro ...

  2. 2017-2018-1 20155219《信息安全技术》实验二——Windows口令破解

    2017-2018-1 20155320<信息安全技术>实验二--Windows口令破解 实验目的 了解Windows口令破解原理 对信息安全有直观感性认识 能够运用工具实现口令破解 实验 ...

  3. background-position 的设置

    不应该按移动端的实际宽度或高度设置,应该按切出来图片的宽度设置,比如精灵图中有两个图片,各宽500px,那position应该设置为500px 0:而不是250px 0

  4. JS滚轮mousewheel事件和DOMMouseScroll事件

    滚轮事件的兼容性差异有些不拘一格,不是以往的IE8-派和其他派,而是FireFox派和其他派. 包括IE6在内的浏览器是使用onmousewheel,而FireFox浏览器一个人使用DOMMouseS ...

  5. Atcoder 1973:こだわり者いろはちゃん / Iroha's Obsession

    C - こだわり者いろはちゃん / Iroha's Obsession Time limit : 2sec / Memory limit : 256MB Score : 300 points Prob ...

  6. linux cron计划任务、chkconfig 命令、systemd命令、unit 相关、target 相关

    1.设置说明位置 : cat /etc/crontab # Example of job definition:# .---------------- minute (0 - 59)# | .---- ...

  7. sudo操作

    在非root权限下,无法执行 vim /etc/profile 并保存,提示如下错误: "profile" E212: Can't open file for writing Pr ...

  8. 【BZOJ1823】【JSOI2010】满汉全席

    差点忘了2-sat…… 原题: 满汉全席是中国最丰盛的宴客菜肴,有许多种不同的材料透过满族或是汉族的料理方式,呈现在數量繁多的菜色之中.由于菜色众多而繁杂,只有极少數博学多闻技艺高超的厨师能够做出满汉 ...

  9. 黑马-ssh

    插件 Struts-plugin.xml 说明: Struts-plugin.xml文件是在tomcat服务器启动的时候加载的 该配置文件在classpath的根目录下 在每一个含有plugin字母的 ...

  10. 电脑上不安装Oracle时,C# 调用oracle数据库,Oracle客户工具 【转载】

    http://www.cnblogs.com/jiekzou/p/5047850.html Oracle的安装包通常都比较大,安装又比较费时,而且如果安装过程中不幸出错,各种蛋疼,即便是安装过N遍的老 ...