HTML에서 정적 진행률 표시줄을 만드는 방법은 무엇입니까? (예)-HTML 튜토리얼-php.cn

HTML에서 정적 진행률 표시줄을 만드는 방법은 무엇입니까? (예)

藏色散人

풀어 주다： 2018-08-14 15:48:56

원래의

6165명이 탐색했습니다.

이 글에서는 주로 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>

로그인 후 복사

위 코드의 웹 페이지 표시 효과는 다음과 같습니다.

HTML에서 정적 진행률 표시줄을 만드는 방법은 무엇입니까? (예)

그림과 같이 페이지에 정적 진행률 표시줄이 있습니다. 50% 진행률을 표시합니다. html 정적 진행 표시줄이므로 해당 스타일만 변경되면 html 진행 표시줄의 속도 변경, 즉 숫자 변경도 가능합니다. 여기서의 원리는 실제로 div를 두 부분으로 나누는 것입니다. 하나는 진행 금액을 나타내는 어두운 부분이고, 다른 하나는 남은 금액을 나타내는 빈 부분입니다. 그런 다음 주로 진행 부분의 스타일, 즉 색상 너비를 구분하여 설정합니다.

위의 코드 예제를 통해 HTML 정적 진행률 표시줄 생성에 대해 어느 정도 이해가 되셨나요? 이 글이 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

위 내용은 HTML에서 정적 진행률 표시줄을 만드는 방법은 무엇입니까? (예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!