diff --git a/index.css b/index.css
index e5833d9..4beca78 100644
--- a/index.css
+++ b/index.css
@@ -30,14 +30,17 @@ body {
 .wrapper a {
   font-size: 16px;
   color: #00aaee;
-  line-height: 40px;
 }
 .wrapper h4.subTitle {
   font-size: 30px;
   margin: 0;
-  padding: 30px 0;
+  padding: 50px 0 10px 0;
   width: 100%;
   text-align: center;
+  color: #5a5a5a;
+}
+.wrapper h4.subTitle.white {
+  color: #FFF;
 }
 .wrapper code {
   display: inline-block;
@@ -64,10 +67,12 @@ body {
   background: #326eeb;
   color: #f9f9f9;
 }
+.wrapper > div {
+  width: 100%;
+  min-width: 890px;
+}
 .brief {
   height: 300px;
-  width: 100%;
-  min-width: 1200px;
   text-align: center;
   padding: 100px 0;
   position: relative;
@@ -75,51 +80,53 @@ body {
 }
 .brief .slogan {
   font-size: 16px;
-  color: #636373;
+  color: #5a5a5a;
 }
 .feature {
   background: #dedede;
-  width: 100%;
-  min-width: 1200px;
 }
 .feature .featureContent {
   width: 1200px;
   margin: 0 auto;
 }
 .feature .featureContent .item {
+  padding: 30px 0 20px;
   width: 280px;
-  height: 190px;
   /*border: 1px solid #AAA;*/
   margin: 0 10px;
   float: left;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   font-size: 30px;
+  text-align: center;
 }
 .feature .featureContent .iconWrapper {
-  float: left;
   display: inline-block;
-  height: 190px;
-  line-height: 190px;
+  line-height: 40px;
   width: 70px;
   text-align: center;
   font-size: 40px;
-  color: #636373;
+  color: #5a5a5a;
+}
+.feature .featureContent .iconWrapper .bigger {
+  font-size: 44px;
 }
 .feature .featureContent h4 {
-  color: #636373;
-  margin: 60px 0 15px 0;
+  color: #5a5a5a;
+  margin: 12px auto 8px;
   font-size: 20px;
 }
 .feature .featureContent h5 {
   color: #777777;
   margin: 0;
+}
+.feature .featureContent h5,
+.feature .featureContent a {
   font-size: 14px;
+  line-height: 20px;
 }
 .quickstart {
   background: #f9f9f9;
-  width: 100%;
-  min-width: 1200px;
 }
 .quickstart .quickstartContent {
   position: relative;
@@ -136,29 +143,31 @@ body {
   padding: 0;
 }
 .listSection .listContent {
-  width: 1200px;
+  width: 890px;
   margin: 0 auto;
 }
 .listSection ul {
-  margin: 0 200px;
+  margin: 0 auto;
 }
 .listSection li {
-  color: #636373;
+  color: #5a5a5a;
   font-size: 16px;
   line-height: 40px;
 }
 .sample {
   background: #f9f9f9;
-  width: 100%;
-  min-width: 1200px;
 }
 .sample .sampleContent {
-  width: 1200px;
+  width: 890px;
   margin: 0 auto;
 }
 .sample .item {
-  width: 1000px;
-  margin: 20px auto 0;
+  margin: 10px;
+}
+.sample .itemTitle {
+  font-size: 16px;
+  margin: 0px 10px;
+  color: #5a5a5a;
 }
 .sample .figure {
   vertical-align: top;
@@ -169,10 +178,17 @@ body {
   vertical-align: top;
 }
 .sample code {
-  width: 530px;
+  width: 495px;
 }
-.sample .readmore {
-  /*text-align: center;*/
+.sample hr {
+  border: none;
+  border-top: 1px solid #777777;
+  width: 80%;
+  margin: 0 auto;
+  padding: 15px 0;
+}
+.sample .readmoreBtn {
+  margin-left: 10px;
   padding-bottom: 20px;
 }
 .readMore {
@@ -180,18 +196,15 @@ body {
   padding-bottom: 50px;
 }
 .learnMore {
-  width: 100%;
-  min-width: 1200px;
-  height: 300px;
   background: #326eeb;
   text-align: center;
   position: relative;
+  padding: 120px 0;
+}
+.learnMore h4.subtitle {
+  padding: 0;
+  margin-bottom: 30px;
 }
 .learnMore .btnWrapper {
-  width: 100%;
   text-align: center;
-  height: 60px;
-  margin-top: -30px;
-  position: absolute;
-  top: 50%;
 }
diff --git a/index.html b/index.html
index 61c2587..7eeeea7 100644
--- a/index.html
+++ b/index.html
@@ -34,11 +34,11 @@
 						<i class="iconfont">&#xe601;</i>
 					</span>
 					<h4>支持Https</h4>
-					<h5>用AnyProxy自制根证书，明文解析Https请求数据 <a href="https://github.com/alibaba/anyproxy/wiki/HTTPS%E7%9B%B8%E5%85%B3%E6%95%99%E7%A8%8B" target="_blank">如何配置&gt;&gt;</a></h5>
+					<h5>明文解析Https请求数据 <a href="https://github.com/alibaba/anyproxy/wiki/HTTPS%E7%9B%B8%E5%85%B3%E6%95%99%E7%A8%8B" target="_blank"><br>如何配置&gt;&gt;</a></h5>
 				</div>
 				<div class="item">
 					<span class="iconWrapper">
-						<i class="iconfont">&#xe600;</i>
+						<i class="iconfont bigger">&#xe600;</i>
 					</span>
 					<h4>Web界面</h4>
 					<h5>多终端共享，可视化观察每个请求</h5>
@@ -48,7 +48,7 @@
 						<i class="iconfont">&#xe604;</i>
 					</span>
 					<h4>规则逻辑（Rule）</h4>
-					<h5>随心所欲编写处理规则，定制我的专属调试工具</h5>
+					<h5>编写个性化处理规则，定制专属调试工具</h5>
 				</div>
 				<div style="clear:both"></div>
 			</div>
@@ -78,50 +78,55 @@
 			<div class="sampleContent">
 				<h4 class="subtitle">规则文件(rule)样例</h4>
 				<div class="item">
+					<h5 class="itemTitle">去除请求头的if-modified-since字段</h5>
 					<pre>
 <code class="javascript">
 //remove cache related header
 //file : rule_remove_cache_header.js
 //rule : anyproxy --rule rule_remove_cache_header.js
 module.exports = {
-	replaceRequestOption : function(req,option){
-	    var newOption = option;
-	    delete newOption.headers['if-modified-since'];
+    replaceRequestOption : function(req,option){
+        var newOption = option;
+        delete newOption.headers['if-modified-since'];
 
-	    return newOption;
-	}
+        return newOption;
+    }
 };
 </code>
 					</pre>
 					<span class="figure">
-						<img src="https://t.alipayobjects.com/images/rmsweb/T1ecFhXjxcXXXXXXXX.png" width="360"/>
+						<img src="https://t.alipayobjects.com/images/rmsweb/T1ecFhXjxcXXXXXXXX.png" width="350"/>
 					</span>
+					<hr />
 				</div>
 
 				<div class="item">
+					<h5 class="itemTitle">在HTML响应末尾加上一句hello world</h5>
 					<pre>
 <code class="javascript">
 //append "hello world" to all web pages
 //file : rule_replace_response_data.js
 //run  : anyproxy --rule rule_replace_response_data.js
 module.exports = {
-    replaceServerResDataAsync: function(req,res,serverRes,callback){
+    replaceServerResDataAsync: function(req,res,serverRes,cb){
 
         if(/html/i.test(res.headers['content-type'])){
             var newDataStr = serverRes.toString();
             newDataStr += "hello world!";
-            callback(newDataStr);
+            cb(newDataStr);
         }
     }
 };
 </code>
 					</pre>
 					<span class="figure">
-						<img src="https://t.alipayobjects.com/images/rmsweb/T1LcphXf0eXXXXXXXX.png" width="360"/>
+						<img src="https://t.alipayobjects.com/images/rmsweb/T1LcphXf0eXXXXXXXX.png" width="350"/>
 					</span>
+					<hr />
 				</div>
 
 				<div class="item">
+					<h5 class="itemTitle">为某个请求指定目标IP地址</h5>
 					<pre>
 <code class="javascript">
 //assign a specific IP adress for some request
@@ -141,11 +146,13 @@ module.exports = {
 </code>
 					</pre>
 					<span class="figure">
-						<img src="https://t.alipayobjects.com/images/rmsweb/T1hsxhXeddXXXXXXXX.png" width="360"/>
+						<img src="https://t.alipayobjects.com/images/rmsweb/T1hsxhXeddXXXXXXXX.png" width="350"/>
 					</span>
+					<hr />
 				</div>
 
 				<div class="item">
+					<h5 class="itemTitle">把所有图片响应替换成本地图片</h5>
 					<pre>
 <code class="javascript">
 //replace all the images with local one
@@ -173,13 +180,14 @@ module.exports = {
 </code>
 					</pre>
 					<span class="figure">
-						<img src="https://t.alipayobjects.com/images/rmsweb/T1Zr4hXeXhXXXXXXXX.png" width="360"/>
+						<img src="https://t.alipayobjects.com/images/rmsweb/T1Zr4hXeXhXXXXXXXX.png" width="350"/>
 					</span>
 				</div>
 
-				<div class="item readmore">
-					<a href="https://github.com/alibaba/anyproxy/wiki/%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E6%96%B0%E8%BD%AE%E5%AD%90%EF%BC%9Aanyproxy#%E5%BC%80%E6%94%BE%E5%BC%8F%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%AE%BE%E8%AE%A1" target="_blank">&gt;&gt;&nbsp;规则文件（Rule）API</a>
+				<div class="readmoreBtn">
+					<a href="https://github.com/alibaba/anyproxy/wiki/%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8%E7%9A%84%E6%96%B0%E8%BD%AE%E5%AD%90%EF%BC%9Aanyproxy#%E5%BC%80%E6%94%BE%E5%BC%8F%E4%BB%A3%E7%90%86%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%AE%BE%E8%AE%A1" target="_blank">&gt;&gt;&nbsp;阅读：规则文件（Rule）API</a>
 				</div>
+
 			</div>
 		</div>
 
@@ -189,7 +197,7 @@ module.exports = {
 				<ul>
 					<li>Map Local，Log Filter等常规功能</li>
 					<li><a href="https://github.com/alibaba/anyproxy#throttling">低网速网速模拟</a>，调试应用在2G/3G下的表现</li>
-					<li><a href="https://github.com/alibaba/anyproxy#work-as-a-module-for-nodejs" target="_blank">把AnyProxy作为npm模块做二次开发</a></li>
+					<li><a href="https://github.com/alibaba/anyproxy#work-as-a-module-for-nodejs" target="_blank">把AnyProxy作为npm模块</a>，基于它做二次开发</li>
 				</ul>
 				<h4 class="subtitle">相关阅读</h4>
 				<ul>
@@ -201,7 +209,8 @@ module.exports = {
 
 		<div class="learnMore listSection">
 			<div class="btnWrapper">
-				<a class="actionBtn actionBtnWhite" href="https://github.com/alibaba/anyproxy" target="_blank">Read More ：AnyProxy@Github</a>
+				<h4 class="subtitle white">Read More</h4>
+				<a class="actionBtn actionBtnWhite" href="https://github.com/alibaba/anyproxy" target="_blank">https://github.com/alibaba/anyproxy</a>
 			</div>
 		</div>
 
diff --git a/index.less b/index.less
index 73b4354..50b59a4 100644
--- a/index.less
+++ b/index.less
@@ -2,18 +2,19 @@
 @dark : #326EEB;
 @gray : #F9F9F9;
 @darkGray : #DEDEDE;
-@textDark : #636373;
+@textDark : #5A5A5A;
 @textLight: #777;
 
 @wideContent : 1200px;
+@normalContent : 890px;
 
 @font-face {
-  font-family: 'iconfont';
-  src: url('//at.alicdn.com/t/font_1438330832_106274.eot'); /* IE9*/
-  src: url('//at.alicdn.com/t/font_1438330832_106274.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('//at.alicdn.com/t/font_1438330832_106274.woff') format('woff'), /* chrome、firefox */
-  url('//at.alicdn.com/t/font_1438330832_106274.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
-  url('//at.alicdn.com/t/font_1438330832_106274.svg#iconfont') format('svg'); /* iOS 4.1- */
+	font-family: 'iconfont';
+	src: url('//at.alicdn.com/t/font_1438330832_106274.eot'); /* IE9*/
+	src: url('//at.alicdn.com/t/font_1438330832_106274.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+	url('//at.alicdn.com/t/font_1438330832_106274.woff') format('woff'), /* chrome、firefox */
+	url('//at.alicdn.com/t/font_1438330832_106274.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
+	url('//at.alicdn.com/t/font_1438330832_106274.svg#iconfont') format('svg'); /* iOS 4.1- */
 }
 
 i.iconfont{
@@ -45,15 +46,19 @@ body{
 	a{
 		font-size: 16px;
 		color: @main;
-		line-height: 40px;
 	}
 
 	h4.subTitle{
 		font-size: 30px;
 		margin: 0;
-		padding: 30px 0;
+		padding: 50px 0 10px 0;
 		width: 100%;
 		text-align: center;
+		color: @textDark;
+	}
+
+	h4.subTitle.white{
+		color: #FFF;
 	}
 
 	code{
@@ -88,10 +93,13 @@ body{
 	}
 }
 
+.wrapper>div{
+	width: 100%;
+	min-width: @normalContent;
+}
+
 .brief{
 	height: 300px;
-	width: 100%;
-	min-width: @wideContent;
 	text-align: center;
 	padding: 100px 0;
 	position: relative;
@@ -105,54 +113,56 @@ body{
 
 .feature{
 	background: @darkGray; 
-	width: 100%;
-	min-width: @wideContent;
 
 	.featureContent{
 		width: @wideContent;
 		margin: 0 auto;
 
-		@itemheight : 190px;
 		.item{
+			padding: 30px 0 20px;
 			width: 280px;
-			height: @itemheight;
 			/*border: 1px solid #AAA;*/
 			margin: 0 10px;
 			float: left;
 			box-sizing:border-box;
 			-webkit-box-sizing:border-box;
 			font-size: 30px;
+			text-align: center;
 		}
 
 		.iconWrapper{
-			float: left;
 			display: inline-block;
-			height: @itemheight;
-			line-height: @itemheight;
+			line-height: 40px;
 			width: 70px;
 			text-align: center;
 			font-size: 40px;
 			color: @textDark;
 		}
+		.iconWrapper .bigger{
+			font-size: 44px;
+		}
 
 		h4{
 			color: @textDark;
-			margin: 60px 0 15px 0;
+			margin: 12px auto 8px;
 			font-size: 20px;
 		}
 
 		h5{
 			color: @textLight;
 			margin: 0;
+		}
+
+		h5,
+		a{
 			font-size: 14px;
+			line-height: 20px;
 		}
 	}
 }
 
 .quickstart{
 	background: @gray;
-	width: 100%;
-	min-width: @wideContent;
 
 	.quickstartContent{
 		position: relative;
@@ -174,13 +184,12 @@ body{
 
 .listSection{
 	.listContent{
-		width: @wideContent;
+		width: @normalContent;
 		margin: 0 auto;
 	}
 
-
 	ul{
-		margin: 0 200px;
+		margin: 0 auto;
 	}
 
 	li{
@@ -192,18 +201,20 @@ body{
 
 .sample{
 	background: @gray;
-	width: 100%;
-	min-width: @wideContent;
-
-
 	.sampleContent{
-		width: @wideContent;
+		width: @normalContent;
 		margin: 0 auto;
 	}
 
+
 	.item{
-		width: 1000px;
-		margin: 20px auto 0;
+		margin: 10px;
+	}
+
+	.itemTitle{
+		font-size: 16px;
+		margin: 0px 10px;
+		color: @textDark;
 	}
 
 	.figure{
@@ -217,11 +228,19 @@ body{
 	}
 
 	code{
-		width: 530px;
+		width: 495px;
 	}
 
-	.readmore{
-		/*text-align: center;*/
+	hr{
+		border: none;
+		border-top: 1px solid @textLight;
+		width: 80%;
+		margin: 0 auto;
+		padding: 15px 0;
+	}
+
+	.readmoreBtn{
+		margin-left: 10px;
 		padding-bottom: 20px;
 	}
 }
@@ -232,20 +251,18 @@ body{
 }
 
 .learnMore{
-	width: 100%;
-	min-width: @wideContent;
-	height: 300px;
 	background: @dark;
 	text-align: center;
 	position: relative;
+	padding: 120px 0;
+
+	h4.subtitle{
+		padding: 0;
+		margin-bottom: 30px;
+	}
 
 	.btnWrapper{
-		width: 100%;
 		text-align: center;
-		height: 60px;
-		margin-top: -30px;
-		position: absolute;
-		top:50%;
 	}
 }