- 博客(44)
- 收藏
- 关注
RSS订阅原创 数组不排序去重
var arr = [4, 1, 2, 1, 4, 2, 5, 1, 4, 2];var newArr = [];arr.forEach(function(item, index){ // 如果新数组没有旧数组里的值 就把就数组的值放入新数组 if (newArr.indexOf(item) == -1) { newArr.push(item); }})var arr = ...
2019-08-19 17:58:54
653
原创 css3图片滤镜filter
使用filter给图片添加样式 filter: blur() 模糊程度 brightness() 亮度 contrast() 对比度 opacity() 透明度 saturate() 饱和度<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta ...
2019-08-16 20:22:17
247
原创 css3瀑布流布局
瀑布流布局原理：使用分栏布局让每一个元素在所在的栏都设置width：100%每个元素在加载的时候都会去找当前高度最小的那个一栏 依次进行排序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" cont...
2019-08-16 20:01:07
420
原创 css3分栏布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
2019-08-16 19:52:19
1154
原创 css3多重背景
多重背景写在最前边的 层级是在最上边 div{ width: 100px; height: 100px; background: url("./img/pdx.jpg") 0 0 no-repeat, url(./img/logo.png) 0 0 no-repeat; /* background:...
2019-08-16 19:39:00
430
原创 css3使用background-size设置背景图片大小
background-size设置背景图片大小：背景图大小设置（background-size）必须写在背景图引入的下百分比相对于容器的宽和高 （充满容器 很可能图片变形） div { width: 400px; height: 400px; border: 1px solid #000; ...
2019-08-16 19:33:07
9205
原创 css3背景图裁剪background-clip
background-clip控制背景图显示区域 如果图片设置了repeat 图片仍然会在border-box里显示background-clip: padding-box; div { width: 500px; height: 500px; padding: 50px; border: 20px dotted #...
2019-08-16 19:22:05
415
原创 css3背景图原点
背景图原点指的是 背景图定位的时候 0 0（坐标轴的原点） 所默认的位置如果图片平铺，那么border-box区域都是图片可以显示的区域background-origin 改变背景图原点:background-origin: padding-box(背景图以padding左上角为原点从padding左上角开始显示) ------ 默认原点（但是如果图片没有设置no-repeat 边框里也会...
2019-08-16 19:14:03
462
原创 css3盒子内阴影box-shadow
盒子内阴影使用box-shadowbox-shadow: inset 1px 1px 1px 1px #ccc; 第一个值代表是内阴影 第二个值是x轴偏移 第三个值是y轴偏移 第四个值是阴影模糊值 第五个值是阴影外延值 第六个值是阴影颜色div { width: 100px; height: 100px; border-radius: 50%; background-color: #c...
2019-08-16 18:42:45
5519
原创 css3盒子阴影box-shadow
盒子阴影使用css3的box-shadow属性box-shadow: 0px 0px 0px 0px #ccc; 第一个值是x轴偏移 第二个值是y轴偏移 第三个值是阴影模糊值 第四个值是阴影外延值 第五个值是阴影颜色div { margin: 100px auto; width: 100px; height: 100px; box-shadow: 1px 1px 1px 1px #cc...
2019-08-16 18:29:23
133
原创 css3文字阴影效果
文字阴影使用css3的text-shadow属性text-shadow: 0 0 0 red; 第一个参数是x轴的位置 第二个参数是y轴的位置 第三个参数是模糊程度 第四个参数是颜色p { text-shadow: 1px 1px 1px red;}<p>Hello world</p>以上代码实现以下效果：...
2019-08-16 18:22:47
183
原创 一道考试题
昨天测试 有一道这样的题：function Foo () { abc = function () { alert("4"); }; return this; } Foo.abc = function () { alert(2); }; function abc() { alert(0); }; var abc = funct...
2019-08-15 17:19:05
147
原创 js的那些数据类型
1. 基本数据类型Number（数字 包括 NaN(非数字) Infinity(无限大)）String（字符串 以双引号" "开头并结尾、单引号’ '开头结尾）Null （空对象指针、空值）Boolean 布尔值 （true 和 false）undefined （找不到、未定义）2. 引用数据类型Object（object对象）Array（数组对象...
2019-08-15 13:12:13
72
转载 详解 src 与 href 的区别
src与href 的区别1. src用于替换当前元素，href用于在当前文档和引用资源之间确立关系。src-source，指向外部资源位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内部，例如js脚本，img图片和frame等元素。<script src="source.js"></script>当浏览器解析到...
2019-08-15 10:41:45
667
原创 HTML页面结构
Doctepy 文档声明doctype声明文档类型 让浏览器以html5解析 如果没有 可能会出现怪异盒模型doctype 之后紧接着出现了 html元素，这是文档的根元素，接下来的所有内容都是根元素的后代。 head 元素包含描述文档本身的信息，以及相关的资源，比如 JS 脚本和 CSS样式。 页面中的大部分内容都在 body 内 标签 js脚本也可以在bod...
2019-08-15 10:26:24
150
转载 js关于两个字符串的加减乘除运算
1 加法运算1）无论字符串里的内容为什么都是进行连接运算2 减法乘法除法运算1）如果字符里面为纯的数字，将会转换为数字类型进行运算2）如果有字母或者特殊符号，将会出现NaN...
2019-08-14 21:01:17
2323
1
原创 浅谈BFC
BFC:“块级格式化上下文” 其实就是一块区域 决定元素如何对其内容进行定位 并且决定了和其他元素的关系构成BFC的条件浮动定位 (relative & absolute)display: inline-block table-cells flexoverflow: scroll hidden auto根元素...
2019-08-13 17:20:08
109
原创 浅谈禁止网页的系统滚动条
网页的系统滚动条当html和bodu只有html拥有overflow属性的时候 html的滚动条就会传递到系统同滚动条document上当html和body 只有body拥有overflow属性 那么body的滚动条也会传递到系统滚动条上当html和body都拥有overflow属性的时候 那么body的滚动条是属于body自己的 html的滚动条会传递到document上禁止系统滚动...
2019-08-13 15:37:14
420
原创 浅谈css的overflow属性
overflow属性: 控制元素超出后的显示方式:visible - "默认值"(当元素不设置任何overflow属性的时候 元素超出的部分正常显示 超出的部分不会占用空间)overflow:hidden - “超出隐藏” :隐藏的是超出的部分 以及 滚动条的样式overflow:scroll - “生成滚动条样式” :默认 x 和 y全部生成 可以通过overflow-x和ove...
2019-08-13 14:31:59
162
原创 浅谈包含块
包含块:(当一个元素没有设置定位属性的时候 这个元素position的值是默认的static 那么这个元素的包含块就是它的父级)当一个元素是相对于自身的位置的定位(relative) 那么这个元素的包含块也是它的父级当一个元素定位属性的值是absolute时 这个元素的包含块是离它最近的那个拥有定位属性的父级/祖父级如果元素是相对于浏览器窗口定位的(fixed) 那么这个元素的包含块是初...
2019-08-13 14:20:56
319
原创 浅谈元素的浮动
元素的浮动浮动主要用来做文字环绕特效 水槽原理浮动元素不能超过上一个兄弟元素(无论是否浮动)浮动元素在一行排列 顶部对齐浮动的影响
2019-08-13 13:18:28
168
原创 css清除浮动
元素的清除浮动为什么要清除浮动?方法一:开启BFC的代码 常在父级书写: overflow: hidden等方法二在所有浮动子元素的最下面书写一个块级空标签 添加clear: both;方法三在所有浮动子元素的最下面书写一个标签 添加clear: all;方法四给父级设置高度 (基本不用)方法五给父级一个after伪元素 代替直接在所有浮动子元素下面书写空标签的方法...
2019-08-13 13:17:05
123
原创 浅谈css定位
定位相对定位相对于自身的位置定位(right:100px; (元素会向左移动))不会脱离页面流left right top bottom 控制元素的定位位置 如果这几个属性同时又值 left和top具有优先性一个元素设置相对定位 不会影响这个元素的其他属性一般用在创建包含块 或者是给非定位的元素设置堆叠顺序(只有定位属性才支持z-index)绝对定位相对包含快的位置进行定位...
2019-08-13 12:57:57
83
原创 浅谈HTML盒模型
在HTML中 每一个元素都被当成一个盒子，拥有盒子的平面外形和空间1.盒模型由:内容(content) 内边距(padding) 边框(border) 外边距(margin)组成2.盒模型分为标准盒模型和怪异盒模型标准盒模型所占用空间大小的计算方式为：content + margin + padding + border怪异盒模型所占用空间大小的计算方式为：内容(width) + 外...
2019-08-13 12:52:13
222
原创 浅谈css精灵图
什么是css精灵图? 有什么作用? **1. 把所需的背景图合并在一起 从整体上减少图片大小** **2. 把多个图片合在一起 减少客户端请求服务器的次数** **3. 利用缓存机制 提高运行速度 提升用户体验**...
2019-08-13 11:18:03
120
原创 浅谈HTML元素水平垂直居中的方法(待更新)
方法一: position:abusolute; left:0; top:0; right:0; bottom:0; margin:auto;方法二 position:absolute; left:50%; top:50%; transform:translateX(50%) translateY(50%);
2019-08-13 11:00:04
104
原创 jQuery绑定事件的几种方式
jQuery绑定事件的4种方式:现在我们有一个id为box的div 看看如何使用4种不同的方式给这个id为box的div绑定鼠标点击事件:1.事件类型直接调用: $("#div").click(function () { alert("我是事件类型直接调用"); })2.bind方法 三个参数: 1、事件名 2、数据(可选) 3、事件函数$("#div").bind("cli...
2019-08-13 01:47:57
899
原创 jQuery之keypress事件
jQuery之keypress事件$("#ipt1").keypress(function() { console.log(1); })
2019-08-13 01:18:42
455
原创 HTML/CSS(关于等高布局)
<style> * { margin: 0; padding: 0; } .box { overflow: hidden; /* 给父级设置flex就不用让左右元素都浮动了 */ display: flex; ...
2019-08-13 00:03:41
348
原创 Array.sort() 对数组进行排序
sort方法是对数组进行排序// 1、当sort方法不传递参数的时候 默认让元素转换成字符串 按照升序排列（一位一位的比较） //sort方法 改变了原数组 并且也返回了改变后的数组 var arr1 = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]; var arr1Return = arr1.sort(); console....
2019-08-12 20:47:21
3812
原创 Array.indexOf() 和 Array.lastIndexOf() 检测字符串中是否有某个值
// indexOf 从前向后检测 检测某一项在数组中 是否出现 检测到一个以后就立马停止了 var arr = ["a","b","c","d","e","c","d","e"]; var a = "c"; //只传递一个参数 从第0项开始检测 var re = arr.indexOf(a); console.log(re); // 传递两个...
2019-08-12 20:43:31
627
3
原创 Array.reverse() 颠倒数组顺序
reverse是让数组的项 颠倒顺序 倒叙排列 并不是对数组按照大小排序 // reverse方法没有参数 原数组改变了 返回的数组也是改变后的数组 var arr = [4,5,6,3,2,5,4,3,9]; var arrReturn = arr.reverse(); console.log(arr); //[9, 3, 4, 5, 2, 3, 6,...
2019-08-12 20:40:33
14861
原创 Array.shift() 删除数组的第一项
shift方法是删除数组的第一项 改变原数组 返回删除的值var arr1 = [1, 2, 3, 4, 5, 6, 7, 8];var returnArr = arr1.shift();console.log(arr1); // [2, 3, 4, 5, 6, 7, 8]console.log(returnArr); // 1...
2019-08-12 20:38:05
16495
原创 Array.unshift() 在数组的最前边添加一个或多个项
unshift 在数组的最前边添加一个或多个项 改变原数组 返回改变后数组的长度 var arr = [1,2,3,4,5,6]; var arrReturn = arr.unshift(1,2,["a","b"]); //如果插入多个 那么插入的顺序从第一个参数开始往后插入 console.log(arr); // [1, 2, ["a", "b"], 1, 2, 3, 4...
2019-08-12 20:35:07
25209
原创 Array.pop() 移出数组的最后一项 并减小数组的长度
pop方法 移出数组的最后一项 并减小数组的长度 改变原数组 返回删除的值var arr1 = [1, 2, 3, 4, 5, 6];var delarr = arr1.pop();console.log(arr1); // [1, 2, 3, 4, 5];console.log(delarr); // 6;...
2019-08-12 20:30:29
579
原创 Array.push() 接受任意数量的参数 把参数逐个添加到数组的末尾
push方法 ：接受任意数量的参数 把参数逐个添加到数组的末尾 改变了原数组 返回插入后数组的长度var arr1 = [1, 2, 3, 4, 5, 6];arr1.push(7, 8, 9, 10);console.log(arr1); // arr1[1, 2, 3, 4, 5, 6, 7, 8, 9, 10];//当参数是一个数组的时候 并不会把数组拆开 而是直接当成一项插入...
2019-08-12 20:24:10
2720
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人