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

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

作者：编程知识库 发布：2011-05-04 分类：Css Html,前端 阅读：3,827次

 

css实现投票百分比统纯div+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投票票数百分比柱状效果实现

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

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

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

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

上一篇：

下一篇：

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

  • 雷军22年前写的代码,雷军20年前编写的汇编代码
    雷军22年前写的程序代码 保准你没见过！

    作为小米科技的创始人、董事长和首席执行官，雷军的名字如雷贯耳。上午W3Cschool发布了一篇“刘强东的代码水平如何”(有兴趣的可以点击右上角关注我们)的文章，有网友在下面回复“代码只服雷军”。这个回复吸引了W3Cschool的注...

  • 只会用jQuery前端到底low不low?

    如果你之前没有看过我的《前端工程师如何月薪过4万》这里建议大家仔细读读一下，因为里面有整个前端工程师成长的技术路线图和我的故事。同时很多小伙伴问我的学历后来没再考考么，我是考了成考的北京航空航天大学，也马上快...

  • UED原型设计工具Axure汉化版
    UED原型设计工具Axure汉化版

    Axure汉化版已经发布，版本号Axure 5.1.0.1699，下面是截图效果 Axure汉化版文件下载地址：Axure汉化补丁 Axure RP pro 5.1.0.1699 下载地址注册用户名：Axure 序列...

  • 百度公共DNS无劫持IP 180.76.76.76，从此上网无阻
    百度公共DNS无劫持IP 从此上网无阻

    今天百度推出公共DNS服务，IP地址为180.76.76.76，号称拥有遍布全国的递归出口节点，可以做到更稳定，纯净无劫持等。 DNS在现有整个互联网基础架构中也扮演着流量”调度员”、”指引员”的角色。尽管已经有超过30年历史,DNS仍...

  • 小伙打造网站媒体帝国 Dose.com和OMGFacts.com月访问量4500万
    小伙打造网站媒体帝国月访问量4500万

    　　BI中文站 6月7日报道 艾默生·斯帕茨(Emerson Spartz)今年28岁，已婚，是Spartz Inc公司的首席执行官。Spartz Inc是一个网站媒体帝国，旗下的30多家网站专门发布有趣、励志和让人感到不可思议的文章和帖子，其分享量非常...

大家正在看

推荐阅读

全部分类

.NetAndroidCss HtmlCss3 Html5IosJavaJavascriptJqueryLinuxMacOSMysqlPhpPythonWindowsWordpress互联网体验其它前端技术移动经验编程开发设计资源资讯运营推广

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

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

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