简单的bootstrap进度条
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bootstrap百分比进度条</title><link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><style type="text/css"></style></head><body><br /><br /><br /><div class="container"><div class="row"><div class="col-md-offset-3 col-md-6"><h3 class="progress-title">.net</h3><div class="progress"><div class="progress-bar" style="width:70%; background:#97c513;"><div class="progress-value">70%</div></div></div><h3 class="progress-title">java</h3><div class="progress"><div class="progress-bar" style="width:90%; background:#f2545b;"><div class="progress-value">90%</div></div></div><h3 class="progress-title">delphi</h3><div class="progress"><div class="progress-bar" style="width:55%; background:#ffc304;"><div class="progress-value">55%</div></div></div><h3 class="progress-title">php</h3><div class="progress"><div class="progress-bar" style="width:80%; background:#2e9dc2;"><div class="progress-value">80%</div></div></div></div></div></div><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"><p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p></div></body></html>
评论