diff --git a/css/libCss/common.css b/css/libCss/common.css
index 54bac0a..d63cd8b 100644
--- a/css/libCss/common.css
+++ b/css/libCss/common.css
@@ -3,7 +3,7 @@ body{
     background-color: #eef1f5;
 }
 body,html{
-    overflow: hidden;
+    /*overflow: hidden;*/
     width: 100%;
     height: 100%;
 }
@@ -12,28 +12,134 @@ ul,li,ol{
     margin-bottom: 0!important;
     list-style: none;
 }
+.display-none{
+    display: none;
+}
+.float-left{
+    float: left;
+}
+.float-right{
+    float: right;
+}
+.marginright32{
+    margin-right: 32px;
+}
+
 input,button,select,textarea{outline:none;}
 /*头部--------------------------------------------------*/
 header{
+    min-width: 1400px;
     height: 80px;
     width: 100%;
     background-color: #fff;
+    box-shadow: 0 1px 10px 0 rgba(50,50,50,.2);
+}
+.java-logo{
+    height: 80px;
+    display: inline-block;
+    background: url("../../image/java-logo.png") no-repeat 47px center;
+}
+.java-title{
+    display: inline-block;
+    height: 80px;
+    width: 167px;
+    margin-left: 101px;
+    background: url("../../image/java-title.png") no-repeat 0px center;
+}
+.java-loginout{
+    cursor: pointer;
+    float: right;
+    width: 27px;
+    height: 28px;
+    background: url("../../image/pladata_close.png") no-repeat;
+    margin-top: 26px;
+    margin-right: 32px;
 }
 /*左侧栏--------------------------------------------------*/
 nav{
-    position: fixed;
     width: 200px;
     height: 100%;
-    left: 0;
-    top:0;
-    padding-top: 80px;
 }
 .nav-ul{
+    box-shadow: 1px 0 10px 0 rgba(50,50,50,.2);
     background-color: #fff;
     height: 100%;
 }
+.nav-ul li{
+    height: 120px;
+    line-height: 120px;
+    text-align: center;
+    color: #1f2b3d;
+    font-size: 20px;
+}
+.nav-ul li:nth-of-type(1){
+    box-shadow: 0 1px 10px 0 rgba(50,50,50,.2);
+    background-color: #f9f9f9;
+}
+.nav-ul li:nth-of-type(2){
+    background-color: #fff;
+}
+.nav-ul li:nth-of-type(3){
+    background-color: #f9f9f9;
+}
+.nav-ul li:nth-of-type(4){
+    background-color: #fff;
+}
+.nav-ul li:hover{
+    background-color: rgba(38,190,150,.1);
+}
+.nav-ul li.visitActive{
+    background-color: #2abb9b;
+    color: #fff;
+}
 /*内容--------------------------------------------------*/
 section{
-    width: 100%;
-    padding-left: 200px;
-}
\ No newline at end of file
+
+    overflow-x: auto;
+    overflow-y: auto;
+    height: calc(100% - 80px);
+    height: -webkit-calc(100% - 80px);
+    height: -moz-calc(100% - 80px);
+    width:calc(100% - 200px);
+    width:-webkit-calc(100% - 200px);
+    width:-moz-calc(100% - 200px);
+}
+.section-wrap{
+    padding: 18px 32px 0;
+}
+.link-div{
+    margin-left: -10px;
+}
+.link-div span{
+    width: 176px;
+    height: 57px;
+    display: inline-block;
+    text-align: center;
+    line-height: 42px;
+    font-size: 18px;
+    color: #fff;
+    cursor: pointer;
+}
+.link-div span:nth-of-type(1){
+    background:url("../../image/link-div-1.png");
+}
+.link-div span:nth-of-type(2){
+    background:url("../../image/link-div-2.png");
+}
+.link-con-left{
+    padding-right: 32px;
+    width: 734px;
+    box-sizing: content-box;
+}
+.link-con-left-wrap{
+    width: 351px;
+    height: 245px;
+    background-color: #fff;
+    float: left;
+}
+.link-con-right{
+    width: 336px;
+}
+
+
+/*API别表----------------------------------------*/
\ No newline at end of file
diff --git a/image/java-logo.png b/image/java-logo.png
new file mode 100644
index 0000000..988c3b8
--- /dev/null
+++ b/image/java-logo.png
diff --git a/image/java-title.png b/image/java-title.png
new file mode 100644
index 0000000..f04c799
--- /dev/null
+++ b/image/java-title.png
diff --git a/image/link-div-1.png b/image/link-div-1.png
new file mode 100644
index 0000000..db08180
--- /dev/null
+++ b/image/link-div-1.png
diff --git a/image/link-div-2.png b/image/link-div-2.png
new file mode 100644
index 0000000..11efa99
--- /dev/null
+++ b/image/link-div-2.png
diff --git a/index.html b/index.html
index 6a434ee..0530164 100644
--- a/index.html
+++ b/index.html
@@ -14,22 +14,57 @@
     <link rel="stylesheet" href="css/libCss/common.css">
     <link rel="stylesheet" href="css/libCss/bootstrap.min.css">
     <link rel="stylesheet" href="css/index.css">
-    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> </head>
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
 </head>
 <body>
 <header>
-
-    <div class="row">
-        <div class="col-md-8">.col-md-8</div>
-        <div class="col-md-4">.col-md-4</div>
-    </div>
+        <div class="float-left java-logo">
+            <!--<span></span>-->
+            <span class="java-title"></span>
+        </div>
+        <div class="java-loginout float-right">
+            <!--<span class="java-loginout"></span>-->
+        </div>
 </header>
-<nav>
+<nav class="float-left">
     <ul class="nav-ul">
-        <li>1</li>
+        <li class="visitActive">
+            任你停
+        </li>
+        <li>
+            PDA
+        </li>
+        <li>
+            微信服务号
+        </li>
+        <li>
+            第三方
+        </li>
     </ul>
 </nav>
-<section>section</section>
+<section class="float-left">
+    <div class="section-wrap">
+        <div class="link-div">
+            <span>总体概况</span>
+            <span>API  列表</span>
+        </div>
+        <div class="link-con">
+            <div class="link-con-1">
+                <div class="link-con-left float-left">
+                    <div class="link-con-left-wrap marginright32"></div>
+                    <div class="link-con-left-wrap"></div>
+                    <div class="clearfix"></div>
+                    <div></div>
+                </div>
+                <div class="link-con-right float-left">2</div>
+            </div>
+
+
+            <!--API别表-->
+            <div class="link-con-1 display-none">display-none</div>
+        </div>
+    </div>
+</section>
 
 <script type="text/javascript" src="js/libJs/jquery.min.js"></script>
 <script type="text/javascript" src="js/libJs/bootstrap.min.js"></script>