网站首页
关于深山
客户案例
业务范围
联系深山
网络投票系统
企业网站建设
旅行社网站建设
小程序
留言板
技术文章
许愿墙(qq爱墙)
技术首页
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
asp.net
DIV+CSS
HTML
SEO搜索引擎忧化
下载类信息
个人空间
代码生成
电商
python
页面特效
表格特效
导航菜单
图形特效
表单特效
时间日期
色彩类别
链接特效
网页特效
系统硬件
网站公告
网页学习
技术类文章
网站类信息
订阅本栏目 RSS
您所在的位置:
深山工作室
>
DIV+CSS
> 正文
CSS+ul 实现的柱状图
深山行者个人网站 2009/9/21 8:36:45 深山行者 字体:
大
中
小
浏览 8645
以下为详细代码
<!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> 基于CSS的柱状图实现——Dudo博客 </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> body {padding:0;margin:40px;font-size:9pt;font-family:Helvetica,Geneva,sans-serif;} h3 {font-weight:normal;display:block;width:600px;text-align:center;} /*ul*/ ul#q-graph { border:2px solid #0063be; background:#ffc; background:#ffc repeat-x scroll 0 0; height:300px !important; height:304px; width:600px; position:relative; list-style:none; margin:1.1em 1em 3.5em; padding:0; } #q-graph li { position:absolute; text-align:center; bottom:0; padding:0 margin:0; } /* ul li */ li.qtr { width:150px; height:300px; border-right:1px dotted #41a3e2; z-index:2; } li#q1 {left:0;} li#q2 {left:150px;} li#q3 {left:300px;} li#q4 {left:450px;border-right:none;} /* ul li ul */ #q-graph ul {list-style:none;} /* ul li ul li */ li.bar { width:34px; color:#fff; } li.north { left:36px; background:#ddd url(/UploadFiles/20090921/20090921083857776.gif) no-repeat 0 0; } li.south { left:80px; background:#ddd url(/UploadFiles/20090921/20090921083857776.gif) no-repeat -34px 0; } /* ul li divs */ li#ticks { left:0; height:300px; width:100%; z-index:1; } div.ticks { position:relative; height:60px; border-top:1px dotted #41a3e2; } div.ticks:first-child {border-top:none;} /*only4 Firefx IE 7+*/ div.ticks p { position:absolute; left:101%; top:-2px; color:#f00; font-weight:bold; } </style> </head> <body> <ul id="q-graph"> <li id="q1" class="qtr">Q1 <ul> <li class="north bar">20</li> <li class="south bar">40</li> </ul></li> <li id="q2" class="qtr">Q2 <ul> <li class="north bar">30</li> <li class="south bar">11</li> </ul></li> <li id="q3" class="qtr">Q3 <ul> <li class="north bar">40</li> <li class="south bar">29</li> </ul></li> <li id="q4" class="qtr">Q4 <ul> <li class="north bar"></li> <li class="south bar">0</li> </ul></li> <li id="ticks"> <div class="ticks"><p>50</p></div> <div class="ticks"><p>40</p></div> <div class="ticks"><p>30</p></div> <div class="ticks"><p>20</p></div> <div class="ticks"><p>10</p></div></li> </ul> <script> function qt(tid,qid){ var Hs=document.getElementById(tid).offsetHeight-5 var oObj=document.getElementById(qid).childNodes,k=oObj.length; for (var oi=0;oi<k-1;oi++){ var obj=oObj[oi].getElementsByTagName("li"),j=obj.length for (var i=0;i<j;i++){ if (obj[i].innerHTML!="" && parseInt(obj[i].innerHTML)>=0) obj[i].style.height=Hs*parseInt(obj[i].innerHTML)/50+oi+1 else obj[i].style.display="none" } } } onload=function(){qt("ticks","q-graph")} </script> </body> </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> 基于CSS的柱状图实现——Dudo博客 </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> body {padding:0;margin:40px;font-size:9pt;font-family:Helvetica,Geneva,sans-serif;} h3 {font-weight:normal;display:block;width:600px;text-align:center;} /*ul*/ ul#q-graph { border:2px solid #0063be; background:#ffc; background:#ffc repeat-x scroll 0 0; height:300px !important; height:304px; width:600px; position:relative; list-style:none; margin:1.1em 1em 3.5em; padding:0; } #q-graph li { position:absolute; text-align:center; bottom:0; padding:0 margin:0; } /* ul li */ li.qtr { width:150px; height:300px; border-right:1px dotted #41a3e2; z-index:2; } li#q1 {left:0;} li#q2 {left:150px;} li#q3 {left:300px;} li#q4 {left:450px;border-right:none;} /* ul li ul */ #q-graph ul {list-style:none;} /* ul li ul li */ li.bar { width:34px; color:#fff; } li.north { left:36px; background:#ddd url(/UploadFiles/20090921/20090921083857776.gif) no-repeat 0 0; } li.south { left:80px; background:#ddd url(/UploadFiles/20090921/20090921083857776.gif) no-repeat -34px 0; } /* ul li divs */ li#ticks { left:0; height:300px; width:100%; z-index:1; } div.ticks { position:relative; height:60px; border-top:1px dotted #41a3e2; } div.ticks:first-child {border-top:none;} /*only4 Firefx IE 7+*/ div.ticks p { position:absolute; left:101%; top:-2px; color:#f00; font-weight:bold; } </style> </head> <body> <ul id="q-graph"> <li id="q1" class="qtr">Q1 <ul> <li class="north bar">20</li> <li class="south bar">10</li> </ul></li> <li id="q2" class="qtr">Q2 <ul> <li class="north bar">30</li> <li class="south bar">11</li> </ul></li> <li id="q3" class="qtr">Q3 <ul> <li class="north bar">46</li> <li class="south bar">29</li> </ul></li> <li id="q4" class="qtr">Q4 <ul> <li class="north bar"></li> <li class="south bar">0</li> </ul></li> <li id="ticks"> <div class="ticks"><p>50</p></div> <div class="ticks"><p>40</p></div> <div class="ticks"><p>46</p></div> <div class="ticks"><p>20</p></div> <div class="ticks"><p>10</p></div></li> </ul> <script> function qt(tid,qid){ var Hs=document.getElementById(tid).offsetHeight-5 var oObj=document.getElementById(qid).getElementsByTagName("ul"),k=oObj.length; for (var oi=0;oi<k;oi++){ var obj=oObj[oi].getElementsByTagName("li"),j=obj.length; for (var i=0;i<j;i++){ if (obj[i].innerHTML!="" && parseInt(obj[i].innerHTML)>=0) obj[i].style.height=Hs*parseInt(obj[i].innerHTML)/50+oi+1 else obj[i].style.display="none" } } } onload=function(){qt("ticks","q-graph")} </script> </body> </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> 基于CSS的柱状图实现——Dudo博客 </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> body {padding:0;margin:40px;font-size:9pt;font-family:Helvetica,Geneva,sans-serif;} h3 {font-weight:normal;display:block;width:600px;text-align:center;} /*ul*/ ul#q-graph { border:2px solid #0063be; background:#ffc; background:#ffc repeat-x scroll 0 0; height:300px !important; height:304px; width:600px; position:relative; list-style:none; margin:1.1em 1em 3.5em; padding:0; } #q-graph li { position:absolute; text-align:center; bottom:0; padding:0 margin:0; } /* ul li */ li.qtr { width:150px; height:300px; border-right:1px dotted #41a3e2; z-index:2; } li#q1 {left:0;} li#q2 {left:150px;} li#q3 {left:300px;} li#q4 {left:450px;border-right:none;} /* ul li ul */ #q-graph ul {list-style:none;} /* ul li ul li */ li.bar { width:34px; color:#fff; } li.north { left:36px; background:#ddd url(/UploadFiles/20090921/20090921083857776.gif) no-repeat 0 0; } li.south { left:80px; background:#ddd url(/UploadFiles/20090921/20090921083857776.gif) no-repeat -34px 0; } /* ul li divs */ li#ticks { left:0; height:300px; width:100%; z-index:1; } div.ticks { position:relative; height:60px; border-top:1px dotted #41a3e2; } div.ticks:first-child {border-top:none;} /*only4 Firefx IE 7+*/ div.ticks p { position:absolute; left:101%; top:-2px; color:#f00; font-weight:bold; } </style> </head> <body> <ul id="q-graph"> <li id="q1" class="qtr">Q1 <ul> <li class="north bar">20</li> <li class="south bar">10</li> </ul></li> <li id="q2" class="qtr">Q2 <ul> <li class="north bar">30</li> <li class="south bar">11</li> </ul></li> <li id="q3" class="qtr">Q3 <ul> <li class="north bar">40</li> <li class="south bar">29</li> </ul></li> <li id="q4" class="qtr">Q4 <ul> <li class="north bar"></li> <li class="south bar">0</li> </ul></li> <li id="ticks"> <div class="ticks"><p>50</p></div> <div class="ticks"><p>40</p></div> <div class="ticks"><p>30</p></div> <div class="ticks"><p>20</p></div> <div class="ticks"><p>10</p></div></li> </ul> <script> function qt(tid,qid){ var Hs=document.getElementById(tid).offsetHeight-5 var oObj=document.getElementById(qid).getElementsByTagName("li"),k=oObj.length; for (var oi=0;oi<k-1;oi++){ if(oObj[oi].id!=''){ var obj=oObj[oi].getElementsByTagName("li"),j=obj.length for (var i=0;i<j;i++){ if (obj[i].innerHTML!="" && parseInt(obj[i].innerHTML)>=0) {obj[i].style.height=Hs*parseInt(obj[i].innerHTML)/50+oi+1+"px"} else {obj[i].style.display="none"} }} } } onload=function(){qt("ticks","q-graph")} </script> </body> </html>
前一页:
仿taobao效果拼音字母检索功能
后一页:
DIV+CSS做的透明菜单兼容IE、FF等
相关阅读
CSS编写中灵活运行注释的意义
非常不错的DIV+CSS做得菜单,跟JS效果一样,特别酷
商业版增加线路日期报价功能样式选择(增加了3个日期报价效果)
sql server中前缀为PK、UK、DF、CK、FK表的意思
ASP读取ACCSS数据代码
静态生成
背景调色板:状态栏还能显示颜色值
乱涂
更多信息>>
栏目类别选择
百度小程序开发
微信小程序开发
微信公众号开发
uni-app
asp函数库
ASP
DIV+CSS
HTML
python
更多>>
同类信息
jquery设置或获取修改classname
利用css3.0写出一个音乐播放的唱片碟盘的效果
利用css中的scale()实现放大缩小效果
利用background-color:#000000a8在背景颜色16进制代码之后加字母加上数字让背景色透明
css背景使用base64编码或者将base64编码放在img图片标签中
利用css3中的-webkit-font-smoothing把网页文字的毛边去掉
更多>>
最新添加文章
dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT
Android移动端自动化测试:使用UIAutomatorViewer与Selenium定位元素
抖音直播音挂载小雪花 懂车帝小程序
javascript获取浏览器指纹可以用来做投票
火狐Mozilla Firefox出现:无法载入您的Firefox配置文件 它可能已经丢失 或是无法访问 问题解决集合处理办法
在Android、iOS、Windows、MacOS中微信小程序的文件存放路径
python通过代码修改pip下载源让下载库飞起
python里面requests.post返回的res.text还有其它的吗
更多>>
随机抽取信息
专业地接服务的旅行社建站解决方案
深山旅行社网站管理系统 v1.8
从空格谈起--关于CSS模块化设计
ASP.NET常用的三十三种实用代码(中)
复制信息给好友代码
五个简单措施增强IIS安全性
更多标签
热门标签
vista
计算
邮箱
2.0
蓝色理想
设计
动态
教程
列
做标
iis 安装
onmouserout
mop
word-spacing
左 右 全 input
onblur
二级
日期
flash
九宫格
省略
右键
类别
高亮
时间
长
全选
显示
翻转
策划
日历
左 右
window
预览
exe
pr
getElementById
兼容
特效
iframe
Dreamweaver
键盘
对联
美化
面板
柱状
思考
cpu
等高
优化
免责声明:本站所有资料信息,有部分为本人原创,部分为从网络收集而来,仅供网友查看阅读所用,所有信息版权归信息所有人或所有公司所有
如果信息内容侵犯到您的版权或权益请与我们联系,经确认后我们会立即移除相关内容或链接
Copyright © 2007-2026
深山工作室
All Rights Reserved
服务QQ:
565449214
手机:
13961347334
ICP备案:
苏ICP备15019627号
苏公网安备 32070502010230号