JS练习:OOP版Tab

练习面向对象编程

这个小插件只是用来练习面向对象编程的,只是很普通Tab面板的切换而已,效果请点击:JS练习:OOP版Tab.

代码实现

基本结构

HTML

在HTML中,我们把列表项和内容项分开来,列表项是一个ul,内容是一个DIV里面套了若干个DIV:…

好玩儿:对z-index添加CSS3动画

可以对z-index添加CSS3动画

利用CSS3的动画来改变z-index的值,先来看一下效果,愤怒的小鸟,叽叽啾~~ :CSS3动画:z-index

实现过程

HTML结构

HTML中,我们用几层DIV来模仿障碍物,然后把小鸟的图片也引入:

<img src="angrybird.png" class="mover">
<div class="ground ground-1"></div>
<div 

line-height深入理解

为何要深入理解line-height?

原因很简单,以前我在用line-height的时候,只是简单的将他设置了一个值:例如line-height:18pxline-height:2em等等,我以前的相法是:line-height设置的值就是设置该元素每行所占的高度。但是这个“元素”内如果有其它元素呢?会不会被继承?如果会的话,那么继承的机制是怎么样的?设置为不同单位的值分别是什么意思?如果一个元素不设置固定的height,那么这个元素的高度是由文字的大小还是由height或line-height来决定的呢?突然之间想到这么多的问题,真是发现自己什么都不知道了~~

HTML中的一些盒子

假设有这样一段HTML:

<p>hello everyone 

jQuery插件-RainBowList

插件下载

压缩版本:jquery.rainbowlist.min.js

开发者版本: jquery.rainbowlist.js

使用方法

比如有这样一段HTML:

<ul class="rainbowList">
	<li><a href="javascript:">:after伪类清除浮动</a></li>
	<li><a href="javascript:">嵌入flash</a></li>
	<li><a 

去除inline block元素中间的空白

inline-block元素之间的空白

假设有下面这样一段HTML:

<nav>
  <a href="#">首页</a>
  <a href="#">文章</a>
  <a href="#">关于</a>
</nav>

16.FlexBox弹性盒子详解

RUNTIME: 50:50

详细介绍 CSS3 中的FlexBox 布局。
直接购买「JavaScript高级程序设计」

JavaScript高级程序设计

[美] 尼古拉斯·泽卡斯 著

一本包含了所有JavaScript知识的厚书。

直接购买「ES6标准入门」

ES6标准入门

阮一峰 著

前端越来越规范,JavaScript越来越规范了~

直接购买「CSS禅意花园」

CSS禅意花园

[美] Dave Shea / Molly E. Holzschlag 著

没错,就是这本「禅」书让我入的前端坑!

直接购买「CSS世界」

CSS世界

张鑫旭 著

不管你是新手还是资深开发,这本书里都会有你不知道的东西。