css怎样做横向和竖向的进度条？不同点在哪？

发布时间：2023-07-27 14:01:22 所属栏目：语言来源：

导读： 今天给大家分享做用css实现进度条的内容，比较简单的进度条有横向和竖向的进度条，本文就主要了解这两种简单的进度条的实现，一些朋友对两种进度条实现的区别比较好奇，下面我们就通过两个示例来了解看看。

今天给大家分享做用css实现进度条的内容，比较简单的进度条有横向和竖向的进度条，本文就主要了解这两种简单的进度条的实现，一些朋友对两种进度条实现的区别比较好奇，下面我们就通过两个示例来了解看看。

    一、横向进度条

<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>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!