updated 链接关联

index.html

@@ -46,6 +46,16 @@
 							<p>行政区划共有<b>34</b>个省级行政区，包含<b>23</b>个省、<b>5</b>个自治区、<b>4</b>个直辖市、<b>2</b>个特别行政区<p>
 							<p>其中大陆地区地级行政区有<b class="city1">-</b>个地级市、<b class="city2">-</b>个地区、<b class="city3">-</b>个自治州、<b class="city4">-</b>个盟</p>
 							<p>县级行政区有<b class="county1">-</b>个市辖区、<b class="county2">-</b>个县级市、<b class="county3">-</b>个县、<b class="county4">-</b>个自治县、<b class="county5">-</b>个旗、<b class="county6">-</b>个自治旗、<b class="county7">-</b>个特区、<b class="county8">-</b>个林区</p>
+							<div class="buttons">
+                                <a class="btn btn-blue" href="https://passer-by.com/widget-region/" target="_blank">
+                                    <img src="./static/image/icon-selector.png" width="24" height="24">
+                                    <span>行政区划选择器</span>
+                                </a>
+                                <a class="btn btn-orange" href="https://passer-by.com/idcard/" target="_blank">
+                                    <img src="./static/image/icon-idcard.png" width="24" height="24">
+                                    <span>身份证号码解析</span>
+                                </a>
+                            </div>
 						</div>
 						<div class="bd">
 							<div id="location" class="box">

static/style/index.css

@@ -118,10 +118,63 @@ a:hover{
     border-radius: 4px;
     box-shadow: 0 1px 5px 0 rgba(0,0,0,0.03);
 }
-.mod-panel .hd p{
+.mod-panel .hd p {
     line-height: 26px;
     font-size: 15px;
 }
+.mod-panel .hd .buttons{
+    margin-top: 10px;
+    margin-bottom: 20px;
+    padding: 10px;
+    border-radius: 6px;
+    line-height: 32px;
+}
+.mod-panel .hd .btn {
+    display: inline-block;
+    height: 44px;
+    min-width: 120px;
+    padding:0 20px;
+    margin: 0 5px;
+    background: #2095f2;
+    border: medium none;
+    box-shadow: 2px 2px 4px rgba(0,0,0,0.05);
+    line-height: 42px;
+    text-align: center;
+    vertical-align: middle;
+    font-size: 16px;
+    color: #fff;
+    cursor: pointer;
+    outline: none;
+    border-radius: 21px;
+    text-decoration: none;
+}
+.mod-panel .hd .btn img,.mod-panel .hd .btn span{
+    vertical-align: middle;
+}
+.mod-panel .hd .btn:hover{
+	background: #1b85da;
+}
+.mod-panel .hd .btn-green{
+	background: #4bae4f;
+	color: #fff;
+}
+.mod-panel .hd .btn-green:hover{
+	background: #47a04b;
+}
+.mod-panel .hd .btn-red{
+	background: #f56954;
+	color: #fff;
+}
+.mod-panel .hd .btn-red:hover{
+	background: #f4543c;;
+}
+.mod-panel .hd .btn-orange{
+	background: #ff9000;
+	color: #fff;
+}
+.mod-panel .hd .btn-orange:hover{
+	background: #e18309;
+}
 .mod-panel .hd b{
 	margin: 0 3px;
 	color: #fd7474;