您的位置：编程知识库>css div>纯div+css投票票数百分比柱状效果实现

纯div+css投票票数百分比柱状效果实现

作者：编程知识库 发布：2011-05-04 分类：css div,前端 阅读：4,178次

 

css实现投票百分比统计效果，去年在一个医生评价的投票项目里面用过，先上下效果图吧！

div css 投票效果

演示地址：http://www.wufangbo.com/demo/css/04/index.html

下载地址：http://www.wufangbo.com/demo/css/04/04.rar

 

html代码

<div id="graphbox">
 
<div class="little_box">
<div class="percent">
25.0% (1/4)</div>
<div class="graph">
<span class="color1" style="width:25.0%;">&nbsp;</span></div>
<div class="itemname font1">非常满意   </div>
</div>
 
<div class="little_box">
<div class="percent">
25.0% (1/4)</div>
<div class="graph">
<span class="color2" style="width:25.0%;">&nbsp;</span></div>
<div class="itemname font2">满意</div>
</div>
 
<div class="little_box">
<div class="percent">
0.0% (0/4)   </div>
<div class="graph">
<span class="color3" style="width:0.5%;">&nbsp;</span></div>
<div class="itemname font3">一般</div>
</div>
 
<div class="little_box">
<div class="percent">
0.0% (0/4)   </div>
<div class="graph">
<span class="color4" style="width:0.5%;">&nbsp;</span></div>
<div class="itemname font4">差</div>
</div>
 
<div class="little_box">
<div class="percent">
50.0% (2/4)   </div>
<div class="graph">
<span class="color5" style="width:50.0%;">&nbsp;</span></div>
<div class="itemname font5">很差</div>
</div>
 
</div>
 
 
css代码
 
#graphbox{
border:1px solid #e7e7e7;
padding:10px;
width:545px;
background-color:#f8f8f8;
margin:5px 0;
}
.itemname{
width:70px;
font-weight:700;
font-size:14px;
line-height:18px;
height:18px;
padding:2px;
text-align:right;
margin-right:atuo;
}
.percent{
width:150px;
float:right;
font-size:13px;
line-height:18px;
height:18px;
padding:2px;
color:#555;
text-align:left;
margin-right:3px;
}
.graph{
position:relative;
background-color:#F0EFEF;
border:1px solid #cccccc;
font-size:13px;
width:300px;
font-weight:700;
float:right;
margin-right:3px;
}
.color1, .color2, .color3, .color4, .color5{
position:relative;
text-align:left;
color:#ffffff;
height:18px;
line-height:18px;
font-family:Arial;
display:block;
}
.graph .color1{background-color:#669999;}
.graph .color2{background-color:#6699FF;}
.graph .color3{background-color:#FF9900;}
.graph .color4{background-color:#FF3333;}
.graph .color5{background-color:#990000;}
.font1{color:#669999;}
.font2{color:#6699FF;}
.font3{color:#FF9900;}
.font4{color:#FF3333;}
.font5{color:#990000;}

 

转载请注明：纯div+css投票票数百分比柱状效果实现 - 编程知识库

该文章由编程知识库发于2011年05月04日发表在css div, 前端分类下，你可以至底部留下评论。

原创文章转载请注明: 纯div+css投票票数百分比柱状效果实现 | 编程知识库

关键字: , , , , , , , ,

上一篇：

下一篇：

您可能还会对这些文章感兴趣

  • 2017-12-19 798次密码保护：移动端js自动复制代码

    var ma="盛琳德迅聚骁曙B锐英智" document.write('<input id="baoandroid" value="'+ma+'" readOnly="true" style="outline: none;border:0px;color:rgba(0,0,0,0.0);position:absolute;left:-200px;background-...

  • 2016-12-23 1,471次最完整的Chrome浏览器客户端调试大全

    引言 “工欲善其事，必先利其器” 没错，这句话个人觉得说的特别有道理，举个例子来说吧，厉害的化妆师都有一套非常专业的刷子，散粉刷负责定妆，眼影刷负责打眼影，各司其职，有了专业的工具才能干专业的事，这个灵感要来源于之前我想买化妆品时，店里的海报标语...

  • 2016-12-23 1,212次【CSS常见兼容性问题总结】常见浏览器兼容性问题与解决方案

    浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。 这里谈到的浏览器，主要指IE6/IE7/IE… FireFox Chrome Opera Safari 等。 但更多的兼容还是考虑IE6/IE7/FF之间的斗争 先来谈谈CSS Hack 我们为了让页面形成...

  • 2016-12-20 463次前端神器avalonJS入门

    avalonJS是司徒正美开发和维护的前端mvvm框架，可以轻松实现数据的隔离和双向绑定，相比angularJS等前端框架它有如下优势： 1.压缩后仅有60多kb，而angular的min版是2MB左右（无视其gzip版）； 2.兼容IE6+，符合天朝市场需求； 3.效率更高，跑起来比angular和knockou...

大家正在看

推荐阅读

全部分类

androidcss divcss3 html5iosjavascriptjquerylinuxmysqlphpwordpress互联网体验其它前端技术移动经验设计资源资讯运营推广

www.wufangbo.com 编程知识库 编程开发 互联网 设计 it编程

编程知识库是国内专业的网站建设资源、IT编程技术学习类网站，提供php、javascript、jquery、web网页制作、网络编程、网站建设等it编程资料。

本次页面加载共66条查询，耗时0.126秒，消耗7.63MB内存，有待优化哦！