diff --git a/index.html b/index.html
index a7d0513..280b22c 100644
--- a/index.html
+++ b/index.html
@@ -113,6 +113,17 @@
 							</p>
 						</div>
 						<div class="ft">
+							<div class="intro">
+								<h3>使用案例</h3>
+								<p class="q">1. 使用别称查询：</p>
+								<p class="a">姥姥的爸爸的老窦; 娘子的爹地的母亲; 岳丈的妈咪;</p>
+								<p class="q">2. 使用合称查询：</p>
+								<p class="a">舅舅的孙辈; 爸爸的祖父母; 姑妈的兄弟姐妹;</p>
+								<p class="q">4. 大小数字混合查询：</p>
+								<p class="a">儿子的大舅的二姑妈的七舅姥爷;</p>
+								<p class="q">3. 不限制方向祖辈孙辈跨度，反复查询：</p>
+								<p class="a">舅妈的婆婆的外甥的姨妈的侄子的爷爷;</p>
+							</div>
 							<div class="copy">
 								<p><a class="github-button" href="https://github.com/mumuy" data-style="mega" data-count-href="/mumuy/followers" data-count-api="/users/mumuy#followers" data-count-aria-label="# followers on GitHub" aria-label="Follow @mumuy on GitHub" rel="nofollow">Follow @mumuy</a>
 								<a class="github-button" href="https://github.com/mumuy/relationship" data-style="mega" data-count-href="/mumuy/relationship/stargazers" data-count-api="/repos/mumuy/relationship#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star mumuy/relationship on GitHub" rel="nofollow">Star</a></p>
diff --git a/style/index.css b/style/index.css
index 18d2421..014c450 100644
--- a/style/index.css
+++ b/style/index.css
@@ -130,6 +130,27 @@ a:hover{
 .mod-panel .copy p{
     line-height: 24px;
 }
+.mod-panel .intro{
+    padding:  15px 20px;
+    margin-bottom: 15px;
+    background: #f5f5f6;
+    border-radius: 6px;
+}
+.mod-panel .intro h3{
+    margin-bottom: 10px;
+    font-size: 16px;
+    font-weight: bold;
+}
+.mod-panel .intro p{
+    line-height: 22px;
+}
+.mod-panel .intro p.q{
+    font-weight: bold;
+}
+.mod-panel .intro p.a{
+    margin-bottom: 10px;
+    color: #666;
+}
 
 .mod-qrcode{
     position: fixed;