CSS简单的进度条

推背图815

推背图815

2016-02-19 18:55

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

CSS:

 程序代码
style
#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;}
/style

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

HTML:

 程序代码
div id="graphbox"
h2BarGraphs Example/h2
div class="graph"span class="orange" style="width:35%;"orange:35%/span/div
div class="graph"span class="green" style="width:90%;"green:90%/span/div
div class="graph"span class="blue" style="width:75%;"blue:75%/span/div
div class="graph"span class="red" style="width:85%;"red:85%/span/div
div class="graph"span class="black" style="width:100%;"black:100%/span/div
/div

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

CSS简单的进度条

Web开发
CSS简单的进度条

jsp进度条

Web开发
jsp进度条

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Javascript 写的简单进度条控件

Web开发
Javascript 写的简单进度条控件

ajax进度条

Web开发
ajax进度条

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

IOS实现简单的进度条功能

编程语言 网络编程
IOS实现简单的进度条功能

ASP进度条

ASP
ASP进度条

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

暗恋的QQ分组设计_明知得不到,却还在付出

暗恋的QQ分组设计_明知得不到,却还在付出

类的设计方法

类的设计方法
下拉加载更多内容 ↓