见面时的呼吸都曾反复练习-CSDN博客

原创使用bootstrap混入，实现row和col

当然，父级div外面还有一层，container类，或者container-fluid<div class="parent"> <div>1</div> <div>2</div> <div>3</div></div>实现：.parent { .make-row(); //这与在行间加 .row ，没有任何区别 > div { .make-xs-col

2016-01-08 14:20:34 3610

原创 bootstrap利用Font Awesome给选择添加checkbox图标

实现效果：鼠标移入打钩代码：a { .btn; //给a,应用.btn样式， .btn-sm; padding-left: 0; padding-right: 0; color: @gray; &:hover

2016-01-08 14:13:34 3449

原创 bootstrap进行网页配色过程

以企业网站颜色：蓝、红、灰，为例（1）打开variables.less，（2）灰色变量覆盖范围，安装需求进行修改@gray-base: #000;@gray-darker: lighten(@gray-base, 13.5%); // #222@gray-dark: lighten(@gray-base, 20%);

2016-01-08 14:00:47 3478

原创 bootstrap自定义功能按钮

在bs中，都有用过.btn-defaule 或者 .btn-primary ,我们也可以自定义我们想要的按钮效果。（1）准备一组新的按钮变量，在 bs，less文件中，打开variables.less，可以看到原始的一些数据，@btn-danger-color: #fff;@btn-danger-bg: @brand-danger;@

2016-01-08 13:47:18 3531

原创 after与before应用

看bootstrap源码还是可以学到很多知识啊。实现效果鼠标hover的时候，有个border，并且会在蓝色三角形中打钩，纯css实现，但是在ie7及以下不支持。 .box li:hover {outline: 1px solid #0cf} .box li:after { position: absolute; display: block;

2015-12-29 11:04:15 343

原创 CSS组件

1、字体bootstrap自带的Glyphicons 字体图标，还有是font awesome2、下拉菜单.dropdown 最大作用给了父级position: relative; 菜单向下弹出 .dropup 菜单向上弹出 .dropdown-toggle data-target=”dropdown” .caret 按钮及下拉图标 .dropdown-menu 下拉菜单 .dro

2015-12-25 19:12:34 491

1、移动设备优先1.1、head部分的设置ie使用最新的渲染引擎<meta http-equiv="X-UA-Compatible" content="IE=edge">viewport元数据标签<meta name="viewport" content="width=device-width,initinal-scale=1, maximum-scale=1, user-scalable=no "

2015-12-25 11:50:32 1735

原创初入移动端jq+html5

刚接触移动端，记录一些小点 1、屏幕分辨率，1080P的概念，目前主流的640*960、640*1136（iPhone4和5） 2、设备分辨率：宽300~400； 3、设备像素比:window.devicePixelRatio,即屏幕分辨率/设备分辨率；目前流行的是2. 4,viewport<meta name="viewport" content="width=device-width,

2015-11-29 19:59:48 453

原创 DOM-JavaScript

一、DOM中的JavaScript 1、JavaScript默认是同步解析。默认情况下，当DOM在解析且它遇到一个script元素时，它将停止解析文档，阻止任何进一步的渲染与下载，并执行该JavaScript。因为此行为是阻塞的，并且不允许并行解析DOM或者执行JavaScript，所以它被认为是同步的。如果JavaScript是HTML文档外部的，那么阻塞更加严重，因为Jav

2015-11-24 18:40:45 333

原创 DOM-文本节点

一、文本节点 1、文本对象的属性与方法 .textContent 移出文本标记并返回所有的自文本节点 .splitText() 分割文本节点。一个参数，即开始分割的index，返回分割掉的字符串 .appendData() 添加。末尾 .deleteData() 删除。[startIndex,num) .inse

2015-11-24 17:50:37 463

原创 DOM-元素节点内联样式

一、元素节点内联样式 1、样式设置 oDiv.style.width = “300px”2、获取,因为一般都是获取样式表中的，而不是行间function getStyle(obj,attr) { return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr]}//

2015-11-24 17:49:35 443

原创 DOM-元素节点几何量和滚动几何量

一、元素节点几何量和滚动几何量 1、offsetParent 2、offsetLeft 元素到父级（或者整个页面）左边的距离，不包括自己和父级的border值，offsetTop类似 3、offsetTop//元素到整个页面顶部的距离function posTop(obj) { var result = 0; while(obj){ r

2015-11-24 17:48:51 370

原创 DOM-文档概述、文档节点、元素节点

一、DOM:文档对象模型，是由JavaScript节点对象组成的层次结构/树1、节点对象类型：nodeType(共用12种类型，仅列出了常用的几个)ELEMENT_NODE = 1 元素节点如：<body> <div> <script> <html>ATTRIBUTE_NODE = 2 属性节点如：<class> <href> <alt> <title>TEXT_NODE = 3

2015-11-24 12:39:33 557

原创 firstChild与firstElementChild的兼容处理

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload=function(){ var oUl=document.getElementById(

2015-11-24 10:36:56 2859

原创 ajax-瀑布流效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 0;padding: 0} html,body {overflow-x: hidden;} #wrap {ma

2015-11-23 19:52:14 335

原创 ajax-跨域解决之jsonp

跨域：一个域名下的文件去请求了和它不一样的域名下的资源文件，那么就会产生跨域请求。jsonp原理： json with padding 在资源加载进来之前，定义好一个函数，这个函数接收一个参数（数据），函数里面利用这个参数，做一些事情。然后需要的时候，通过script标签加载对应远程文件资源，当远程资源加载进来的时候，就会去执行我们之前定义好的函数，并且把数据当做这个函数的参数传入进去。//利

2015-11-23 18:04:50 269

原创 XMLHttpRequest对象

XMLHttpRequest对象相关属性1、responseText : 作为响应主体被返回的文本 2、responseXML ：如果响应的内容类型是“text/xml”或者”application/xml”,这个属性中保存包含着响应数据的XML DOM文档 3、status ：响应的HTTP状态（状态码为200为请求成功） 4、statusText : HTTP状态说明。5、readyS

2015-11-21 21:07:59 261

原创 js分页实例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 0;padding: 0} #page {width: 100%;text-align: center;} #

2015-11-20 21:23:41 364

原创 js分页函数

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #page a {margin: 10px;} </style> <script type="text/javascript">

2015-11-20 21:22:02 330

原创 ajax基础（2）封装

简单封装1function ajax(method,url,data,success) { var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHTTP");

2015-11-19 22:47:27 350

原创 ajax基础（1）

ajax 4步曲//1、打开浏览器 var xhr = null; if (window.XMLHttpRequest) { //兼容处理 xhr = new XMLHttpRequest() }else { xhr = new ActiveXObject("Mi

2015-11-19 22:45:13 280

原创 jQuery第四课 ——运动

1.同时改变的是宽高透明度 show() 显示 hide() 隐藏 toggle() 切换显示 / 隐藏的状态 2、改变的是高 slideDown() 向下滑动展开 slideUp() 向上卷动隐藏 slideToggle() 以滑动/卷动方式切换展开 / 收起状态 3、改变的是透明度 fadeIn() 淡入方式显示

2015-11-01 10:38:36 354

原创 jQuery第三课 ——元素尺寸、滚动距离、元素距离、jq事件、event对象

23、元素尺寸 (1)width() height() 不带单位，即css中设置的值 (2)innerWidth() innerHeight() width + padding 注意clientWidth也是width + padding (3)outerWidth() outerHeight() width + padd

2015-10-17 12:15:39 2271 1

原创 jQuery第二课 ——节点选择、元素创建与操作、包装对象、jq转原生js

15、节点的选择 (1).first() (2).last() (3).slice() 参数：[开始位置，结束位置) 不包括结束位置(4).children() 直接的子元素 ,也可加参数进行过滤，eg : .children('div') 只匹配子元素div(5).find() 注意：必须写参数 find('div'),也可用（*）选取所有，会

2015-10-17 10:35:39 1048

原创 jQuery第一课 ——属性、节点选择

1、$(‘input[value]’) 选择带有value属性的2、$(‘input[value=”abc”]’ 选择value等于abc的3、$(‘input[value^=”a”]’) value是以a开头的4、(′input[value('input[value=”a”]’) value是以结束的5、$(‘input[value*=”a”]’) 匹配任意位置，value属性

2015-10-17 09:07:08 387

转载 jQuery $.each用法

转自mabel_on_line以下内容非原创，来自百度文库http://wenku.baidu.com/view/4796b6145f0e7cd18425368e.html通过它，你可以遍历对象、数组的属性值并进行处理。使用说明each函数根据参数的类型实现的效果不完全一致：1、遍历对象(有附加参数)$.each(Object, function(p1, p2) { this; //这里

2015-10-15 10:55:13 298

转载 CSS书写规范、顺序

一、书写顺序1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background, border等)5.其他(animation,

2015-10-13 09:59:15 263

转载 css3设置box-pack和box-align让div里面的元素垂直居中

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #container{ display: box; display: -webkit-box; display: -moz-

2015-10-10 11:02:32 1958

转载面向对象小结

面向对象之构造函数结构： function 构造函数() { this.属性 = valve } 构造函数.prototype.方法 = function() { } var 对象1 = new 构造函数(); 对象1.方法(); eg : function Person() { this.

2015-10-09 21:03:46 348

转载 js实现图片上传预览

笔试题遇到的，百度了许多资料，但是原地址的给的有问题，window.URL.createObjectURL(dFile.files[0]);<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"> <title>JS上传图片前的图片预览效果</title></head><body> <input id="myfil

2015-09-25 18:36:01 387

原创 js中的函数

/* 来源具体可查看《JavaScript模式》 */一、函数特点1、函数时第一类对象函数在运行时动态创建，还可以在程序执行过程中创建函数可以分配给变量，可以将它们的引用复制到其他变量，可以被扩展，此外，除少数情况外，函数还可以删除可以作为参数传递给其他函数，并且还可以由其他函数返回函数可以有自己的属性和方法2、函数提供了作用域在函数内部以var关键字定义的任何变量都是局部变量，对于外部函

2015-09-18 11:55:26 329

原创绑定事件、阻止默认事件、阻止冒泡

一、绑定事件 ie6-8 ：attachEvent (事件名，函数名)；事件名+on ie9以上也支持addEventListener标准下：addEventListener(事件名，函数名，false)；事件名无on，false表示冒泡阶段调用事件处理函数，true则是捕获阶段绑定事件的问题：1、参数不一样 2、是否加on 3、执行顺序

2015-09-15 17:45:44 393

原创网页加载效果（利用图片加载）

function loading(){ var oSpan=oLoad.getElementsByTagName(‘span’)[0]; var aDiv=oLoad.getElementsByTagName(‘div’); var arr=[‘bg1.jpg’,’bg2.jpg’,’bg3.jpg’,’bg4.jpg’,’bg5.jpg’,’p

2015-09-15 17:21:41 432

原创 css3实现卡片翻转

真的是好记性不如乱笔头，以前看过了css3实现卡片翻转，觉得简单，也就没做笔记，今天在写了，一头蒙啊。。需要用到的css3:属性： 1、perspective:800px;景深：一般设给舞台， 2、transform-style：preserve-3d；3d场景，一般设给容器，也就是那个施加动画的元素 3、backface-visibility:hidden ;是否显示该选择元素旋转到背面

2015-09-13 20:34:08 3193 2

原创让网页背景图片固定，不随缩小放大而变化

最近在百度首页，缩小放大时，发现背景图片一直保持不变，只是内容在变化，看看了源码，才知道怎么回事。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 0;padding: 0}

2015-09-12 16:32:45 13113 1

原创 getBoundingClientRect（）

一、getBoundingClientRect（），元素到可视区的距离主要是在ie下有个2像素的差别。可以封装一个函数：function GetRect(element){ var rect=element.getBoundingClientRect(); var top=document.documentElement.clientTop; //非ie是0，ie是2；

2015-09-08 09:21:40 849

原创 js中offsetParent，offsetLeft的兼容问题

一、offsetParent 先简单的来个结构,三个嵌套的div，主要是找div3的offsetParent<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 0;paddin

2015-08-11 16:14:25 2860

原创函数之间传参，获取别的函数内的变量值

函数之间想要达成战略联盟，怎么也得资源共享一下吧。function aa(){ var value="999黄金"; bb(value)}现在假如有个函数bb想要得到aa函数内部的‘999黄金’，就可以采用传参的。function bb(val){ var mySelf=val; alert(mySelf)}aa(); //"999黄金"第二种，可以建个全局变量

2015-08-09 18:02:58 723

原创 js闭包总结

学了，也看了一些关于闭包的东西，做个总结，以备不时之需，可能有不足的地方，我对闭包也不是很了解。一、什么是闭包？闭包百度一搜，会有太多的解释。闭包就是嵌套在函数里面的内部函数，并且该内部函数可以访问外部函数声明的所有局部变量、参数、和其它内部函数。当该内部函数在外部函数被调用时就生成了闭包。说了一堆，举例说明：function wai(){ var num=1; functi

2015-08-09 17:49:01 946

原创 js获取时间及倒计时

一、获取时间的几个方法 `1.获取系统时间： var oDate=new Date(); 2:获取年月日时分秒星期； var oYear=oDate.getFullYear(); var oMonth=oDate.getMonth(); //0~11 var oDate=oDate.getDate(); var oHours=oDate.getHours(); var oMin

2015-08-09 14:32:40 533

空空如也

空空如也