国产黄大片在线视频,亚洲精品久久久久久下一站,色男人的天堂

8個CSS柱形圖表技術應用

admin

2010年4月27日 2:40 本文熱度 8167

[p]在web應用中有很多數據、圖表的表現方式，尤其在一些數據統計應用比較廣泛的網站后臺，可以直觀表現數據的圖表應用更是不可缺少的一個重要部分。摒棄圖片的實現方法，使用純碎的css樣式去表現data的統計變化，能更好的增加網站的可訪問性和管理的可操作性。[/p]
[p]現在，[b][/b][url=http://bbon.cn/]菠菜博[/url]為你介紹8個優秀的css實現數據圖表的應用實例。[/p]
1，css線條圖表數據
[p][align=center][img]http://farm4.static.flickr.com/3060/2874182689_a4d22ff63b.jpg?v=0[/img][/align][/p]
這個實例包含了三種圖形數據的實現方法。上面的basic bar graph實例中使用了一個

包含圖表，一個元素作為柱形的block，然后再使用百分比來控制柱形的寬度，這種方法中一個優點就是使用了元素而不是段落
元素。另外兩個例子則是使用了定義列表dl和無序列表ul實現。
[p][url=http://apples-to-oranges.com/goodies/css-for-bar-graphs/]訪問實例1[/url][/p]
[p][/p]
2，符合標準的可訪問的可視化數據圖表
[p][align=center][img]http://farm4.static.flickr.com/3260/2874182691_4e99063606.jpg?v=0[/img][/align][/p]
[p]作者[url=http://wilsonminer.com/]wilson miner[/url]研究數據圖表的web accessible可訪問性概念和標準兼容性技術，涉及優勢、限制或是說兩者取長補短的折中用法。這里有三個使用無序列表ul基本結構實現的實例。[/p]
[p][url=http://alistapart.com/d/accessibledata/example-barchart.html]訪問實例1[/url] [url=http://alistapart.com/d/accessibledata/example-timeline.html]訪問實例2[/url] [url=http://alistapart.com/d/accessibledata/example-sparklines.html]訪問實例3[/url][/p]
3，css豎行圖表
[p][align=center][img]http://farm4.static.flickr.com/3121/2874182695_47d2bc4d3a.jpg?v=0[/img][/align][/p]
[p]這個實例展示的是一個和[b]“css線條圖表數據”[/b]類似的應用，使用無序列表ul實現豎行圖表效果。[/p]
[p][url=http://meyerweb.com/eric/css/edge/bargraph/demo.html]訪問實例[/url][/p]
4，使用百分比和背景圖片創建圖表
[p][align=center][img]http://farm4.static.flickr.com/3061/2874182697_5a3329ac98.jpg?v=0[/img][/align][/p]
[p]在這個例子中，你可以參考使用預先做好的背景圖片完成適當的數據描述。但缺陷就是這個預先設計好的背景圖片也會局限住其使用范圍，如果要實現更多的不同效果，就要增加css和html文件大小，同時，你的http連接數也就會增加。[/p]
[p][url=http://maxdesign.com.au/presentation/percentage/]訪問實例[/url][/p]
5，純碎的css數據圖表
[p][align=center][img]http://farm4.static.flickr.com/3261/2874182699_6b917eecf7.jpg?v=0[/img][/align][/p]
這個例子使用定義列表dl標記，然后在
定義列表中用元素來控制柱形區域的高度，用元素來顯示圖表遮罩區域的數值表示和在條形中間的絕對位置。
[p][url=http://images.sixrevisions.com/2008/09/20-05_pure_css_data.png]訪問實例[/url][/p]
6，css實現小塊錯綜區域圖表
[p][align=center][img]http://farm4.static.flickr.com/3284/2874182701_fd892309b0.jpg?v=0[/img][/align][/p]
[p]至今還沒遇到過類似的應用，但通過這個實例一定可以有效地提高你的css應用能力。[/p]
[p][url=http://jgc.org/blog/2005/12/css-absolute-positioning-scatter-plot.html]訪問實例[/url][/p]
7，定義列表dl實現線條圖表
[p][align=center][img]http://farm4.static.flickr.com/3103/2874187491_eccd3fbf1f.jpg?v=0[/img][/align][/p]
[p]這個技巧用兩個橫向線條圖表實例來表述dl實現方法，每一個例子都是使用被賦予class的dl元素來控制圖表的寬度百分比。[/p]
[p][url=http://cssplay.co.uk/menu/barchart.html]訪問實例[/url][/p]
8，具備可訪問行的線條圖表
[p][align=center][img]http://farm4.static.flickr.com/3269/2874187497_a9f0f478b7.jpg?v=0[/img][/align][/p]
[p]該實例使用table來控制整天圖表的結構，然后使用css樣式及背景圖片來將圖表延伸至適當的寬度。[/p]
[p][url=http://standards-schmandards.com/exhibits/barchart/]訪問實例[/url][/p]
[p]原文地址：[url=http://sixrevisions.com/css/css_techniques_charting_data/]8 css techniques for charting data[/url][/p]
[p][url=http://bbon.cn/2008/09/8%e4%b8%aacss%e6%9f%b1%e5%bd%a2%e5%9b%be%e8%a1%a8%e6%8a%80%e6%9c%af%e5%ba%94%e7%94%a8.html]http://bbon.cn/2008/09/8%e4%b8%aacss%e6%9f%b1%e5%bd%a2%e5%9b%be%e8%a1%a8%e6%8a%80%e6%9c%af%e5%ba%94%e7%94%a8.html[/url][/p]

該文章在 2010/4/27 2:40:20 編輯過

關鍵字查詢

css

技術

應用

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。

欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

8個CSS柱形圖表技術應用