지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > 본문

CSS3를 사용하여 진행률 표시줄을 만드는 방법에 대한 간단한 샘플 코드

黄舟
풀어 주다： 2017-05-26 13:06:13
원래의
1190명이 탐색했습니다.

이 글은 CSS3를 사용하여 간단한 진행률 표시줄(데모)을 만드는 데 필요한 정보를 주로 소개합니다. 필요한 친구는

을 참조하세요. CSS3로 작성된 사용자 친화적인 진행 표시줄.

사진과 같습니다:

CSS3를 사용하여 진행률 표시줄을 만드는 방법에 대한 간단한 샘플 코드

구체 코드는 다음과 같습니다. 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"   />
<meta name="viewport" content="initial-scale=1">
<style>
.process-bar
{
    width:100px;
    display:inline-block;
    *zoom:1;
}
.pb-wrapper
{
    border:1px solid #cfd0d2;
    position:relative;
    background:#cfd0d2;
    border-radius: 8px;
}
.pb-container
{
    height:12px;
    position:relative;
    left:-1px;
    margin-right:-2px;
    font:1px/0 arial;
    padding:1px;
}
.pb-highlight
{
    position:absolute;
    left:0;
    top:0;
    _top:1px;
    width:100%;
    opacity:0.6;
    filter:alpha(opacity=60);
    height:6px;
    background:white;
    font-size:1px;
    line-height:0;
    z-index:1
}
.pb-text
{
    width:100%;
    position:absolute;
    left:0;
    top:0;
    text-align:center;
    font:10px/12px arial;
    color:black;
    font:10px/12px arial
}
</style>
</head>
<body>
    <p class="process-bar skin-green">
        <p class="pb-wrapper">
            <p class="pb-highlight"></p>
            <p class="pb-container">
                <p class="pb-text">50%</p>
                <p class="pb-value" style="height: 100%;width: 50%;background: #19d73d;border-radius: 8px;"></p>
            </p>
        </p>
    </p>
</body>
</html>
로그인 후 복사

위 내용은 CSS3를 사용하여 진행률 표시줄을 만드는 방법에 대한 간단한 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
CSS3，进度条
원천：php.cn
이전 기사：CSS를 사용하여 파이 모양의 로딩 대기 차트 효과를 얻는 방법(그림) 다음 기사：순수 CSS를 사용하여 적응형 사각형을 구현하는 사례에 대한 자세한 소개
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
VueJS 스케줄링 기능의 실행 순서로 인해 문제가 발생함 공지 사항 목록(API에서 검색)을 페이지에 표시하려고 합니다. 저는 Vuex 스토어를 사용하고 있으며 Announcements라는 상태가 있습니다. 또한 사용자...
에서 2024-04-06 10:37:58
0
1
385
수직으로 회전된 표 제목, 중앙 + 하단 정렬, 브라우저 간 Chrome에서는 예상대로 보이지만 Firefox에서는 그렇지 않은 회전된 헤더가 있는 테이블이 있습니다. Chromev108(수직 하단, 수평 중간) ✅Fire...
에서 2024-04-04 16:45:25
0
1
330
여러 테이블에서 데이터를 가져올 때 SQL 그룹화에서 테이블의 항목을 기반으로 쿼리하는 방법 두 개의 테이블이 있습니다. 2.ride click table id | time ride table id | timestamp 두 테이블 모두 GROUPBYEXT...
에서 2024-04-04 08:58:17
0
1
319
적용 방법 사용 배열의 최대값을 찾는 간단한 방법은 Math.max.apply(null,myArray)입니다. 그러나 myArray에 복소수가 포함되어 있고 각 복소수에 복소수의...
에서 2024-04-03 21:41:46
0
2
278
div를 사용하지 않고 같은 줄에 여러 범위 클래스를 가질 수 있습니까? 각 텍스트마다 다른 색상을 갖기를 원했기 때문에 여러 범위 클래스를 사용하여 CSS에서 색상을 설정했습니다. 또한 텍스트에 줄 바꿈이 있기를 원했기 때문에 div...
에서 2024-04-03 11:17:18
0
1
360
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿