一、横向进度条

<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实现横向进度条和竖向进度条的更多相关文章

  1. Axure教程：滑动进度条、圆形进度环的复杂交互效果实现方法

    滑动条.进度条.进度环,是产品原型中比较常见的进度展示功能.今天笔者分享的是使用Axure原型工具实现两种进度展示功能中相对复杂的交互效果. 效果一.可拖动.可显示进度值.可计算多个页面均值的滑动进度 ...

  2. 超赞的CSS3进度条 可以随进度显示不同颜色

    原文:超赞的CSS3进度条 可以随进度显示不同颜色 现在的WEB已经不是以前的WEB了,传输更大的数据量,有着更加复杂的计算,这就需要利用进度条来提高用户体验,必要时可以让用户耐心等待,不至于因操作卡 ...

  3. Xamarin XAML语言教程使用属性设置进度条的当前进度

    Xamarin XAML语言教程使用属性设置进度条的当前进度 在图12.19~12.21中我们看到的是没有实现加载的进度条,即进度条的当前进度为0,如果开发者想要修改当前进度,可以使用两种方式:一种是 ...

  4. Android BGradualProgress 多种渐变、直角or弧角、进度条、加载条

    可实现多种渐变.直角or弧角.进度条.加载条 (Various gradient, right or arc angle, progress bar and loading bar can be re ...

  5. MFC读写.txt文件时进度条显示实时进度

    整体实现方式:先获得文件长度,然后用每次读取的长度,计算出完成的百分比,用百分比的值设置进度条. 一.MFC进度条 Progress Control 相关函数 1. create() --创建Prog ...

  6. progressbar使用方法：进度画面大小，进度画面背景，进度百分比

    前一段时间,因为项目须要研究了下progressbar,发现这个小东西还真是不简单.在这个小控件的显示效果上,花费的时间远大于预估的工作量.话说程序猿一直是这样,预估的工作量远少于实际...      ...

  7. CSS类似微软中国首页的竖向选项卡

    效果体验:http://hovertree.com/texiao/css/24/ 源码下载:http://hovertree.com/h/bjaf/hardklps.htm 代码如下: <!DO ...

  8. CSS水平导航条和纵向导航条

    问题描述:         使用CSS制作水平导航条和纵向导航条   问题解决:        (1)水平导航条            1.1 效果预览:                   1.2 ...

  9. [转载] ul li css 做横向菜单

    原文地址: http://www.cnblogs.com/amylis_chen/archive/2011/09/24/2188398.html 第一步:建立一个无序列表 我们先建立一个无序列表,来建 ...

随机推荐

  1. 浅析 Hinton 最近提出的 Capsule 计划

    [原文]    浅析 Hinton 最近提出的 Capsule 计划     关于最新的 Hinton 的论文 Dynamic Routing Between Capsules,参见 https:// ...

  2. 剑指offer——python【第14题】链表中倒数第k个节点

    题目描述 输入一个链表,输出该链表中倒数第k个结点. 思路 注意,看清楚,是输出节点,而不是输出节点值 可以先求出链表总长度,然后正向遍历得到第n个节点 解答 class Solution: def ...

  3. IIS多个应用程序共享Session

    在应用程序目录下面添加一个Global.asax文件,在文件中添加以下代码: public override void Init() { base.Init(); foreach (string mo ...

  4. uploadify 火狐 http error:302

    网上查询了一都说是flash 中 Session问题 (IE会自动复制过去),大多说将session值传过去就可以了但我们用的是公司的一套权限,改不了用户登录信息 无奈只好不用用户信息来做,果然对了 ...

  5. try 和 catch 和 finally

    try块中出现异常走进catch,异常后面的代码不会再被执行:finally块里try和catch执行完后要执行的代码,且一定会执行. 在释放资源的时候,不要多个放在一个try块里面. 流的关闭顺序: ...

  6. [daily]在dark theme下，启动wps的方法

    dark之后,wps的字体变成了灰白的 这样启动 env GTK2_RC_FILES=/usr/share/themes/Breeze/gtk-2.0/gtkrc /usr/bin/et -style ...

  7. 洛谷P2743 乐曲主题Musical Themes [USACO5.1] SA

    正解:SA 解题报告: 传送门 这题三个条件嘛,那就一个个考虑下都解决了就把这题解决了嘛QwQ 那就直接分别针对三个条件写下各个击破就欧克辣? 1)长度大于等于5:求出答案之后和5比大小 2)不能有公 ...

  8. EXT的bug 布局border 和 grid的cellediting

    首先 我要的布局是上下两块,并且高度和按自己的喜欢可调节,所以我采用的是border的布局, 上下两块,都放grid列表,上面一块不可编辑,下面这块可编辑,如图 在编辑第二块的时候会出现这个现象 图一 ...

  9. Centos7.1环境下搭建BugFree

    环境准备: 系统 配置 IP Centos7.1 1核2G+60GB硬盘 10.10.28.204 1. 安装apache yum install httpd  2. 安装mysql yum inst ...

  10. Python静态方法（staticmethod）和类方法（classmthod）

    Python静态方法(staticmethod)和类方法(classmthod)翻了翻之前的笔记,也刚好看到一篇不错的blog,关于静态方法和类方法的,方便以后查阅,就写在这里了,废话不多说,直接上代 ...