|
|
| 第1行： |
第1行： |
| .image-1{ | | .CCsingle { |
| width: 95px;
| | position: relative; |
| height:96px;
| |
| | |
|
| |
| position:absolute;
| |
| z-index: 1;
| |
| left: 15px;
| |
| top:10px;
| |
| | |
| }
| |
| .image-2{
| |
| width: 95px;
| |
| height:96px;
| |
|
| |
| position:absolute;
| |
| z-index: 2;
| |
| left: 50px;
| |
| top:45px;
| |
| }
| |
| .image-3{
| |
| width: 35px;
| |
| height:35px;
| |
|
| |
| position:absolute;
| |
| z-index: 3;
| |
| left: 110px;
| |
| top:22px;
| |
| }
| |
| | |
| | |
| | |
| body {
| |
| margin:0;
| |
| padding:40px;
| |
| background:#fff;
| |
| font:70% Arial, Helvetica, sans-serif;
| |
| color:#555;
| |
| line-height:180%;
| |
| } | | } |
|
| |
|
| h1{
| | .CCsingle::after { |
| font-size:220%;
| | content: ''; |
| font-weight:normal;
| | position: absolute; |
| }
| | top: 0; |
| | | right: 0; |
| h2{
| | width: 50%; |
| font-size:180%;
| | height: 50%; |
| font-weight:normal;
| | background-color: #9a337a; |
| }
| | clip-path: polygon(100% 0, 0 0, 100% 100%); |
| | |
| dl.csslinegraph, dl.csslinegraph dt, dl.csslinegraph dd{
| |
| margin:0;
| |
| padding:0;
| |
| }
| |
| dl.csslinegraph{
| |
| width:467px;
| |
| height:385px;
| |
| }
| |
| dl.csslinegraph dt{
| |
| display:none;
| |
| }
| |
| dl.csslinegraph dd{
| |
| position:relative;
| |
| float:left;
| |
| display:inline;
| |
| width:33px;
| |
| height:330px;
| |
| margin-top:22px;
| |
| }
| |
| dl.csslinegraph dd.first{
| |
| margin-left:33px;
| |
| }
| |
| dl.csslinegraph span{
| |
| position:absolute;
| |
| display:block;
| |
| width:33px;
| |
| height:330px;
| |
| left:0;
| |
| text-indent:-8000px;
| |
| }
| |
| dl.csslinegraph span em{
| |
| position:absolute;
| |
| display:block;
| |
| width:6px;
| |
| height:6px;
| |
| left:-3px;
| |
| bottom:-3px;
| |
| }
| |
| dl.csslinegraph span.d em{
| |
| left:-3px;
| |
| bottom:auto;
| |
| top:-2px;
| |
| }
| |
|
| |
| /* position based on previous value (if we are going to increase) */
| |
| | |
| .pi0{top:0px;}
| |
| .pi1{top:-11px;}
| |
| .pi2{top:-22px;}
| |
| .pi3{top:-33px;}
| |
| .pi4{top:-44px;}
| |
| .pi5{top:-75px;}
| |
| .pi6{top:-66px;}
| |
| .pi7{top:-77px;}
| |
| .pi8{top:-88px;}
| |
| .pi9{top:-99px;}
| |
| .pi10{top:-110px;}
| |
| .pi11{top:-121px;}
| |
| .pi12{top:-132px;}
| |
| .pi13{top:-143px;}
| |
| .pi14{top:-154px;}
| |
| .pi15{top:-165px;}
| |
| .pi16{top:-176px;}
| |
| .pi17{top:-187px;}
| |
| .pi18{top:-198px;}
| |
| .pi19{top:-209px;}
| |
| .pi20{top:-220px;}
| |
| .pi21{top:-231px;}
| |
| .pi22{top:-242px;}
| |
| .pi23{top:-253px;}
| |
| .pi24{top:-264px;}
| |
| .pi25{top:-275px;}
| |
| .pi26{top:-286px;}
| |
| .pi27{top:-297px;}
| |
| .pi28{top:-308px;}
| |
| .pi29{top:-319px;}
| |
| .pi30{top:-330px;}
| |
|
| |
| /* position based on previous value (if we are going to decrease) */
| |
|
| |
| .pd0{top:330px;}
| |
| .pd1{top:319px;}
| |
| .pd2{top:308px;}
| |
| .pd3{top:297px;}
| |
| .pd4{top:286px;}
| |
| .pd5{top:275px;}
| |
| .pd6{top:264px;}
| |
| .pd7{top:253px;}
| |
| .pd8{top:242px;}
| |
| .pd9{top:231px;}
| |
| .pd10{top:220px;}
| |
| .pd11{top:209px;}
| |
| .pd12{top:198px;}
| |
| .pd13{top:187px;}
| |
| .pd14{top:176px;}
| |
| .pd15{top:165px;}
| |
| .pd16{top:154px;}
| |
| .pd17{top:143px;}
| |
| .pd18{top:132px;}
| |
| .pd19{top:121px;}
| |
| .pd20{top:110px;}
| |
| .pd21{top:99px;}
| |
| .pd22{top:88px;}
| |
| .pd23{top:77px;}
| |
| .pd24{top:66px;}
| |
| .pd25{top:55px;}
| |
| .pd26{top:44px;}
| |
| .pd27{top:33px;}
| |
| .pd28{top:22px;}
| |
| .pd29{top:11px;}
| |
| .pd30{top:0px;}
| |
|
| |
| /* increased values */
| |
| | |
| .i0{background-position:0 -1px;}
| |
| .i1{background-position:-33px 0;}
| |
| .i2{background-position:-66px 0;}
| |
| .i3{background-position:-99px 0;}
| |
| .i4{background-position:-132px 0;}
| |
| .i5{background-position:-165px 0;}
| |
| .i6{background-position:-198px 0;}
| |
| .i7{background-position:-231px 0;}
| |
| .i8{background-position:-264px 0;}
| |
| .i9{background-position:-297px 0;}
| |
| .i10{background-position:-330px 0;}
| |
| .i11{background-position:-363px 0;}
| |
| .i12{background-position:-396px 0;}
| |
| .i13{background-position:-429px 0;}
| |
| .i14{background-position:-462px 0;}
| |
| .i15{background-position:-495px 0;}
| |
| .i16{background-position:-528px 0;}
| |
| .i17{background-position:-561px 0;}
| |
| .i18{background-position:-594px 0;}
| |
| .i19{background-position:-627px 0;}
| |
| .i20{background-position:-660px 0;}
| |
| .i21{background-position:-693px 0;}
| |
| .i22{background-position:-726px 0;}
| |
| .i23{background-position:-759px 0;}
| |
| .i24{background-position:-792px 0;}
| |
| .i25{background-position:-825px 0;}
| |
| .i26{background-position:-858px 0;}
| |
| .i27{background-position:-891px 0;}
| |
| .i28{background-position:-924px 0;}
| |
| .i29{background-position:-957px 0;}
| |
| .i30{background-position:-990px 0;}
| |
|
| |
| /* decreased values */
| |
|
| |
| .d0{background-position:0 -331px;}
| |
| .d1{background-position:-33px -332px;}
| |
| .d2{background-position:-66px -332px;}
| |
| .d3{background-position:-99px -332px;}
| |
| .d4{background-position:-132px -332px;}
| |
| .d5{background-position:-165px -332px;}
| |
| .d6{background-position:-198px -332px;}
| |
| .d7{background-position:-231px -332px;}
| |
| .d8{background-position:-264px -332px;}
| |
| .d9{background-position:-297px -332px;}
| |
| .d10{background-position:-330px -332px;}
| |
| .d11{background-position:-363px -332px;}
| |
| .d12{background-position:-396px -332px;}
| |
| .d13{background-position:-429px -332px;}
| |
| .d14{background-position:-462px -332px;}
| |
| .d15{background-position:-495px -332px;}
| |
| .d16{background-position:-528px -332px;}
| |
| .d17{background-position:-561px -332px;}
| |
| .d18{background-position:-594px -332px;}
| |
| .d19{background-position:-627px -332px;}
| |
| .d20{background-position:-660px -332px;}
| |
| .d21{background-position:-693px -332px;}
| |
| .d22{background-position:-726px -332px;}
| |
| .d23{background-position:-759px -332px;}
| |
| .d24{background-position:-792px -332px;}
| |
| .d25{background-position:-825px -332px;}
| |
| .d26{background-position:-858px -332px;}
| |
| .d27{background-position:-891px -332px;}
| |
| .d28{background-position:-924px -332px;}
| |
| .d29{background-position:-957px -332px;}
| |
| .d30{background-position:-990px -332px;}
| |
| | |
| .body{
| |
| display:none;
| |
| } | | } |
