请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站
div css切图

网页切图论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

切图广告位招租网站切图广告位招租
查看: 1032|回复: 0

CSS百分比进度条设计方法

[复制链接]

1900

主题

0

听众

7943

积分

管理员

Rank: 9Rank: 9Rank: 9

  • TA的每日心情

    2018-6-7 16:07
  • 签到天数: 67 天

    连续签到: 1 天

    [LV.6]常住居民II

    发表于 2015-10-3 23:52:43 |显示全部楼层

      如今在制作网页中我们常常会使用css样式来设计页面效果,今天为大家介绍一下CSS百分比进度条设计方法。

      效果图:

    CSS百分比进度条设计方法

      

      代码:

      

      #graphbox{

      border:1px solid #e7e7e7;

      padding:10px;

      width:250px;

      background-color:#f8f8f8;

      margin:5px 0;

      }

      #graphbox h2{

      color:#666666;

      font-family:Arial;

      font-size:18px;

      font-weight:700;

      }

      .graph{

      position:relative;

      background-color:#F0EFEF;

      border:1px solid #cccccc;

      padding:2px;

      font-size:13px;

      font-weight:700;

      }

      .graph .orange, .green, .blue, .red, .black{

      position:relative;

      text-align:left;

      color:#ffffff;

      height:18px;

      line-height:18px;

      font-family:Arial;

      display:block;

      }

      .graph .orange{background-color:#ff6600;}

      .graph .green{background-color:#66CC33;}

      .graph .blue{background-color:#3399CC;}

      .graph .red{background-color:red;}

      .graph .black{background-color:#555;}

      

      

       

    BarGraphs Example

       

    orange:35%

       

    green:90%

       

    blue:75%

       

    red:85%

       

    black:100%

      

    div css切图,网页切图制作
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    回顶部