注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

樱之花

叶散的时候,你明白欢聚;花谢的时候,你明白青春.

 
 
 

日志

 
 
关于我

分类中“我的实验室”是我在日常工作中的一些知识总结,有些写的比较匆忙,可能大家在阅读时会产生困扰,后期有时间我会重新整理编辑,谢谢大家的到访,您们的支持是我前进的动力!

网易考拉推荐

CSS在页面中增加进度  

2013-05-13 12:59:54|  分类: 网络文摘 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

先看做成的效果图:

CSS在页面中增加进度 - yinzhihua2008 - 樱之花 YinZhiHua2008

 HTML代码:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style>
.bgprogress {
 position:relative;
 background-color:#ffe896;
 border:1px solid black;
 width:50px;
 height:14px;
 text-align:left;
}
.bgrate {
 position:absolute;
 left:0;
 top:0;
 width:50px;
 text-align:center;
}
</style>
</head>
<body>
<div>
  <table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
    <tr>
      <th scope="col">NO</th>
      <th scope="col">日期</th>
      <th scope="col">姓名</th>
      <th scope="col">进度</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2013-05-13</td>
      <td>甲</td>
      <td><div class='bgprogress'>
          <div class='bgrate'>11%</div>
          <img src='Images/progress_blue.gif' width='5' height='14' title='2/19' /></div></td>
    </tr>
    <tr>
      <td>2</td>
      <td>2013-05-13</td>
      <td>乙</td>
      <td><div class='bgprogress'>
          <div class='bgrate'>0%</div>
          <img src='Images/progress_blue.gif' width='0' height='14' title='0/20' /></div></td>
    </tr>
    <tr>
      <td>3</td>
      <td>2013-05-13</td>
      <td>丙</td>
      <td><div class='bgprogress'>
          <div class='bgrate'>16%</div>
          <img src='Images/progress_blue.gif' width='8' height='14' title='3/19' /></div></td>
    </tr>
  </table>
</div>
</form>
</body>
</html>


  评论这张
 
阅读(568)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017