/2020/10/84ea0383.jpg
1、横向进度条的实现代码
<html> <head> <title>横向进度条</title> <style type="text/css"> .loadbar { width:200px; height:25px; background-color:#fff; border:1px solid #ccc; } .bar { line-height:25px; height:100%; display:block; font-family:arial; font-size:12px; background-color:#bb9319; color:#fff; } </style> </head> <body> <div class="loadbar"> <strong class="bar" style='width:30%;'>30%</strong> </div> </body> </html>
效果如下:
/2020/10/e581d892.png" /2020/10/e581d892.png" alt="311c362a2cb435d73f26526f24e61c4.png
二、竖向进度条的实现代码
<html> <head> <title>竖向进度条</title> <style type="text/css"> .loadbar { width:25px; height:200px; background-color:#fff; border:1px solid #ccc; position:relative; } .bar { width:100%; display:block; font-family:arial; font-size:12px; background-color:#bb9319; color:#fff; position:absolute; bottom:0; } </style> </head> <body> <div class="loadbar"> <strong class="bar" style='height:30%;'>30%</strong> </div> </body> </html>
实现结果:
/2020/10/712009b4.png" /2020/10/712009b4.png" alt="33d46f494b99c4ceded7cf12e379742.png
推荐教程:CSS入门基础教程
以上就是css实现横向与竖向进度条效果的方法的详细内容,更多请关注北冥有鱼其它相关文章!
本文转载自【PHP中文网】,希望能给您带来帮助,苟日新、日日新、又日新,生命不息,学习不止。