制作静态的进度条效果

你可以使用HTML和CSS来制作一个简单的静态进度条。下面是一个示例代码：

<div class="progress-bar">
  <div class="progress"></div>
</div>

.progress-bar{
  width: 300px;
  height: 20px;
  background-color: #f2f2f2;
  border-radius: 10px;
  margin: 20px auto;
  position: relative;
}

.progress{
  height: 100%;
  background-color: #4CAF50;
  border-radius: 10px;
  position: absolute;
  left: 0;
  top: 0;
  width: 50%; /* 这里可以修改进度条的进度 */
}

在这个例子中，我们创建了一个父元素 `.progress-bar` 和一个子元素 `.progress`。父元素设置了进度条的宽度、高度、背景颜色和圆角。

子元素 `.progress` 设置了进度条的高度、背景颜色和圆角，以及使用 `position` 属性使其相对于父元素进行定位。通过修改 `.progress` 的宽度来控制进度条的进度。

你可以根据需要更改进度条的样式，例如，可以添加动画效果或使用不同的颜色来表示不同的状态。