css实现横向与竖向进度条效果的方法
程序员文章站
2022-03-11 18:13:28
...
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>
效果如下:
二、竖向进度条的实现代码
<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>
实现结果:
推荐教程:CSS入门基础教程
以上就是css实现横向与竖向进度条效果的方法的详细内容,更多请关注其它相关文章!
上一篇: js手风琴
下一篇: 创建并运行自己的第一个Flutter项目