学习笔记
float：
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
具体应用如下：
overflow：
overflow 属性规定当内容溢出元素框时发生的事情。
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
Cursor：
cursor 属性规定要显示的光标的类型（形状）。
该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）。
list-style-type：
list-style-type 属性设置列表项标记的类型。
-Webkit- Transition
在CSS3中这个属性的作用是使得变化不那么生硬，达到比较平和的过渡。而实际变化的属性是需要我们自己手动去添加变化.
源码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>20130828</title>
<style type="text/css">
*{margin:0; padding:0;}
body{
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:12px;
background:#eff;
}
.nav{
margin:200px 20px;
background:#fff;
overflow:hidden;
width:590px;
box-shadow:0 2px 10px 2px rgba(0,0,0,0.2);
}
.nav li{
width:120;
border-left:5px solid#666;
float:left;
cursor:pointer;
list-style-type:none;
padding:10px 50px 10px 15px;
-webkit-transition:all 0.3s ease-in;
-moz-transition:all 0.3s ease-in;
-o-transition:all 0.3s ease-in;
}
.nav li h2{
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic;
font-weight:normal;
font-size:14px;
margin-bottom:5px;
line-height:16px;
}
.nav li p{
font-size:11px;
color:#999;
-webkit-transition:all 0.1s ease-in;
-moz-transition:all 0.1s ease-in;
-o-transition:all 0.1s ease-in;
}
.nav li:hover{
background:#333;
border-left:5px solid #000;
}
.nav li:hover h2{
font-weight:bold;
color:#fff;
}
.nav li:hover p{
color:#ccc;
padding-left:5px;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<h2>Home</h2>
<p>Welcom to UI</p>
</li>
<li>
<h2>Tab</h2>
<p>Welcom to UI</p>
</li>
<li>
<h2>San</h2>
<p>Welcom to UI</p>
</li>
<li>
<h2>Four</h2>
<p>Welcom to UI</p>
</li>
</ul>
</body>
</html>