进度progress – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>progress</title> <link href="http://cdn.bootcss.com/meyer-reset/2.0/reset.css" rel="stylesheet"> <style type="text/css"> /*common*/ a{text-decoration: none;} .fl{float: left;} .fr{float: right;} /*style*/ dl.m-progress { width: 216px; font-size: 12px; overflow: hidden; } dl.m-progress dt { width: 216px; height: 6px; } dl.m-progress dt b { height: 6px; } .m-progress dd span { height: 36px; color: #bbb!important; line-height: 16px; } .m-progress dd span.orange { width: 33%; } .m-progress dd span.gray6 { width: 34%; text-align: center; } .m-progress dd span.blue { width: 33%; text-align: right; } .m-progress dd span em { display: block; font-size: 14px; } .m-progress dd span.orange em { color: #f60; } .m-progress dd span.gray6 em { color: #666; } .m-progress dd span.blue em { color: #2af; } .g-progress { height: 48px; margin: 0 auto; overflow: hidden; } dl.m-progress dt { background: #ddd; margin-bottom: 5px; overflow: hidden; } dl.m-progress dt b { display: block; filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ff934b',endColorStr='#ff6601',gradientType='1'); background: -moz-linear-gradient(0deg,#ff934b,#ff6601); background: -webkit-gradient(linear,0% 0,100% 0,from(#ff934b),to(#ff6601)); background: -ms-linear-gradient(left,#ff934b 0,#ff6601 100%); background: -o-linear-gradient(0deg,#ff934b,#ff6601); } dl.m-progress dd { font-size: 12px; } dl.m-progress dd span { height: 36px; color: #bbb!important; line-height: 16px; } dl.m-progress dd span.orange { width: 33%; } dl.m-progress dd span.gray6 { width: 34%; text-align: center; } dl.m-progress dd span.blue { width: 33%; text-align: right; } dl.m-progress dd span em { display: block; font-size: 14px; } dl.m-progress dd span.orange em { color: #f60; } dl.m-progress dd span.gray6 em { color: #666; } dl.m-progress dd span.blue em { color: #2af; } </style> </head> <body> <dl class="m-progress"><dt title="已完成10.24%"><b style="width:10.24%;"></b></dt><dd><span class="orange fl"><em>819</em>已参与</span><span class="gray6 fl"><em>7999</em>总需人次</span><span class="blue fr"><em>7180</em>剩余</span></dd></dl> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 进度progress