CSS3平滑过渡效果让宽度向左滑动的代码为：
<!DOCTYPE html><html>
<head>
<style>
div#transitionhovertree
{
float: right
width:100px
height:100px
background:blue
transition:width 2s
-moz-transition:width 2s /* Firefox 4 */
-webkit-transition:width 2s /* Safari and Chrome */
-o-transition:width 2s /* Opera */
}
div#transitionhovertree:hover
{
width:300px
}
</style>
</head>
<body>
<div id="transitionhovertree"></div>
</body>
</html>
CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
1、新建html文件。
2、创建两个div，并赋予id。
3、为两个div设置宽高和背景，并设置左右浮动。
4、预览效果如图。
5、创建第三个div。
6、为第三个div设置宽高和背景。
7、预览效果如图。
注意事项：
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
.hc_hot ul li:hover {margin-left: -10px
}
鼠标移上.hc_hot ul li对应的元素后，触发hover状态，应用上面这条css，左边距变为-10px，达到向左移动的目的
