本章教程,介绍如何使用html+css实现静态进度条。

目录

1、HTML代码

2、CSS代码

3、效果展示


1、HTML代码

<div class="progress-bar">
  <div class="progress" style="width:35%;"></div>
</div>

2、CSS代码

.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #ddd;
}

.progress {
  height: 100%;
  background-color: green;
}

3、效果展示

HTML+CSS实现静态进度条_前端