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实现横向与竖向进度条效果的方法的知识。速戳>>知识兔学习精品课！