<h1>进度条</h1>

​

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

* {box-sizing: border-box}

​

.container {

  width: 100%;

  background-color: #ddd;

}

​

.skills {

  text-align: right;

  padding-right: 20px;

  line-height: 40px;

  color: white;

}

​

.html {width: 90%; background-color: #4CAF50;}

.css {width: 80%; background-color: #2196F3;}

.js {width: 65%; background-color: #f44336;}

.php {width: 60%; background-color: #808080;}