蒸米饭一碗米几碗水:CSS柱状图的实现

来源：百度文库 编辑：九乡新闻网 时间：2024/04/30 11:42:18
CSS样式#vert{
 width:300px;
 height:200px;
 border:1px solid #d6d7d6;
 background-color:#fff;
 position: relative;
 background:url(graphbg.gif);
}
#vert h1{
 font-size:14px;
 margin:10px;
}
#vert ul li{
 float:left;       
 position: absolute;  
 bottom: 0px;     
 background-color:#333;
 text-align: center;
 font-weight: bold;
 color: #fff;
 line-height: 40px;
 width: 30px;       
}
#vert ul li.blue{left:30px;background:url(bg.jpg);}
#vert ul li.green{left:100px;background:url(bg.jpg) no-repeat -30px 0px;}
#vert ul li.yellow{left:170px;background:url(bg.jpg) no-repeat -60px 0px;}
#vert ul li.red{left:240px;background:url(bg.jpg) no-repeat -90px 0px;}  此图即为bg.jpg  HTML代码 

统计数据


 

       
  • 30

    •    
  • 22

    •    
  • 6

    •    
  • 10

    •  
 效果图 柱状的高度可以通过代码来改变样式中的height属性 
CSS柱状图的实现 21个超赞的CSS实现技术 译言网 | 21个超赞的CSS实现技术 jQuery+CSS实现竖向漂亮的滑动导航 CSS JS实现的选项卡效果(html组件)-网页陶吧-CSS-天极Yesky 使用CSS实现侧边Tab菜单栏1 使用CSS实现侧边Tab菜单栏2 使用CSS实现滑动菜单栏1 CSS+DIV实现鼠标经过背景变色 jQuery+CSS实现动态滑动菜单导航 CSS新手整理的CSS技巧/ css选择器的优先级 CSS实现同一图片左右半边加链接导航 - CSS - web - JavaEye论坛 div+css - Firefox和IE浏览器兼容问题 - 用CSS实现cellSpacing属性效果 CSS布局实例：仅一张图片实现圆角 MAC官方菜单纯CSS实现灰色会换色 五种方法让CSS实现垂直居中 CSS css CSS的倡导者：学习CSS的10大理由 jQuery选择器CSS的用法 优化你的CSS代码~ CSS ID 的命名规范 css中hideFocus的用法