Commit 85c09b4e6f968ed045f25e25f5726fa74f093298
1 parent
99106785
index 调用排行榜
Showing
3 changed files
with
56 additions
and
12 deletions
css/libCss/common.css
| ... | ... | @@ -174,15 +174,14 @@ section{ |
| 174 | 174 | } |
| 175 | 175 | .circle-animation{ |
| 176 | 176 | position: absolute; |
| 177 | - width: 140px; | |
| 178 | - height: 140px; | |
| 179 | - /*border-radius: 50%;*/ | |
| 180 | - background: url("../../image/circle-animation.png") no-repeat 0 0; | |
| 181 | - top:29px; | |
| 182 | - left:105px; | |
| 183 | - animation:circle 5s infinite linear; | |
| 184 | - -webkit-animation:circle 5s infinite linear; | |
| 185 | - -moz-animation:circle 5s infinite linear; | |
| 177 | + width: 180px; | |
| 178 | + height: 180px; | |
| 179 | + background: url(../../image/circle-animation.png) no-repeat 0 0; | |
| 180 | + top: 9px; | |
| 181 | + left: 85px; | |
| 182 | + animation: circle 5s infinite linear; | |
| 183 | + -webkit-animation: circle 5s infinite linear; | |
| 184 | + -moz-animation: circle 5s infinite linear; | |
| 186 | 185 | } |
| 187 | 186 | @keyframes circle{ |
| 188 | 187 | 0%{ transform:rotate(0deg); } |
| ... | ... | @@ -230,9 +229,41 @@ section{ |
| 230 | 229 | } |
| 231 | 230 | .ranking-list{ |
| 232 | 231 | height: 534px; |
| 232 | + background-color: #f9f9f9; | |
| 233 | 233 | } |
| 234 | 234 | .ranking-list li{ |
| 235 | + padding-left: 24px; | |
| 236 | + height: 56px; | |
| 237 | + line-height: 56px; | |
| 235 | 238 | |
| 236 | 239 | } |
| 237 | - | |
| 240 | +.ranking-list li:nth-of-type(odd){ | |
| 241 | + background-color: #fff; | |
| 242 | +} | |
| 243 | +.ranking-list li div:nth-of-type(1){ | |
| 244 | + float: left; | |
| 245 | + width:42px; | |
| 246 | + height: 56px; | |
| 247 | + margin-right: 12px; | |
| 248 | + background: url("../../image/ranking-icon.png") no-repeat 0 14px; | |
| 249 | + color: #fff; | |
| 250 | + font-size: 16px; | |
| 251 | + text-align: center; | |
| 252 | + vertical-align:text-top; | |
| 253 | +} | |
| 254 | +.ranking-list li div:nth-of-type(2){ | |
| 255 | + color: #1f2b3d; | |
| 256 | + float: left; | |
| 257 | + width: 200px; | |
| 258 | + overflow: hidden; | |
| 259 | + white-space: nowrap; | |
| 260 | + text-overflow: ellipsis; | |
| 261 | + font-size: 14px; | |
| 262 | + margin-right: 10px; | |
| 263 | +} | |
| 264 | +.ranking-list li div:nth-of-type(3){ | |
| 265 | + color: #1f2b3d; | |
| 266 | + font-size: 14px; | |
| 267 | + float: left; | |
| 268 | +} | |
| 238 | 269 | /*API别表----------------------------------------*/ |
| 239 | 270 | \ No newline at end of file | ... | ... |
image/ranking-icon.png
0 → 100644
1.26 KB
index.html
| ... | ... | @@ -84,8 +84,21 @@ |
| 84 | 84 | <span>调用排行榜</span> |
| 85 | 85 | </div> |
| 86 | 86 | <ul class="ranking-list"> |
| 87 | - <li>1</li> | |
| 88 | - <li>2</li> | |
| 87 | + <li> | |
| 88 | + <div>1</div> | |
| 89 | + <div title="任你停微信支付接口">任你停微信支付接口任你停微信支付接口</div> | |
| 90 | + <div>99</div> | |
| 91 | + </li> | |
| 92 | + <li> | |
| 93 | + <div>1</div> | |
| 94 | + <div title="任你停微信支付接口">任你停微信支付接口任你停微信支付接口</div> | |
| 95 | + <div>99</div> | |
| 96 | + </li> | |
| 97 | + <li> | |
| 98 | + <div>1</div> | |
| 99 | + <div title="任你停微信支付接口">任你停微信支付接口任你停微信支付接口</div> | |
| 100 | + <div>99</div> | |
| 101 | + </li> | |
| 89 | 102 | </ul> |
| 90 | 103 | </div> |
| 91 | 104 | </div> | ... | ... |