- SUN
- MON
- TUE
- WED
- THU
- FRI
- SAT
CSS Code
1 | /* UI Object */ |
2 | .h_graph ul{ margin : 0 50px 0 50px ; padding : 1px 0 0 0 ; border : 1px solid #ddd ; border-top : 0 ; border-right : 0 ; font-size : 11px ; font-family : Tahoma , Geneva, sans-serif ; list-style : none } |
3 | .h_graph li{ position : relative ; margin : 10px 0 ; vertical-align : top ; white-space : nowrap } |
4 | .h_graph .g_term{ position : absolute ; top : 0 ; left : -50px ; width : 40px ; font-weight : bold ; color : #767676 ; line-height : 20px ; text-align : right } |
5 | .h_graph .g_bar{ display :inline- block ; position : relative ; height : 20px ; border : 1px solid #ccc ; border-left : 0 ; background : #e9e9e9 } |
6 | .h_graph .g_bar span{ position : absolute ; top : 0 ; right : -50px ; width : 40px ; color : #767676 ; line-height : 20px } |
7 | /* //UI Object */ |
HTML Code
01 | <!-- UI Object --> |
02 | < div class = "h_graph" > |
03 | < ul > |
04 | < li >< span class = "g_term" >SUN</ span >< span class = "g_bar" style = "width:0%" >< span >0%</ span ></ span ></ li > |
05 | < li >< span class = "g_term" >MON</ span >< span class = "g_bar" style = "width:20%" >< span >20%</ span ></ span ></ li > |
06 | < li >< span class = "g_term" >TUE</ span >< span class = "g_bar" style = "width:30%" >< span >30%</ span ></ span ></ li > |
07 | < li >< span class = "g_term" >WED</ span >< span class = "g_bar" style = "width:40%" >< span >40%</ span ></ span ></ li > |
08 | < li >< span class = "g_term" >THU</ span >< span class = "g_bar" style = "width:50%" >< span >50%</ span ></ span ></ li > |
09 | < li >< span class = "g_term" >FRI</ span >< span class = "g_bar" style = "width:60%" >< span >60%</ span ></ span ></ li > |
10 | < li >< span class = "g_term" >SAT</ span >< span class = "g_bar" style = "width:100%" >< span >100%</ span ></ span ></ li > |
11 | </ ul > |
12 | </ div > |
13 | <!-- //UI Object --> |