ruoshui0914-CSDN博客

原创 2--理解并学习javascript中的面向对象（OOP）（续）

2.下面部分代码，是从另外一个角度讲解javascript中的面向对象编程。是借鉴EasyJF开源团队的讲解，我个人做了一些补充和说明。[html] view plain copy> html xmlns="http://www.w3.org/1999/xhtml"> head> title>javascript面向对象编程

2017-07-13 18:06:46 211

原创 1--理解并学习javascript中的面向对象（OOP）

1.下面部分的代码，将是从目前十分流行的JSON数据格式以及javascript数组，来一步步像大家阐述javascript中的面向对象思想。 JSON数据格式 function jsonTest() { //定义json数据格式 -- 以文本的形式存在，转换为javas

2017-07-13 18:04:25 475

原创 css代码规范

CSS 样式书写规范可能不同团队都有各自的规范，又或者很多人在写 CSS 的时候还是想到什么就写什么，不存在太多的约束。我觉得 CSS 代码规范还是有存在的必要的，尤其是在团队配合，多人协作下，规范就显得尤为重要。本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，并不希望大家完全采用，而是可以结合自己的团队需要，发展出一套适合自己的 CSS 代码规

2017-07-13 16:03:35 497

原创 02-JS特效-匀速动画

动画的种类动画原理 = 盒子位置 + 步长。1.闪动。（瞬间到达）2.匀速。（每次走一样距离）3.缓动。（开始特快越走越慢，步长越来越小.类似刹车，电梯停止，压缩弹簧…）动画的原理：盒子的位置=盒子本身所在的位置+步长 * { padding: 0; margin: 0; } div {

2017-07-13 15:20:58 256

原创 01-JS特效-三大系列之offset系列

三大系列offset-位移scroll-卷页client-可视区js中有一套方便的获取元素尺寸的办法：offset系列offset常用属性（5个）offsetWidth和offsetHeight————（检测盒子自身宽高+padding+border）offsetLeft和offsetTop————（检测距离父盒子有定位的左/上面的距离）

2017-07-13 15:19:45 219

原创 02 JS-DOM之--js的加载和window onload

js的加载和html是同步加载的。但是网页中的JavaScript需要在文档加载完后再执行，否则可能获取不到对象。解决办法：script标签要放在body标签结束之前，这样的话页面加载HTML之后再执行js。不然js的效果显示不出来如果想放在头部里面，把所以的js代码放在 window.onload = function () {} 里面。这样的话，页面

2017-07-13 14:38:57 273

原创 01 JS-DOM之--事件以及绑定方法

事件经典三部曲获取事件源（一般都是：标签本身）绑定事件（ js已经定义好的，直接使用即可）书写事件驱动程序 //1.获取事件源 var box = document.getElementById("box"); //2.绑定事件 box.onclick = function () { //3.书写

2017-07-13 14:34:06 256

原创 08 CSS-隐藏盒子的5种方法

display:none;隐藏盒子，而且不占位置。(用的最多)overflow:hidden;隐藏盒子超出的部分opacity:0;隐藏盒子，而且占位置。visibility:hidden;隐藏盒子，而且占位置。Position/top/left/…-999px 隐藏盒子，而且占位置。补充：1.第三种opacity:0;将透明图变为0来隐藏盒子该方法IE8 以及更早的

2017-07-13 14:26:06 3027

原创 07 CSS-相对定位、绝对定位、固定定位、z-index

定位有三种，分别是相对定位、绝对定位、固定定位。1、相对定位：position:relative; 2、绝对定位：position:absolute; 3、固定定位：position:fixed; 4、关于z-index1、相对定位：position:relative;1.1相对定位介绍相对定位，就是微调元素位置的。让元素相对自己原来的位置，进行位置

2017-07-13 14:25:06 364

原创 06 CSS-margin

1、margin的塌陷现象标准文档流中，竖直方向的margin不叠加，以较大的为准如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的：2、盒子居中margin:0 auto;margin的值可以为auto，表示自动。当left、right两个方向，都是auto的时候，盒子居中了：margin:0 auto; → 让这个

2017-07-13 14:24:14 267

原创 05 CSS-浏览器兼容问题小总结（IE6）

IE6不支持小于12px的盒子IE6不支持用overflow:hidden;来清除浮动IE6双倍margin bugIE6的3px bug第一IE6不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大解决办法很简单，就是将盒子的字号，设置小（小于盒子的高），比如0px。 height: 4px; _font-size: 0px;

2017-07-13 14:23:08 179

原创 04 CSS-浮动和清除浮动的三种方法

浮动的性质：脱标、贴边、字围、收缩。浮动浮动的性质：脱标、贴边、字围、收缩。脱标：脱离标准文档流情况一：绿色盒子float:left;蓝色盒子没有float；绿色盒子脱离了标准文档流，所以蓝色盒子就是现在标准文档流中的第一个盒子。所以就渲染在了左上方。情况二：一个span标签不需要转成块级元素，就能够设置宽度、高度了。所

2017-07-13 14:22:15 312

原创 03 CSS-盒模型和标准文档流(行内元素和块级元素)

盒模型一个盒子中主要的属性就5个：width、height、padding、border、margin。width是“宽度”的意思，CSS中width指的是内容的宽度，而不是盒子的宽度。height是“高度”的意思，CSS中height指的是内容的高度，而不是盒子的高度padding是“内边距”的意思border是“边框”margin是“外边距”真实占有宽度= 左borde

2017-07-13 14:20:40 628

原创 02 CSS-继承和层叠

哪些属性可以继承？color、text-开头的、line-开头的、font-开头的这些关于文字样式的，都能够继承；所有关于盒子的、定位的、布局的属性都不能继承。继承性是从自己开始，直到最小的元素。层叠性当选择器，选择上了某个元素的时候，那么要这么统计权重：（id的数量，类的数量，标签的数量）权重问题大总结：选择上了，数权重，(id的数量，类的数量，标

2017-07-13 14:19:35 195

原创 01 CSS-选择器

CSS基础选择器标签选择器：所有标签名都可以当做选择器，比如body、h1、dl、ul、span等等id选择器：同一个页面内id不能重复（一般是JS中用ID选择器）类选择器：任何的标签都可以携带class属性，class属性可以重复（CSS尽量用类选择器）CSS高级选择器后代选择器：空格表示。选择的是后代，不一定是儿子交集选择器：选择的元素是同时满足两个条件,一般都是以标

2017-07-13 14:13:14 525

liqian的博客