HTML+CSS补充
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补充的更多相关文章
- CSS补充与JavaScript基础
一.CSS补充 position 1.fiexd 固定在页面的某个位置; 示例将顶部菜单始终固定在页面顶部 position: fixed; 将标签固定在某个位置 right: 0; 距离右边0像素 ...
- CSS补充之--页面布局、js补充，dom补充
CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...
- css补充、JavaScript、Dom
css补充: position: fixed:可以将标签固定在页面的某个位置 absolute+relative:通过两者的结合可以让标签在一个相对的位置 代码例子:(通过fixed标签将某些内容固定 ...
- 53、css补充
css其余问题补充 一.默认的高度和宽度问题 1.父子都是块级元素 <!DOCTYPE html> <html> <head> <title>...&l ...
- 5、css补充
css其余问题补充 本篇导航: 默认的高度和宽度问题 后台管理布局 css响应式布局 一.默认的高度和宽度问题 1.父子都是块级元素 <!DOCTYPE html> <html> ...
- 第五篇、css补充二
一.内容概要 1.图标 2.目录规划 3.a标签中的img标签在浏览器中的适应性 4.后台管理系统设置 5.边缘提示框 6.登录页面图标 7.静态对话框 8.加减框 补充知识: line-height ...
- 前端之CSS：CSS补充
css样式之补充... css常用的一些属性: 1.去掉下划线 :text-decoration:none ;2.加上下划线: text-decoration: underline; 3.调整文本和图 ...
- Python之路【第十一篇续】前端之CSS补充
CSS续 1.标签选择器 为类型标签设置样式例如:<div>.<a>.等标签设置一个样式,代码如下: <style> /*标签选择器,如果启用标签选择器所有指定的标 ...
- CSS 补充
属性选择器下面的例子为带有 title 属性的所有元素设置样式:[title]{ color:red;} <h1>可以应用样式:</h1><h2 title=" ...
随机推荐
- xdoj1321----简单搜索
1321: 营救公主 时间限制: 1 Sec 内存限制: 128 MB提交: 156 解决: 37[提交][状态][讨论版] 题目描述 DSKer今天又做梦了,他的睡眠质量一直很差.他梦见他化身骑 ...
- 错题：Test3
/** * * @ClassName: test3 * @Description: TODO(请问主程序运行结果是什么?) * @author yk * @date 2017年3月9日 上午11:20 ...
- LG2516 【[HAOI2010]最长公共子序列】
前言 感觉这几篇仅有的题解都没说清楚,并且有些还是错的,我再发一篇吧. 分析 首先lcs(最长公共子序列)肯定是板子.但这题要求我们不能光记lcs是怎么打的,因为没这部分分,并且另外一个方程的转移要用 ...
- python之路---12 生成器 推导式
三十.函数进阶 1.生成器 函数中有yield 的就是生成器函数(替代了return) 本质就是迭代器 一个一个的创建对象 节省内存 ①创建生成器 最后以yield结束 ...
- SpringMVC请求体参数处理问题
如果请求定义为application/json格式,则要用Spring MVC中@RequestBody参数才能接受(用@RequestParam参数接受会报400错误),但SpringMVC的@Re ...
- idea+maven+springmvc+helloworld
1.添加依赖,并在项目上添加Spring mvc框架的支持(add FrameWork Support): <dependency> <groupId>junit</gr ...
- redis设计与实现-数据结构
1,redis存储有5种数据对象,有7种数据结构底层实现 2,sds简单字符串 不直接使用字符数组或是string 封装了长度变量,加快获得字符串长度 杜绝缓冲区溢出(拼接字符串的时候不会因为内存里连 ...
- re正则匹配使用
print(result.span()) #输入字符串的范围 如果在匹配语句中有括号,group(1)就是提取第一个括号的内容,以此类推. 扩展思考:如果要从文本中匹配出目标字符串可以使用括号加gro ...
- Feign的使用
一.Feign实现应用间的通信 声明式REST客户端(伪RPC),采用基于接口的注解.本质上是Http客户端,Http远程调用. 1. 在Order工程中的pom文件增加 <dependency ...
- 基于MVC4+EasyUI的Web开发框架形成之旅(7)--权限控制
我在上一篇随笔<基于MVC4+EasyUI的Web开发框架形成之旅--框架总体界面介绍>中大概介绍了基于MVC的Web开发框架的权限控制总体思路.其中的权限控制就是分为“用户登录身份验证” ...