W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {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;} </style> </head> <body> <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> </body> </html>