题目有点标题党了，先来个图弥补一下。
怎么样，是不是有点心动了，完全CSS+Div打造。再看一下简单而又漂亮的
是不是也还可以呢？下面看下代码是怎样的
css：
![图片[1]-CSS打造超炫进度条、柱状图-千百度社区](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
![图片[2]-CSS打造超炫进度条、柱状图-千百度社区](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
代码
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
height
:
2em
;
15
line-height
:
2em
;
16
}
17
.graph .bar span
{
position
:
absolute
;
left
:
1em
;
}
HTML：
代码
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>
8
只要改变bar的width就可以随意改变进度条的长度，简单易用吧。
再看上面复杂的代码又是怎么实现的
CSS：
代码
1
/*
复杂进度条
*/
2
dl
{
3
margin
:
0
;
4
padding
:
0
;
5
}
6
dt
{
7
position
:
relative
;
8
clear
:
both
;
9
display
:
block
;
10
float
:
left
;
11
width
:
104px
;
12
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
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
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:
代码
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
CSS中用到了几个图片在示例代码下载中有。使用方法同样简单。
再看一下柱状图的效果：
我觉得这个是最炫的（偷笑一个^_^）其实最主要的地方在图片上，代码就不贴了，有兴趣的请下载示例代码。
1.本站内容仅供参考，不作为任何法律依据。用户在使用本站内容时，应自行判断其真实性、准确性和完整性，并承担相应风险。
2.本站部分内容来源于互联网，仅用于交流学习研究知识，若侵犯了您的合法权益，请及时邮件或站内私信与本站联系，我们将尽快予以处理。
3.本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
4.根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。
5.本站是非经营性个人站点，所有软件信息均来自网络，所有资源仅供学习参考研究目的，并不贩卖软件，不存在任何商业目的及用途
暂无评论内容