CSS 进度条实现代码- CSS样式表 - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS 进度条实现代码

CSS样式表: IE和Firefox浏览器CSS网页布局不同点; CSS改变选择网页文字背景色; CSS3教程(1):什么是CSS3; 浏览器Apple Safari和Google Chrome内核webkit; YaHoo方法:CSS Reset重设浏览器的样式; 你知道吗？CSS样式表也能挂网页木马; 通过宜家的家具设计方法学习CSS模块化; 可读性CSS代码编写的小技巧; 建议网页开发者使用IE8测试版测试网站; 帮我写出更好的CSS代码的一些技巧; CSS初学福音:解决你对英文单词的不理解; 两个CSS代码精简工具(网页推荐); IE6图片元素img下出现多余空白的问题; 将设计稿转换成WEB页面职业者; W3C标准以及XHTML和HTML; 网页字体该如何设置？; 学CSS网页布局排查错误的方法; CSS常见的让元素水平居中显示的方法; CSS网页布局教程：CSS伪类定义3种方法; CSS模块化思想的优势

No. « ‹ 15 16 17 18 › »

技术文章搜索

关键字

CSS样式表中的 CSS 进度条实现代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-11 浏览: 56 ::

收藏到网摘: n/a

CSS Display与Visibility的不同 css实现div在下拉菜单之上

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

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

CSS Display与Visibility的不同 css实现div在下拉菜单之上

评论 (0) All