html静态进度条代码
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Static Progress Bar</title>
<style>
.progress-container {
width: 300px;
height: 30px;
border: 1px solid #ccc;
position: relative;
}
.progress-bar {
width: 0%;
height: 100%;
background-color: #4CAF50;
}
.progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #000;
}
</style>
</head>
<body>
<div class="progress-container">
<div class="progress-bar" style="width: 50%;"></div>
<div class="progress-text">50%</div>
</div>
</body>
</html>
这个代码创建了一个静态进度条，其进度是通过调整 .progress-bar 元素的宽度来表示的。你可以调整 .progress-bar 元素的宽度百分比，以改变进度条的进度。
这个 HTML 静态进度条代码示例中包含了
<div class="progress-container">：进度条容器，用于包裹进度条和进度文本。
<div class="progress-bar">：实际的进度条元素，它的宽度会根据进度的百分比进行调整。
<div class="progress-text">：显示进度文本的元素，用于显示当前进度的百分比。
CSS 样式定义了进度条容器的样式、进度条的样式、以及进度文本的样式。
