CSS 进度条实现代码 - phpStudy

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> 
<div id="graphbox"> 
<h2>BarGraphs 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>

提示：您可以先修改部分代码再运行

«
»

PHP简介 PHP基本语法 PHP类型 PHP变量 PHP运算符 PHP控制结构 PHP函数 PHP类与对象 PHP异常处理函数库分类

快速导航

PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3