以下收集分享的数据图表的展示效果，是完全用html和css来实现的。通过仔细研究学习这些案例对于我们学习css会有很大帮助的。
1、完全使用div、span和css制作的数据图表。
2、有很多用纯css制作的数据图表，我感觉这个是做的最漂亮的一个。
3、这个线形数据图表完全基于html和css制作的，没有应用js。这样的图图表加载快，而且延展性比较灵活。
4、这个竖状条形图完全使用html和css制作的，不是js制作的。这样的条形图加载快而且宽度可以根据页面自动延伸。
5、圆形数据统计图表
6、这个饼图数据图表完全用的html和css制作的。图表可以根据具体的页面进行延展。
7、曲线统计图表
8、分散统计图表
9、线统计图表
10、统计图表完全使用html和css制作的，在制作的过程中使用了css sprites和position属性。
11、柱状统计图表
12、柱状统计图表
13、漂亮的柱状统计表
14、进度条图表
15、条形数据图表
16、条形数据图表
17、数据图表
......

这5个有用的css属性可能你是比较熟悉的，但是很少使用到它们。我这里讨论的不是css3的新属性
。我提到的都是被所有浏览器支持的css2属性比如：clip、min-height、white-space、cursor和display。千万别错
过这篇文章，因为你会惊讶的发现他们是很有用的。
一、css clip（裁切）
clip裁切这个属性有点像是遮罩。它允许你用特定的形状遮罩相应的内容。裁切某元素之前，你必须先给该元素指定绝对定位属性，然后给它的上下左右赋值。
图片裁切举例
（演示）
在接下来的这个例子里面，主要展示如何给一个图片应用裁切属性。首先，指定div元素相对定位，然后给图片赋予绝对定位属性和相应的属性值。
代码如下：
.clip {
position: relative;
height: 130px;
width: 200px;
border: solid 1px #ccc;
}
.clip img {
position: absolute;
clip: rect(30px 165px 100px 30px);
}
图片调整和裁切
在这例子里面，我们将展示你如何调整图片大小并裁切图片。这个图片的原始形状是长方形的，我想把图片缩小一半后在正方形里展示。我用width、
height属性改变图片大小，然后通过裁切属性让其显示为正方形，同时给left赋值使图片向左移动15px距离。
代码如下：
.gallery ......

/*
*创建人：蔺宜忠
*用途：学习css，应用于新闻系统
*/
*
{
    /*把默认值设置为0*/
    margin: 0;
    padding: 0;
    border-width: 0;
}
body
{
    font-size: 14px;
}
a:link，a:visited
{
    /*鼠标未移上去的状态、超链接访问后的样式*/
    color: Black;
    text-decoration: none;
}
a:hover
{
    /*鼠标移到超链接上的样式*/
    color: red;
    text-decoration: underline;
}
#top, #search, #main, #footer
{
    /*公共样式*/
    margin: 10px auto 10px auto;
    width: 760px;
}
#top
{
    /*顶部样式*/
}
#search
{
    /*搜索区*/
}
.test
{
    border-width: 0;
}
#main
{
    /*可变内容区*/
    height: 313px;
    margin-bottom: 10px;
}
#footer
{
 &n ......

假如你没有时间去体验Flash Builder 4的Bate版，也许你很想知道Flash Builder4有哪些新的特性。即使你体验过Bate2的版本，相对正式版本来说，还有一些新的特性。
我们的产品市场组在总结新的特性方面，已做了足够的工作。但是若你想了解每一个新特性(70多个)的详细信息，我把它们详细地列出来了，还有一些文档，你可以结合着了解更多的内容。
Working with project（工程相关）
Convert to server project -- 将一个没有后台支持的Flex工程转换成后台工程(要使用PHP,ColdFusion,BlazeDs,LCDS or .NET)
Convert to AIR project -- 将Flex工程转换成了AIR工程
Package explorer -- 提供一个分等级的视图浏览，工程，包，类，相关libs和其它资源。
HTML wrapper -- 用SWFObject 把Flex 应用程序的代码包装起来
MX-only workflow --在不使用Spark组件集情况下，利用Flex的4语言和编译器的功能优势
FXP export -- 将Flex 工程导出为一个FXP格式的文件
>>关于Working with project更多信息,你可以查看http://help.adobe.com/en_US/Flex/4.0/UsingFlashBuilder/WS6f97d7caa66ef6eb1e63e3d11b6c4d0d21-7fdd.html
Code editing（代码编辑）
Updated content assist -- ......

直接拷贝到flash build 4 正式版里进行测试！
源码：
/*
 *
核心部分
//为tf初始化各类属性
tf = new TextFlow();
um = new UndoManager();
em = new EditManager(um);
tf.interactionManager = em;
//格式
var fmt:TextLayoutFormat = new TextLayoutFormat();
fmt.fontFamily = "_sans";
fmt.fontSize = 12;
fmt.paddingTop = fmt.paddingLeft = fmt.paddingBottom = fmt.paddingRight =  10;
tf.hostFormat = fmt;
//define elements to contain text  定义包含的节点属性
d = new DivElement();
p = new ParagraphElement();
s = new SpanElement();//平常的文字--- 用于定义文字
s.text ="Press the green button to start. Sometimes the loaded images will flash large (unscaled) when they come in. ";
//add these elements to the TextFlow    加入根节点textFlow中
p.addChild(s);//增加到 pragraph里   与html标签类似 
d.addChild(p);//  div区域   与html标签类似 
tf.addChild(d);   //最终的根节点为 TextFlow
var leaf_el:FlowLeafElement = tf. ......

效果出来了,可就是太依赖uCenter了,不知道怎么独立出来
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="447" height="477" id="mycamera" align="middle">
   <param name="allowScriptAccess" value="always" />
   <param name="scale" value="exactfit" />
   <param name="wmode" value="transparent" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="#ffffff" />
   <param name="movie" value="http://localhost/ucenter/images/camera.swf?inajax=1&appid=1&input=194fO9ZwtcN%2BDMN6%2Bvx80u99kMfa%2FjANwHO4h3tTj1cgzd6dxK5b%2B1TuTSpaKUFAjXI27nEQJTZ5qwutJ5s7%2FAB91IGdNLn%2B6ASgPPjKV4U0yi9WjpcySJ8&agent=362ddbe7ff610607d8d9875748b7bb56&ucapi=http%3A%2F%2Flocalhost%2Fucenter&avatartype=virtual" />
   < ......