这个进度条怎么做？线形进度条，如图所示

firefox中运行结果：
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>进度条</title><style>body{ margin:10px; padding:0; font-size:12px;}.text{ width:200px; }.text span:nth-child(1){ color:#cfa130; }.text span:nth-child(2){ margin-left:65px; color:#cfa130;}.text span:nth-child(3){ color:#b5b5b5; float:right;}.graph span:nth-child(1){ width:100px; height:11px; display:inline-block; border-left:1px solid #cfa130; }.graph span:nth-child(1) div{ background:#cfa130; height:2px; margin-top:4px;} .graph span:nth-child(2){ width:100px; height:11px; display:inline-block; border-left:1px solid #cfa130; border-right:1px solid #dbdbdb;}.graph span:nth-child(2) div{ background:#dbdbdb; height:2px; margin-top:4px; }</style></head><div class="text"> <span>0天</span> <span>20天</span> <span>40天</span></div><div class="graph"> <span><div></div></span><span><div></div></span></div><div class="text"> <span>0天</span> <span>20天</span> <span>40天</span></div><div class="graph"> <span><div></div></span><span><div></div></span></div><div class="text"> <span>0天</span> <span>20天</span> <span>40天</span></div><div class="graph"> <span><div></div></span><span><div></div></span></div><body><script src="js/jquery-1.8.3.min.js"></script><script></script></body></html>

文章标签：

来自：进度条是什么意思

本文链接：https://www.u1e.cn/baike/a/98af7b1dd6a3c72d1f397427 [复制]