花从何来(:before+:after)

原Demo，觉得好玩儿，照葫芦画瓢了一下：

最终的效果：Demo。

在这个效果里面，有很多的“花瓣”,我们需要考虑的就是这些“花瓣”从哪里来，如何分散到四周等等。

在HTML中，最基本的只需要一个元素就好了，这里我放一个div.flower(~~为了好看，还是在里面放一个笑脸吧~~)。

<div class="flower">
	<h1>\^_^/</h1>

li里有图片的情况

有如下这样一段HTML：

<ul>
	<li><img src="demo.jpg" alt="" /></li>
	<li><img src="demo.jpg" alt="" /></li>
	<li><img src="demo.jpg" alt="" 

原文地址

http://css-tricks.com/creating-a-3d-cube-image-gallery/

先看一下最终完成的效果，以冲淡一下译文的乏味与枯燥：点击Demo进行查看效果。

拆解立方体

一个立方体很明显是由六个面组成的，而这六个面将分别是六个HTML元素组成的，在这个案例中，这六个HTML元素分别是六个div。因为它们将要被旋转变形成一个立方体，所以它们需要被一个容器包含起来，如果我们按照这个思路的话，可以写出这样的HTML:

<div class="cube">
    <div class="cube-face"></div>
    <div 

水平等宽布局

一直以来，想要将一个列表水平排列，并且等宽，都只是将li浮动，然后设置宽度(按照列表项的个数来设置百分比或者一个固定的值-16.6%,33.3%…)，这个宽度无论怎么设置都是不理想的，甚至是比较痛苦的。。。

最近一直在做手机站，所以在不用考虑IE6、7浏览器的情况下，我发现了一个非常完美的解决方案！

table布局

“。。。你不会说直接用表格布局吧，这就是你说的完美？。。。”。

当然不是，虽然直接用表格可以比较完美的解决，但是写一大堆的table,tr,td是我所接受不了的，所以，我要说的当然不是直接写…

全屏

给网页设置背景图片非常简单，但是当浏览器的宽高度变化之后，如何保证背景图片一直充满整个页面呢？比如像：http://www.lofter.com/。

实现方法

方法1：background-size:cover

background-size:cover是CSS3中才有的，下面做一个测试，先在body里面放一个div，然后给它加一些基本的样式：

div.bg{
	position:fixed;