2018年04月_蓝色清晨_

原创 chrome清楚缓存并硬性重新加载

ctrl + H：清除历史记录快捷键。快速调出清除历史记录界面。 Chrome浏览器如何强制刷新页面(不使用缓存)？1、Chrome官方推荐使用如下快捷键，就可以不使用页面缓存进行刷新Windows和Linux操作系统: Shift+F5 或 Ctrl+Shift+RMac OS: Cmd+Shft+R2、如果上面方法没有效果，可以按下F12(Windows) 或 Cmd+O...

2018-04-24 13:30:17 37385 7

转载 bootstrap的栅栏布局中，列排序push/pull和列偏移offset的区别

实现方式的区别：col-md-offset-，是利用margin-left实现的，col-md-push-/col-md-pull-*是利用相对定位实现的。效果的区别：1、col-md-offset-*只能向右偏移，因为实现方式就是margin-left，而push/pull因为是相对定位，既可以左偏移也可以右偏移2、如果一行的偏移量+实际的宽度综合超过12，col-md-offset会换...

2018-04-24 10:54:57 2680

原创电脑快捷键操作

不论在日常生活使用中还是在工作编程当中，熟练电脑快捷键的操作，往往能够起到事半功倍的效果，以下总结了一些常用快捷键的使用方法和功能介绍，希望你能应用到工作和生活当中去：alt + F4:关闭当前应用程序；比如在火狐浏览器界面点击 alt + F4,能弹出确认关闭火狐浏览器的选项，点击确认即可关闭当前浏览器了。另外，如果当前没有活动窗口的话alt +F4是关机。ctrl + W:关闭应...

2018-04-21 17:21:45 198

原创封装函数用于获取元素的属性值

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #content{ w

2018-04-19 23:45:06 332

原创封装函数为目标元素添加class属性

<div id="changeName" class="big red"></div><button onclick="addClass('changeName','round')">Add a className</button><script> // 封装addClass函数为目标元素添加

2018-04-19 23:36:04 358

原创封装函数用于删除数组中的奇数

//删除数组中的奇数 method 1function deleteOdd(arr){ var newArray = []; for(var i=0;i<arr.length;i++){ if(arr[i]%2==0){ newArray.push(arr[i]); } } return newArra...

2018-04-19 23:21:56 858

原创封装函数检测数组中是否含有某个值

//封装一个函数用于检测数组中是否含有某个值 function findValue(item,arr){ for(var i=0;i<arr.length;i++){ if(arr[i]==item){ return true; }...

2018-04-19 23:17:26 1089 2

原创封装求和函数

//封装一个求和函数 function sum(arr){ var total = 0; for (var i=0;i<arr.length;i++){ total += arr[i]; } return total; } ...

2018-04-19 23:14:25 1002

原创彻底搞清楚rgba与opacity/filter的区别

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>rgba与opacity/filter的区别</title> <style> *{margin:

2018-04-19 14:16:13 287

原创 js+css让背景图片动起来

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css+js让背景图片动起来</title> <style> *{ ma

2018-04-17 14:49:07 9160 1

原创原生js实现购物车相关功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>实现购物车的相关功能</title> <style> *{ margin

2018-04-17 14:46:37 334

原创实现复选框的多选功能

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>管理员列表</title> <style> *{ margin:0;

2018-04-17 14:44:42 2410

原创 win系统电脑高手常用快捷键

win + D ：快速回到桌面；ctrl + Z: 撤销（mac也适合）；F12：选中文件夹，点击F12给文件夹重命名；win + L:暂时离开，给电脑上锁；ctrl + space : 中英文自如切换（mac也适合）；alt + F4 :快速关闭当前窗口；F5：快速刷新当前页面；ctrl + p :快速打印；ctrl + S:快速保存文档；...

2018-04-17 14:41:17 111

原创无间歇文字滚动

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta

2018-04-17 14:29:34 151

原创区分rgba()和opacity

R：红色值。正整数 | 百分数 G：绿色值。正整数 | 百分数 B：蓝色值。正整数 | 百分数A：Alpha透明度。取值0~1之间。取值为0表示完全透明，取值为1时表示完全不透明。rgba()和opacity都能实现透明效果，但区别在于rgba()只作用于元素自身的颜色或背景色，对元素的内容没有影响；opacity在作用于元素自身的颜色或背景色的同时，也作用于元素内的内容的透...

2018-04-17 13:56:43 1000

原创区分letter-spacing与word-spacing

letter-spacing 字符间隔：字母和字母之间的空白对中文有效word-spacing 字间隔：单词和单词之间的间隔对中文无效<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title&g

2018-04-17 13:47:25 417

原创去除inline-block元素间间距的N种方法

inline-block元素主要包括：、、、、拥有内在尺寸，可设置宽高和内外边距，但是不会自动换行；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>去除inline-block元素间间距的N种方法 &

2018-04-17 13:41:38 243

在国内网站中，包括三大门户，以及“引领”中国网站设计潮流的蓝色理想，ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而国外，几乎所有的主流站点都使用em作为字体单位，也就是可调的。没错，px比em更加容易使用，大部分读者不知道em为何物或者它相当于多少 px。国外人士如此重视网站易用性(Accessibility)，不仅因为其根生蒂固的人文精神，直接原因可能是因为有一部...

2018-04-17 13:22:04 1831

原创 IE6的双编剧BUG

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。在学习浏览器兼容性之前，我想把前端开发人员划分为两类：第一类：是精确按照设计图开发的前端开发人员，可以说是精确到1...

2018-04-17 13:14:47 223

原创为什么我的背景图片加载不出来

曾经在html中编写网页的时候，将外部的css样式表链接到网页中，其它像：background-color . padding , margin 等都可以正常起作用，但就是background-image不起作用，而且有时一气之下将background-image:url(“”绝对路径“”) ;就可以显示了，但是我们非常不提倡这种绝对路径的写法，那么出现这个现象的原因到底是什么呢？ **...

2018-04-17 11:13:38 7388

原创如何消除div之间的空隙

问题描述:三个div，变成行内块（display：inline-block）之后，div之间会产生空隙；如图所示: 产生的原因：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小div在大div中居中的方法&

2018-04-17 10:56:43 20611 4

原创小div在大div中居中的方法

案例前提：大小div均有固定宽高方法一：.parent { width:800px; height:500px; border:2px solid #000; position:relative;}.child { width:200px; height:...

2018-04-17 10:35:47 721

原创 css折叠外边距

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。折叠结果遵循下列计算规则：1.两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。也就是说当第一个div的margin-bottom与第二个div的margin-top都为正数时，它们会自动合成一个单独的外边距，取...

2018-04-17 10:24:18 235

原创 javascript 内置对象之 Error

JavaScript提供了内部（或”内置”）对象。它们是Array、Boolean、 Date、 Error、 Function、 Global、 JSON、 Math、 Number、 Object、 RegExp 和String 共12个常用对象。一、概念JS中的六种错误类型1. SyntaxError:语法错误解析代码时发生的语法错误，比如变量名错误、缺少括号等。...

2018-04-13 18:07:29 685

原创 JavaScript 内置对象之事件Events

事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。事件句柄列表下面是一个属性列表，这些属性可插入HTML标签来定义事件动作。 onabort:图片加载被中断onblur: 元素市区焦点onchange: 用户改变域的内容onclick: 鼠标点击某个对象ondblclick: 鼠标双击某个对象onerror: 加载文档或图像时发生错误onfocu...

2018-04-13 16:54:07 1083

原创 JavaScript 内置对象之 function

JavaScript提供了内部（或”内置”）对象。它们是Array、Boolean、 Date、 Error、 Function、 Global、 JSON、 Math、 Number、 Object、 RegExp 和String 共12个常用对象。JavaScript全局对象全局属性和函数可用于所有内建的 JavaScript对象。全局函数（常用）escape(...

2018-04-13 16:32:29 492

原创 JavaScript内置对象之RegExp

JavaScript提供了内部（或”内置”）对象。它们是Array、Boolean、 Date、 Error、 Function、 Global、 JSON、 Math、 Number、 Object、 RegExp 和String 共12个常用对象。RegExp对象RegExp对象表示正则表达式，它是对字符串执行模式匹配的强大工具。直接量语法：/pattern/att...

2018-04-13 15:33:39 506

原创 JavaScript String对象

Sting对象String 对象用于处理文本（字符串）。语法new String(s);String(s);参数参数 s 是要存储在String对象中或转换成原始字符串的值。返回值当String()和运算符new一起作为构造函数使用时，它返回一个新创建的String对象，存放的是字符串s或s的字符串表示。当不用new运算符调用String()时，它只把...

2018-04-13 14:14:06 130

原创 JavaScript内置对象之Number

JavaScript提供了内部（或”内置”）对象。它们是Array、Boolean、 Date、 Error、 Function、 Global、 JSON、 Math、 Number、 Object、 RegExp 和String 共12个常用对象。Number对象Number对象是原始数值的包装对象。语法var myNum = new Number(value);va...

2018-04-13 10:28:17 212

原创 JavaScript内置对象之Math

JavaScript提供了内部（或”内置”）对象。它们是Array、Boolean、 Date、 Error、 Function、 Global、 JSON、 Math、 Number、 Object、 RegExp 和String 共12个常用对象。Math对象Math对象用于执行数学任务。使用Math的属性和方法的语法：var pi_value = Math.PI;v...

2018-04-13 10:14:43 447

原创 JavaScript内置对象之Date

JavaScript提供了内部（或”内置”）对象。它们是Array、Boolean、 Date、 Error、 Function、 Global、 JSON、 Math、 Number、 Object、 RegExp 和String 共12个常用对象。Date对象 Date对象用于处理日期和时间。语法var myDate = new Date();注释：Date对象会自动把当...

2018-04-13 09:58:23 172

原创 JavaScript内置对象之Boolean

JavaScript提供了内部（或”内置”）对象。它们是Array、Boolean、 Date、 Error、 Function、 Global、 JSON、 Math、 Number、 Object、 RegExp 和String 共12个常用对象。Boolean对象Boolean对象表示两个值：”true” 或 “false”。语法：new Boolean(valu...

2018-04-13 09:43:16 240

原创 JavaScript内置对象之Array

JavaScript提供了内部（或”内置”）对象。它们是Array、Boolean、 Date、 Error、 Function、 Global、 JSON、 Math、 Number、 Object、 RegExp 和String 共12个常用对象。Array对象Array 对象用于在单个的变量中存储多个值语法arrayObj = new Array();array...

2018-04-12 10:31:51 213

原创图片压缩工具riot&tinypng

RIOT图片压缩工具 RIOT是一款图像优化工具。可以设置想要的图像质量，格式和即时预览功能，是一款非常简单、易于使用的图片压缩工具，压缩速度快，操作起来简单方便，压缩后的图片依然清晰，是图片压缩的理想选择。官方下载：http://luci.criosweb.ro/riot/TinyPNG 是一个网页版 PNG 图片专业压缩优化工具，可以在线批量压缩PNG图片，压缩率高达70%，但是...

2018-04-12 10:03:16 1102

原创 JavaScript前端实战项目动画实例：动画

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #square{ wi

2018-04-11 23:28:06 1508

原创原生JS获取样式注意事项

通过document.getElementById( element ).style.xxx可以获取元素的样式信息，但是对于通过clss属性引用的外部样式表就获取不到了，如下面的例子： <html lang="en"><head> <meta charset="UTF-8"> <title>Document</tit

2018-04-11 22:41:55 474

原创如何用js实现点击图片切换为另一图片，再次点击恢复到原图片

如何用js实现点击图片切换为另一图片，再次点击恢复到原图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>如何用js实现点击图片切换为另一图片，再次点击恢复到原图片</title>&am

2018-04-11 13:53:25 37743 8

原创 jQuery获取兄弟元素

jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点jQuery.prevAll()，返回所有之前的兄弟节点jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点jQuery.nextAll()，返回所有之后的兄弟节点jQuery.siblings(),返回兄弟姐妹节点，不分前后...

2018-04-11 10:22:30 40466

原创如何确定一台电脑配置的高低

电脑配置高低，主要取决于如下四大件：CPU、显卡、硬盘、内存。详细对比配置高低，需要了解各个型号的CPU、显卡、内存和硬盘性能。简单来说，对比电脑配置高低的方法如下：1，CPU。CPU的核心数量越多、主频越高，性能越好。比如双核CPU和四核CPU相比，后者性能好；2，显卡。显卡的显存和位宽越大，性能越好，比如1G显存和2G显存相比，后者更好；3，内存。内存的容量越大，性能越...

2018-04-10 23:34:09 51360

原创思源黑体

思源黑体是Adobe与Google历时三年在2014年7月宣布推出的一款开源字体，这是一款新的供桌面使用的开源 Pan-CJK 字体家族，有七种字体粗细（ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy），完全支持繁体中文、简体中文、日文和韩文，这些全部都包含在一种字体中。它还包括来自我们颇受欢迎的 Source Sans字体家族的拉丁文...

2018-04-09 14:36:01 7102

空空如也

空空如也