이번에는 CSS3를 사용하여 진행률 표시줄을 만드는 방법을 소개하겠습니다. CSS3를 사용하여 진행률 표시줄을 만들 때 Notes가 무엇인지 살펴보겠습니다.
이것은 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>
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 주목해 주세요. PHP 중국어 웹사이트의 다른 관련 기사를 확인해보세요!
추천 도서:
위 내용은 CSS3를 사용하여 진행률 표시줄 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!