不無聊的前端切版課：第5章──創造一個Skill bar

技能條效果

原理解說

其實只要正確利用CSS的Unit(單位)，也就是%，就可以輕鬆達成囉！

程式碼內容

html的部分

<p>HTML</p>
<div class="container">
  <div class="skills html">90%</div>
</div>

<p>CSS</p>
<div class="container">
  <div class="skills css">80%</div>
</div>

<p>JavaScript</p>
<div class="container">
  <div class="skills js">65%</div>
</div>

<p>PHP</p>
<div class="container">
  <div class="skills php">60%</div>
</div>

CSS的部分

* {box-sizing:border-box}

.container {
  width: 100%; 
  background-color: #ddd; 
}

.skills {
  text-align: right; 
  padding-top: 10px; 
  padding-bottom: 10px; 
  color: white; 
}

.html {width: 90%; background-color: #04AA6D;} 
.css {width: 80%; background-color: #2196F3;} 
.js {width: 65%; background-color: #f44336;} 
.php {width: 60%; background-color: #808080;} 

心得後記

這個看似簡單的東西，最有趣的地方其實是可以使用d3.js來處理！
使用了厲害的工具套件之後，
一切就會有嶄新的面貌哦，期待未來寫一篇(◉３◉)