使用前端框架從css創建一個球員記分卡

Question

我正在嘗試製作一個播放器卡片類型的頁面，顯示有關流星應用程序中球員的各種屬性。我正在努力的是找到Web組件和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>