2017-04-06 19 views
1

我正在嘗試製作一個播放器卡片類型的頁面,顯示有關流星應用程序中球員的各種屬性。我正在努力的是找到Web組件和CSS,這將使我能夠構建這樣的東西?使用前端框架從css創建一個球員記分卡

enter image description here

我現在用的是Materialize.css框架,但認爲只是預加載類創建的收視率吧(強度等)

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

任何幫助,這將不勝感激!

回答

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> 
+0

謝謝!這似乎很簡單!如果在框架中存在更好的方法,我們只是不確定。但是這看起來很完美! – Hightower