- 博客(14)
- 收藏
- 关注
RSS订阅原创 手机端布局之rem+less+媒体查询
媒体查询（Media Query）是CSS3新语法。使用 @media查询，可以针对不同的媒体类型定义不同的样式@media 可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询媒体查询语法规范用 @media开头 注意@符号mediatype 媒体类型...
2020-02-29 21:07:43
185
原创 手机端flex布局
flex布局原理 flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。 flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局 采用 Flex ...
2020-02-29 16:26:52
296
原创 手机端布局方式
前奏移动开发选择和技术解决方案1.单独制作移动端页面2.响应式页面兼容移动端移动端公共样式：移动端 CSS 初始化推荐使用 normalize.css/官网地址： http://necolas.github.io/normalize.css/盒子模型选择：传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + paddingCSS3...
2020-02-29 16:21:10
295
原创 关于浏览器卷曲地三种理解方式
获取浏览器向上卷曲地距离有三种理解方式1.整个浏览器向上卷曲window.pageXOffset; window.pageYOffset;2.当前地html页面向上卷曲--documentElement=html document.documentElement.scrollLeft; document.documentElement.scrollLeft;3.页面中body中...
2019-06-30 23:29:12
294
转载 CSS基础总结
CSS基础学习总结（1）一、引入CSS样式表（书写位置）内部样式表内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：<head><style type="text/CSS">...
2019-05-29 15:44:01
146
原创 元素移动小Demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding:0; margin:...
2019-05-29 13:35:05
71
原创 元素渐变小Demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #dv{ width:300px; hei...
2019-05-25 16:47:15
50
原创 BOM中的定时器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="button" value="停止" id="btn"&...
2019-05-25 16:45:29
208
原创 navigator对象之判断当前系统及浏览器类型
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script src="common.js"></script&g...
2019-05-19 22:18:12
590
原创 模拟百度输入框事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box { width: 450px; ...
2019-05-16 22:54:17
546
原创 为同一个元素注册多个不同地事件
通过事件参数对象.type来判断当前是什么事件，在执行相应地事件；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多个不同地事件</title></head><body><input...
2019-05-15 22:41:43
106
原创 事件的三个阶段
1.事件地捕获阶段2.事件的目标阶段3.事件的冒泡阶段通过e.eventPhase得到地值来判断当前在什么阶段。<!--事件地三个阶段--><!--1.事件地捕获阶段：从外到里--><!--2.事件地目标阶段--><!--3.时间的冒泡阶段：从里到外--><!--addEvenetListener(没有on的事件类型,...
2019-05-15 22:29:36
416
原创 事件绑定及冒泡
1.解绑事件的方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件的绑定及解绑地三种方式（附兼容代码）</title></head><body><script src="c...
2019-05-15 22:23:52
92
原创 绑定事件及解绑事件
注意：用什么方式绑定的，就必须用什么方式解绑； //为按钮取消点击事件，方式1my$("btn").onclick=function () { console.log("诱惑");}my$("btn2").onclick=function () { my$("btn").onclick=null;}//为按钮解绑方式2----适合火狐和谷歌以及IE11，不适合IE...
2019-05-11 16:47:49
222
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人