当前位置: 网站建设 > 网页设计 > 建站经验 >

CSS打造超炫进度条、柱状图

时间:2013-03-02 03:45来源:未知 作者:admin 点击:

标签:CSS打造超炫进度条、柱状图 柱状(1)打造(22)超炫(2)CSS(655)再看(3)进度(5)上(2)看一下(1)后果(8)
再看一下柱状图的后果: 再看上面复杂的代码又是怎么实现的 CSS顶用到了多少个图片在示例代码下载中有。应用方式同样简单。 怎么样,是不是有点心动了,完整CSS+Div打造。再看一下简单而又美丽的 --> [网站建设之]CSS打造超炫进度条、柱状图 我感到这个是最
CSS打造超炫进度条、柱状图》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302333H2013.htm

再看一下柱状图的后果:

再看上面复杂的代码又是怎么实现的

CSS顶用到了多少个图片在示例代码下载中有。应用方式同样简单。

 

怎么样,是不是有点心动了,完整CSS+Div打造。再看一下简单而又美丽的

--> [网站建设之]CSS打造超炫进度条、柱状图

我感到这个是最炫的(偷笑一个^_^)实在最重要的处所在图片上,代码就不贴了,有兴致的请下载示例代码。

CSS:

代码 Code highlighting produced by Actipro CodeHighlighter (freeware) -->1                     <h3>简单进度条</h3>
2                     <div class="graph">
3                         <strong class="bar" style="width: 54%;"><span>54%</span></strong>
4                     </div>    
5                     <div class="graph">
6                         <strong class="bar" style="width: 8%;"><span>8%</span></strong>
7                     </div>

只有转变bar的width就能够随便改变进度条的长度,简略易用吧。

代码 Code highlighting produced by Actipro CodeHighlighter (freeware) --> 1 <h3>庞杂进度条</h3>
 2                     <dl>
 3                         <dt>爱好博客园</dt>
 4                         <dd>
 5                             <div style="width:25%;"><strong>25%</strong></div>
 6                         </dd>
 7                         <dt>很喜欢</dt>
 8                         <dd>
 9                             <div style="width:55%;"><strong>55%</strong></div>
10                         </dd>
11                         <dt>超级喜欢</dt>
12                         <dd>
13                             <div style="width:75%;"><strong>75%</strong></div>
14                         </dd>
15                     </dl>
16  Tag:进度条   柱状图   进度条   柱状图   代码 Code highlighting produced by Actipro CodeHighlighter (freeware) --> 1                 .graph { 
 2                     position: relative; 
 3                     width: 200px; 
 4                     border: 1px solid #B1D632; 
 5                     padding: 2px; 
 6                     margin-bottom: .5em;                    
 7                 }
 8                 .graph .bar { 
 9                     display: block;    
10                     position: relative;
11                     background: #B1D632; 
12                     text-align: center; 
13                     color: #333; 
14                     ,CSS打造经典鼠标触发显示选项;height: 2em; 
15                     line-height: 2em;                                    
16                 }
17                 .graph .bar span { position: absolute; left: 1em,css我们真的走的太远了吗; }

标题有点题目党了,先来个图补充一下,CSS必须要知道的10个技巧

是不是也还可以呢?下面看下代码是怎么的

 

代码 Code highlighting produced by Actipro CodeHighlighter (freeware) --> 1                 /* 复杂进度条 */
 2                 dl { 
 3                     margin: 0; 
 4                     padding: 0;                     
 5        ,CSS必知高级语法;         }
 6                 dt { 
 7                     position: ,CSS强制TD不换行;relative;
 8                     clear: both;
 9                     display: block; ,CSS引用方式详解;
10                     float: left; 
11   ,CSS常见问题及解决办法;                  width: 104px; 
12                   ,CSS常见问题及小技巧汇总;  height: 20px; 
13                     line-height: 20px;
14                     margin-right: 17px;              
15                     font-size: .75em; 
16                     text-align: right; 
17                 }
18                 dd { 
19                     position: relative; 
20                 ,CSS常见兼容性问题总结;    display: block;                 
21                     float: left;     
22                     width: 197px; 
23                     height: 20px; 
24                     margin: 0 0 15px; 
25                     background: url("g_colorbar.jpg"); 
26                 }
27                 * html dd { float: none; } /*此处为 IE hack */
28                 
29                 dd div { 
30                     position: relative; 
31                     background: url("g_colorbar2.jpg"); 
32                     height: 20px; 
33                     width: 75%; 
34                     text-align:right; 
35                 }
36                 dd div strong { 
37                     position: absolute; 
38                     right: -5px; 
39                     top: -2px; 
40                  ,CSS常用属性的代码简化实例;   display: block; 
41                     background: url("g_marker.gif"); 
42                     height: 24px; 
43                     width: 9px; 
44                     text-align: left;
45                     text-indent: -9999px; 
46                     overflow: hidden;
47                 }
48 

 

HTML:

 

HTML:

css:


(责任编辑:网站建设)
CSS打造超炫进度条、柱状图相关文章
上一篇:CSS打造经典鼠标触发显示选项 下一篇:CSS找bug的口诀秘籍
回到顶部