纵向柱状图的CSS写法

1

/*
UI Object */

2

.v_graph{

padding

:

20px

0

}

3

.v_graph
ul{

height

:

200px

;

margin

:

0

;

padding

:

0

;

border

:

1px

solid

#ddd

;

border-top

:

0

;

border-right

:

0

;

font-size

:

11px

;

font-family

:

Tahoma

,
Geneva,

sans-serif

;

list-style

:

none

}

4

.v_graph
ul:after{

display

:

block

;

clear

:

both

;

content

:

""

}

5

.v_graph
li{

display

:

inline

;

float

:

left

;

position

:

relative

;

width

:

8%

;

height

:

100%

;

margin

:

0

3%

;

text-align

:

center

;

white-space

:

nowrap

}

6

.v_graph
.g_term{

display

:inline-

block

;

position

:

relative

;

width

:

100%

;

height

:

20px

;

margin

:

0

-100%

-20px

0

;

padding

:

200px

0

0

0

;

font-weight

:

bold

;

color

:

#767676

;

line-height

:

20px

;

vertical-align

:

bottom

}

7

.v_graph
.g_bar{

display

:inline-

block

;

position

:

relative

;

width

:

100%

;

margin

:

-1px

0

0

0

;

border

:

1px

solid

#ccc

;

border-bottom

:

0

;

background

:

#e9e9e9

;

vertical-align

:

bottom

}

8

.v_graph
.g_bar span{

position

:

absolute

;

top

:

-20px

;

left

:

0

;

width

:

100%

;

color

:

#767676

}

9

/*
//UI Object */

01

<!--
UI Object -->

02

<

div

class

=

"v_graph"

>

03

<

ul

>

04

<

li

><

span

class

=

"g_term"

>SUN</

span

><

span

class

=

"g_bar"

style

=

"height:0%"

><

span

>0%</

span

></

span

></

li

>

05

<

li

><

span

class

=

"g_term"

>MON</

span

><

span

class

=

"g_bar"

style

=

"height:20%"

><

span

>20%</

span

></

span

></

li

>

06

<

li

><

span

class

=

"g_term"

>TUE</

span

><

span

class

=

"g_bar"

style

=

"height:30%"

><

span

>30%</

span

></

span

></

li

>

07

<

li

><

span

class

=

"g_term"

>WED</

span

><

span

class

=

"g_bar"

style

=

"height:40%"

><

span

>40%</

span

></

span

></

li

>

08

<

li

><

span

class

=

"g_term"

>THU</

span

><

span

class

=

"g_bar"

style

=

"height:50%"

><

span

>50%</

span

></

span

></

li

>

09

<

li

><

span

class

=

"g_term"

>FRI</

span

><

span

class

=

"g_bar"

style

=

"height:60%"

><

span

>60%</

span

></

span

></

li

>

10

<

li

><

span

class

=

"g_term"

>SAT</

span

><

span

class

=

"g_bar"

style

=

"height:100%"

><

span

>100%</

span

></

span

></

li

>

11

</

ul

>

12

</

div

>

13

<!--
//UI Object -->