您的位置: 首页 > 软件教程 > CSS百分比进度条设计方法

CSS百分比进度条设计方法

7.7分
出处:45it 时间:2013-01-23

您可能感兴趣的话题: CSS  

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

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

  效果图:

CSS百分比进度条设计方法

  

  代码:

  <style>

  #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;}

  </style>

  <div id="graphbox">

   <h2>BarGraphs Example</h2>

   <div class="graph"><span class="orange" style="width:35%;">orange:35%</span></div>

   <div class="graph"><span class="green" style="width:90%;">green:90%</span></div>

   <div class="graph"><span class="blue" style="width:75%;">blue:75%</span></div>

   <div class="graph"><span class="red" style="width:85%;">red:85%</span></div>

网友评论
多特网友 2014-05-08 20:53:31 回复
没效果啊啊啊
多特网友 2013-10-15 11:26:51 回复
无效d额~~~
多特网友 2013-04-09 11:37:24 回复
写在span里的文字显示不全啊
多特网友 2013-04-09 11:37:24 回复
写在span里的文字显示不全啊
多特网友 2014-05-08 20:53:31 回复
没效果啊啊啊
多特网友 2013-10-15 11:26:51 回复
无效d额~~~

精品软件课程
更多 >
photoshop教程让你从入门到精通,从新... [详细]
快播播放器(Qvod Player)是一款基... [详细]
Word是由Microsoft公司出版的文字... [详细]
《植物大战僵尸》是一款极富策略性的小游戏,可... [详细]
Excel是office的重要组成部分。多特... [详细]