首页
|
互联网
|
IT动态
|
IT培训
|
Cisco
|
Windows
|
Linux
|
Java
|
.Net
|
Oracle
|
软件测试
|
C/C++
|
嵌入式开发
|
存储世界
|
服务器
网络设备
|
IDC
|
安全
|
求职招聘
|
数字网校
|
网页设计
|
平面设计
|
技术专题
|
电子书下载
|
教学视频
|
源码下载
|
搜索
|
博客
|
论坛
ASP
|
ASP.NET
|
JSP
|
PHP
|
AJAX
|
XML
|
Java script
|
HTML/CSS
|
服务器类
各大城市软件开发培训、软件人才免费咨询热线:
400-700-5807
您现在的位置:
中国IT实验室
>>
WEB开发
>>
WEB开发
>> 正文
用表格实现的柱状图特效
中国IT实验室收集整理
2008-8-2
保存本文
佚名
收藏本站
基于table的柱状图实现,以下是HTML网页特效代码,点击运行按钮可查看效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> 基于table的柱状图实现——dudo博客 </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> * {margin:0; padding:0;} body {padding:0;margin:40px;font-size:9pt;font-family:Helvetica,Geneva,sans-serif;} table#q-graph { width:600px; height:300px; caption-side:top; border:2px solid #0063be; background:transparent; position:relative; display:block; z-index:2; } table#q-graph caption { width:100%; position:absolute; top:-20px; } table#q-graph tbody tr,table#q-graph tbody th { position:absolute; width:150px; height:296px; vertical-align: top; bottom:0; border-right:1px dotted #41a3e2; } tr#q1 {left:0;} tr#q2 {left:149px;} tr#q3 {left:298px;} tr#q4 {left:447px;border-right:none;} td.bar{ position:absolute; text-align:center; width:34px; bottom:0; .bottom:2px; z-index:2; } th.north,td.north { left:36px; background:#ddd url(http://web.chinaitlab.com/UploadFiles_5817/200808/20080802170532671.gif) no-repeat 0 0; } th.south,td.south { left:80px; background:#ddd url(http://web.chinaitlab.com/UploadFiles_5817/200808/20080802170532671.gif) no-repeat -34px 0; } table#q-graph thead tr { bottom:auto; left:100%; margin:-2.5em 0pt 0pt 5em; top:50%; position:absolute; } table#q-graph thead th { width:34px; position:absolute; left:0; height:auto; color:#fff; } table#q-graph thead th.north {top:30px;} ul#ticks { list-style-type:none; width:600px; position:relative; top:-300px;#top:-302px;z-index:1; background:#adfe12; } ul#ticks li { border-top:1px dotted #41a3e2; height:59px; } ul#ticks li:first-child { border:none; } .fix_IE{border:none!important;#height:45px!important;} ul#ticks li p { position:absolute; left:100%; } </style> </head> <body> <table id="q-graph" cellspacing="0"> <caption>某公司2007年1~4季度南北区域销售情况对照表(单位:万件)</caption> <thead> <tr> <th></th> <th class="north">北方</th> <th class="south">南方</th> </tr> </thead> <tbody> <tr id="q1"> <th scope="row">Q1</th> <td class="north bar" style="height:111px">18</td> <td class="south bar" style="height:99px">16</td> </tr> <tr id="q2"> <th scope="row">Q2</th> <td class="north bar" style="height:198px">32</td> <td class="south bar" style="height:210px">34</td> </tr> <tr id="q3"> <th scope="row">Q3</th> <td class="north bar" style="height:260px">43</td> <td class="south bar" style="height:198px">32</td> </tr> <tr id="q4"> <th scope="row">Q4</th> <td class="north bar" style="height:111px">18</td> <td class="south bar" style="height:198px">32</td> </tr> </tbody> </table> <ul id="ticks"> <li class="fix_IE"><p>50</p></li> <li><p>40</p></li> <li><p>30</p></li> <li><p>20</p></li> <li><p>10</p></li> </ul> </body> </html> <a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站,js.alixixi.com</a>
[提示:可先修改代码再按运行]
相关文章
上传图片前的预览效果特效
加载网页时的进度条特效
雅虎选项卡特效
最新文章
·
Ajax光环背后的隐患
·
Windows操作系统下JSP程序开发环
·
如何在Java程序中实现FTP的上传下
·
Java应用:编写高级JavaScript应
·
初学者学习java第一步——JDK环境
文章评论
精彩友情推荐
·
Asp源码
PHP源码
·
CGI源码
JSP源码
·
建站书籍教程
·
服务器软件
.net源码
·
建站工具软件
·
IDC资讯大全
·
机房品质万里行
·
IDC托管必备知识
·
全国IDC报价
·
网站推广优化
ASP.NET
ASP
PHP
JSP
·
ASP.NET开发中的八个最佳实践
09-21
·
ASP.NET开发中的验证码技术
09-18
·
控件开发asp.net处理标签间内容
09-18
·
程序员成为成为编程高手的二十二条军规
09-18
·
VS 2005和ASP.NET 2.0中处理CSS样式表
09-17
·
如何有效监控.NET应用程序
09-16
·
浅析ASP.NET 2.0 Client Callback
09-16
·
探讨ASP.NETMVC框架内置AJAX支持编程技术
09-15
·
ASP.NET2.0的URL映射的实现方法
09-13
·
Java\.net\PHP比较 程序员眼中的.Net世界
09-12
·
asp.net中实现观察者设计模式
09-12
·
谈JSP与XML的交互
09-01
·
ASP连接11种数据库语法总结
09-01
·
如何利用ASP实现邮箱访问
09-01
·
ASP随机数的应用技术
09-01
·
定时使用DWRUtil.addRow生成表格
08-27
·
ASP申请单动态添加实现方法及代码
08-27
·
关于ASP中脚本执行顺序的讲解
08-25
·
ASP程序实现网页伪静态页源代码
08-25
·
ASP如何调用webservice
08-22
·
ASP实例:读取xml文件的程序
08-14
·
Asp组件检测函数
08-11
·
Linux系统下让PHP提高性能的工具APC
05-06
·
一个完整、安全的PHP用户登录系统
11-14
·
Apache+PHP+MySQL建立数据库驱动的动态网站
08-24
·
用SSH与PHP相连接 确保数据传输的安全性
08-23
·
PHP5手动最简安装方法
08-03
·
PHP程序加速探索之服务器负载测试
07-11
·
完全讲解PHP+MySQL的分页显示示例分析
05-30
·
用Suhosin加强PHP脚本语言安全性
05-26
·
初学入门 PHP 和 MySQL
05-17
·
传奇的诞生 PHP三位创始人简介
05-10
·
大型系统上PHP令人不爽的九大原因
05-10
·
JSTL中fn表达式的使用说明
09-18
·
JSP Web框架研究:Struts
09-16
·
JSF在GlassFish管理控制台中的应用
09-12
·
介绍JSP程序动态网站环境搭建的详细步骤
09-12
·
Jsp页面中文参数传递get和post方法分析
09-12
·
Java\.net\PHP比较 程序员眼中的.Net世界
09-11
·
JavaScript最常用的55个经典技巧
09-08
·
Windows操作系统下JSP程序开发环境配置
09-03
·
JSF点滴积累--权限验证
09-03
·
小小分页帮助程序
08-29
·
经验分享全过程JSP程序员完全蜕变手册
08-27
培训中心
人才交流中心
技术交流中心
ITLab技术交流平台: