切图论坛

 找回密码
 立即注册
网站建设网站切图广告位招租
查看: 1106|回复: 0

CSS百分比进度条设计方法

[复制链接]

主题

听众

8057

积分

管理员

发表于 2015-10-3 23:52:43 |显示全部楼层

  如今在制作网页中我们常常会使用css样式来设计页面效果,今天为大家介绍一下CSS百分比进度条设计方法。

  效果图:

CSS百分比进度条设计方法

  

  代码:

  

  #graphbox{

  border:1px solid #e7e7e7;

  padding:10px;

  width:250px;

  background-color:#f8f8f8;

  margin:5px 0;

  }

  #graphbox h2{

  color:#666666;

  font-family:Arial;

  font-size:18px;

  font-weight:700;

  }

  .graph{

  position:relative;

  background-color:#F0EFEF;

  border:1px solid #cccccc;

  padding:2px;

  font-size:13px;

  font-weight:700;

  }

  .graph .orange, .green, .blue, .red, .black{

  position:relative;

  text-align:left;

  color:#ffffff;

  height:18px;

  line-height:18px;

  font-family:Arial;

  display:block;

  }

  .graph .orange{background-color:#ff6600;}

  .graph .green{background-color:#66CC33;}

  .graph .blue{background-color:#3399CC;}

  .graph .red{background-color:red;}

  .graph .black{background-color:#555;}

  

  

   

BarGraphs Example

   

orange:35%

   

green:90%

   

blue:75%

   

red:85%

   

black:100%

  

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表