Live Code Editor Version 2.0

Hướng dẫn tạo thanh Skill Bar với HTML và CSS - Demo RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .main{
                width: 60%;
                margin: auto;
                padding: 5px;
            }
            /* định dạng cho thẻ bao bọc các thẻ skill */
            .container {
                width: 100%; 
                background-color: #ddd; 
            }
            /* định dạng chung cho thẻ hiển thị skill */
            .skills {
                text-align: right;
                padding-right: 10px;
                line-height: 40px; 
                color: white; 
            }
            /* định dạng cho từng skill theo số liệu */
            .html {width: 100%; background-color: #4CAF50;} 
            .css {width: 40%; background-color: #2196F3;}
            .js {width: 60%; background-color: #f44336;} 
            .php {width: 60%; background-color: #808080;} 
        </style>
    </head>
    <body>
        <div class="main">
            <h1>Học lập trình miễn phí tại freetuts.net</h1>
            <p>HTML</p>
            <div class="container">
                <div class="skills html">90%</div>
            </div>

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