diff --git a/css/libCss/common.css b/css/libCss/common.css
index 3826113..2102467 100644
--- a/css/libCss/common.css
+++ b/css/libCss/common.css
@@ -174,15 +174,14 @@ section{
 }
 .circle-animation{
     position: absolute;
-    width: 140px;
-    height: 140px;
-    /*border-radius: 50%;*/
-    background: url("../../image/circle-animation.png") no-repeat 0 0;
-    top:29px;
-    left:105px;
-    animation:circle 5s infinite linear;
-    -webkit-animation:circle 5s infinite linear;
-    -moz-animation:circle 5s infinite linear;
+    width: 180px;
+    height: 180px;
+    background: url(../../image/circle-animation.png) no-repeat 0 0;
+    top: 9px;
+    left: 85px;
+    animation: circle 5s infinite linear;
+    -webkit-animation: circle 5s infinite linear;
+    -moz-animation: circle 5s infinite linear;
 }
 @keyframes circle{
     0%{ transform:rotate(0deg); }
@@ -230,9 +229,41 @@ section{
 }
 .ranking-list{
     height: 534px;
+    background-color: #f9f9f9;
 }
 .ranking-list li{
+    padding-left: 24px;
+    height: 56px;
+    line-height: 56px;
 
 }
-
+.ranking-list li:nth-of-type(odd){
+    background-color: #fff;
+}
+.ranking-list li div:nth-of-type(1){
+    float: left;
+    width:42px;
+    height: 56px;
+    margin-right: 12px;
+    background: url("../../image/ranking-icon.png") no-repeat 0 14px;
+    color: #fff;
+    font-size: 16px;
+    text-align: center;
+    vertical-align:text-top;
+}
+.ranking-list li div:nth-of-type(2){
+    color: #1f2b3d;
+    float: left;
+    width: 200px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 14px;
+    margin-right: 10px;
+}
+.ranking-list li div:nth-of-type(3){
+    color: #1f2b3d;
+    font-size: 14px;
+    float: left;
+}
 /*API别表----------------------------------------*/
\ No newline at end of file
diff --git a/image/ranking-icon.png b/image/ranking-icon.png
new file mode 100644
index 0000000..c91134e
--- /dev/null
+++ b/image/ranking-icon.png
diff --git a/index.html b/index.html
index 6a80465..ee24aa4 100644
--- a/index.html
+++ b/index.html
@@ -84,8 +84,21 @@
                             <span>调用排行榜</span>
                         </div>
                         <ul class="ranking-list">
-                            <li>1</li>
-                            <li>2</li>
+                            <li>
+                                <div>1</div>
+                                <div title="任你停微信支付接口">任你停微信支付接口任你停微信支付接口</div>
+                                <div>99</div>
+                            </li>
+                            <li>
+                                <div>1</div>
+                                <div title="任你停微信支付接口">任你停微信支付接口任你停微信支付接口</div>
+                                <div>99</div>
+                            </li>
+                            <li>
+                                <div>1</div>
+                                <div title="任你停微信支付接口">任你停微信支付接口任你停微信支付接口</div>
+                                <div>99</div>
+                            </li>
                         </ul>
                     </div>
                 </div>