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

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

CSS样式表: CSS:提高网页在浏览器的渲染速度; css网页制作实用技巧9则; 思考Web站点设计对类以及id的命名方式; CSS教程:关于网页图片的属性; CSS教程:元素层叠级别及z-index; div css在思路和流程上实现结构与表现的分离; CSS入门教程:网页首字下沉; IE6、IE7和FF的最简单的hack技巧; 跨浏览器实现float:center; css技巧:经典CSS使用技巧几则; CSS教程:legend标签设定宽度; 网站进行W3C XHTML1.0验证的经验; CSS教程：网页颜色的几种表示; 网页CSS背景图片使用的测试结果; CSS网页布局:网页页面结构化; SPAN和DIV,Class与ID的区别汇总; xhtml css网页制作中问题解决的方式; div css与xhtml css是什么意思?; CSS样式表优化更整洁而简短; CSS设计网站导航菜单的优势

No. « ‹ 5 6 7 8 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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