css 横向进度条和竖向进度条实现代码

有时候看一些不错的滚动条效果不错，这里给大家分享一下如果用css实现

一、横向进度条

<ht ML >
<head>
<t IT le>横向进度条</title>
<style ty PE ="text/css">   
    .loadbar
    {
         width:200px;
         h ei ght:25px;
         background-color: # fff;
         border:1px solid #ccc;        
    }
    .bar
    {
        line-height:25px;        
        height:100%;
        dis play :block;        
        font-f ami ly: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>

效果如下：

&nbs p; 二、竖向进度条

<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-f am ily:arial;
        font -s ize: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 横向进度条和竖向进度条内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是为你收集整理的 css 横向进度条和竖向进度条实现代码全部内容，希望文章能够帮你解决 css 横向进度条和竖向进度条实现代码所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于css 横向进度条和竖向进度条实现代码的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did201121

更新时间：2023-04-27 阅读：26次