信息统计CSS控制百分比

用CSS和html简单实现的百分比,仅供参考。

<style>
dd {
margin:0;
display:block;
width:400px;
height:2em;
background:#0a0;
border-bottom:1px solid #fff;
font-size:12px;
}
dd b {
float:right;
display:block;
margin-left:auto;
background:#cec;
height:2em;
line-height:2em;
text-align:right;
font-size:12px;
}
dd.p670 b {width:33%;}
dd.p67 b {width:93.3%;}
dd.p12 b {width:98.8%;}
dd.p197 b {width:80.3%;}
dd.p26 b {width:97.3%;}
dd.p08 b {width:99.2%;}
</style>
<dd><b>IE.6 = 67% </b></dd>
<dd><b>IE.5 = 6.7% </b></dd>
<dd><b>Opera = 1.2% </b></dd>
<dd><b>Firefox = 19.7% </b></dd>
<dd><b>Mozilla = 2.6% </b></dd>
<dd><b>NN7 = 0.8% </b></dd>

DEMO:

<ol>
<!--{loop $_G['setting']['forumnnn'] $k $nav11}-->
<li><em>
<!--{$nav11[i]}--></em><a href="forum.php?mod=forumdisplay&fid=<!--{$nav11[fid]}-->"><!--{$nav11[name]}--></a><i><!--{$nav11[todayposts]}--></i>

//判断自己的数值是不是0,则给他一个默认的百分比
<!--{if $nav11[todayposts] <= 0}-->

<span style="width:70px; height:6px;background:#FF66CC; padding-bottom:3px; float:right;"><b style="background:#ffffff; padding-bottom:3px; height:6px;margin-left:auto; float:right; width:98%">&nbsp;</b></span>
<!--{else}-->

//{eval echo 100 - ((($nav11[todayposts])/$nav11[num])*100)}%"> 运算公式

<span style="width:70px; height:6px;background:#FF66CC; padding-bottom:3px; float:right;"><b style="background:#ffffff; padding-bottom:3px; height:6px;margin-left:auto; float:right; width:{eval echo 100 - ((($nav11[todayposts])/$nav11[num])*100)}%">&nbsp;</b>

</span>
<!--{/if}-->
</li>
<!--{/loop}-->
</ol>

Leave a Reply

(will not be published)