2013年04月所有文章

好玩儿:对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>

Sublime Text2中安装Emmet

Emmet

Emmet是一款可以快速编写HTML、XML、CSS的强大的插件!Very Powerful!

官方网址:http://emmet.io/

在Sublime Text中安装Emmet

首先,Emmet支持很多的编辑器,不只是Sublime,因为我用的是Sublime,所以这里介绍一下在Sublime中的安装方法。

首先要安装Package Control
打开https://sublime.wbond.net/installation

在Sass中轻松使用Media Queries

使用Mixin

Sass初识一篇中介绍了如何在Sass中使用Media Queries:

#pagewrap {
    @media (max-width:800px) {
        background:red;
    }
    @media (max-width:500px) 

Sass初识

第一次用Sass

之前好长一段时间在一些老外的博客上看到Sass这个东西,可是一直都没在意,直到今天用了才知道这东西原来是如此的方便,大大的提高了工作效率,下面我简单的给大家介绍一下。

Sass到底是什么东西?

Sass是CSS的一种扩展语言,官方网址:Sass-lang.com,它的全称是:Syntactically Awesome StyleSheets,看到有一个Awesome就感觉很霸气!Sass有两种语法格式 1).文件扩展名为Scss 2).文件扩展名为Sass,我们将要介绍的是Scss的语法。
这里要说明的是:浏览器认识的是.css文件,而不认识.scss