프런트 엔드 프레임 워크를 사용하여 css에서 플레이어 스코어 카드 만들기

Question

유성우 앱의 플레이어에 대한 다양한 속성을 보여주는 플레이어 카드 유형 페이지를 만들려고합니다. 내가 고민하고있는 것은 웹 구성 요소와 CSS를 찾아서 이런 식으로 만들 수있게하는 것이다.

나는 Materialize.css 프레임 워크를 사용하지만,

<div class="progress"> 
    <div class="determinate" style="width: 70%"></div> 
</div> 

이에 어떤 도움을 이해할 수있을 것이다 단지 등급 막대를 만들 수있는 프리 로더 클래스 (등 강도)에 생각하고 있어요!

Answer 1

주요 문제를 가정하면 진행률 표시 줄입니다, 이것은 당신이 시작 얻어야한다 : 당신은 당신이 제안보기의 테이블에 그것을 넣어 수

https://jsfiddle.net/L23kwohq/

.

CSS

.progress { 
    height: 2.6em; 
    background-color: white; 
} 
.progress .determinate { 
    background-color: lightblue; 
} 
.amount { 
    font-size: 2em; 
    padding-left: 80px; 
    // Whatever other styles... 
} 

HTML

<div class="progress"> 
    <div class="determinate" style="width: 70%"> 
    <span class="amount">7</span> 
    </div> 
</div>