HTML에서 정적 진행률 표시줄을 만드는 방법은 무엇입니까? (예)
- 藏色散人원래의
- 2018-08-14 15:48:566156검색
이 글에서는 주로 HTML 정적 진행률 표시줄을 구현하는 방법을 소개합니다. 이는 HTML과 CSS 코드를 결합하여 달성할 수 있으며, 이는 작동이 매우 쉽습니다.
HTML 진행률 바코드 예시는 다음과 같습니다.
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>html静态进度条示例</title>
<meta charset="UTF-8">
<style type="text/css">
.mask{
position:absolute;
left:0px;
top:0px;
height:100%;
width:100%;
background-color: #eee;
}
.out{
margin:auto;
margin-top:20%;
text-align:center;
height:30px;
width:500px;
background-color: #fff;
border:1px solid #000;
position:relative;
}
.in{
position:absolute;
left:0px;
top:0px;
height:30px;
width:250px;
background-color: #ddd;
}
.num{
position:absolute;
left:0px;
top:0px;
height:30px;
line-height:30px;
width:500px;
text-align:center;
position:relative;
}
</style>
</head>
<body>
<div class="mask">
<div class="out">
<div class="in"></div>
<div class="num">50%</div>
</div>
</div>
</body>
</html>위 코드의 웹 페이지 표시 효과는 다음과 같습니다.
그림과 같이 페이지에 정적 진행률 표시줄이 있습니다. 50% 진행률을 표시합니다. html 정적 진행 표시줄이므로 해당 스타일만 변경되면 html 진행 표시줄의 속도 변경, 즉 숫자 변경도 가능합니다. 여기서의 원리는 실제로 div를 두 부분으로 나누는 것입니다. 하나는 진행 금액을 나타내는 어두운 부분이고, 다른 하나는 남은 금액을 나타내는 빈 부분입니다. 그런 다음 주로 진행 부분의 스타일, 즉 색상 너비를 구분하여 설정합니다.
위의 코드 예제를 통해 HTML 정적 진행률 표시줄 생성에 대해 어느 정도 이해가 되셨나요? 이 글이 도움이 필요한 친구들에게 도움이 되기를 바랍니다.
위 내용은 HTML에서 정적 진행률 표시줄을 만드는 방법은 무엇입니까? (예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.