diff --git a/html/hello.html b/html/hello.html
index 8d1339c..0332e29 100644
--- a/html/hello.html
+++ b/html/hello.html
@@ -1,18 +1,589 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>
+<html>
+
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="../css/bootstrap.min.css">
-  <script src="../js/jquery.min.js"></script>
-  <script src="../js/bootstrap.min.js"></script>
-  <title>test</title>
+  <meta charset="utf-8" />
+  <title>hello</title>
+
+  <style>
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      background-color: #ffffff;
+    }
+
+    .markdown-body {
+      box-sizing: border-box;
+      min-width: 200px;
+      max-width: 980px;
+      margin: 0 auto;
+      padding: 45px;
+    }
+
+    @media (max-width: 767px) {
+      .markdown-body {
+        padding: 15px;
+      }
+    }
+
+    .markdown-body {
+      -ms-text-size-adjust: 100%;
+      -webkit-text-size-adjust: 100%;
+      line-height: 1.5;
+      color: #24292e;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+      ;
+      font-size: 16px;
+      line-height: 1.5;
+      word-wrap: break-word;
+    }
+
+    .markdown-body details {
+      display: block;
+    }
+
+    .markdown-body summary {
+      display: list-item;
+    }
+
+    .markdown-body a {
+      background-color: initial;
+    }
+
+    .markdown-body a:active,
+    .markdown-body a:hover {
+      outline-width: 0;
+    }
+
+    .markdown-body strong {
+      font-weight: inherit;
+      font-weight: bolder;
+    }
+
+    .markdown-body h1 {
+      font-size: 2em;
+      margin: .67em 0;
+    }
+
+    .markdown-body img {
+      border-style: none;
+    }
+
+    .markdown-body code,
+    .markdown-body kbd,
+    .markdown-body pre {
+      font-family: monospace, monospace;
+      font-size: 1em;
+    }
+
+    .markdown-body hr {
+      box-sizing: initial;
+      height: 0;
+      overflow: visible;
+    }
+
+    .markdown-body input {
+      font: inherit;
+      margin: 0;
+    }
+
+    .markdown-body input {
+      overflow: visible;
+    }
+
+    .markdown-body [type=checkbox] {
+      box-sizing: border-box;
+      padding: 0;
+    }
+
+    .markdown-body * {
+      box-sizing: border-box;
+    }
+
+    .markdown-body input {
+      font-family: inherit;
+      font-size: inherit;
+      line-height: inherit;
+    }
+
+    .markdown-body a {
+      color: #0366d6;
+      text-decoration: none;
+    }
+
+    .markdown-body a:hover {
+      text-decoration: underline;
+    }
+
+    .markdown-body strong {
+      font-weight: 600;
+    }
+
+    .markdown-body hr {
+      height: 0;
+      margin: 15px 0;
+      overflow: hidden;
+      background: transparent;
+      border: 0;
+      border-bottom: 1px solid #dfe2e5;
+    }
+
+    .markdown-body hr:after,
+    .markdown-body hr:before {
+      display: table;
+      content: "";
+    }
+
+    .markdown-body hr:after {
+      clear: both;
+    }
+
+    .markdown-body table {
+      border-spacing: 0;
+      border-collapse: collapse;
+    }
+
+    .markdown-body td,
+    .markdown-body th {
+      padding: 0;
+    }
+
+    .markdown-body details summary {
+      cursor: pointer;
+    }
+
+    .markdown-body kbd {
+      display: inline-block;
+      padding: 3px 5px;
+      font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+      line-height: 10px;
+      color: #444d56;
+      vertical-align: middle;
+      background-color: #fafbfc;
+      border: 1px solid #d1d5da;
+      border-radius: 3px;
+      box-shadow: inset 0 -1px 0 #d1d5da;
+    }
+
+    .markdown-body h1,
+    .markdown-body h2,
+    .markdown-body h3,
+    .markdown-body h4,
+    .markdown-body h5,
+    .markdown-body h6 {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    .markdown-body h1 {
+      font-size: 32px;
+    }
+
+    .markdown-body h1,
+    .markdown-body h2 {
+      font-weight: 600;
+    }
+
+    .markdown-body h2 {
+      font-size: 24px;
+    }
+
+    .markdown-body h3 {
+      font-size: 20px;
+    }
+
+    .markdown-body h3,
+    .markdown-body h4 {
+      font-weight: 600;
+    }
+
+    .markdown-body h4 {
+      font-size: 16px;
+    }
+
+    .markdown-body h5 {
+      font-size: 14px;
+    }
+
+    .markdown-body h5,
+    .markdown-body h6 {
+      font-weight: 600;
+    }
+
+    .markdown-body h6 {
+      font-size: 12px;
+    }
+
+    .markdown-body p {
+      margin-top: 0;
+      margin-bottom: 10px;
+    }
+
+    .markdown-body blockquote {
+      margin: 0;
+    }
+
+    .markdown-body ol,
+    .markdown-body ul {
+      padding-left: 0;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    .markdown-body ol ol,
+    .markdown-body ul ol {
+      list-style-type: lower-roman;
+    }
+
+    .markdown-body ol ol ol,
+    .markdown-body ol ul ol,
+    .markdown-body ul ol ol,
+    .markdown-body ul ul ol {
+      list-style-type: lower-alpha;
+    }
+
+    .markdown-body dd {
+      margin-left: 0;
+    }
+
+    .markdown-body code,
+    .markdown-body pre {
+      font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+      font-size: 12px;
+    }
+
+    .markdown-body pre {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    .markdown-body input::-webkit-inner-spin-button,
+    .markdown-body input::-webkit-outer-spin-button {
+      margin: 0;
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    .markdown-body :checked+.radio-label {
+      position: relative;
+      z-index: 1;
+      border-color: #0366d6;
+    }
+
+    .markdown-body hr {
+      border-bottom-color: #eee;
+    }
+
+    .markdown-body kbd {
+      display: inline-block;
+      padding: 3px 5px;
+      font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+      line-height: 10px;
+      color: #444d56;
+      vertical-align: middle;
+      background-color: #fafbfc;
+      border: 1px solid #d1d5da;
+      border-radius: 3px;
+      box-shadow: inset 0 -1px 0 #d1d5da;
+    }
+
+    .markdown-body:after,
+    .markdown-body:before {
+      display: table;
+      content: "";
+    }
+
+    .markdown-body:after {
+      clear: both;
+    }
+
+    .markdown-body>:first-child {
+      margin-top: 0 !important;
+    }
+
+    .markdown-body>:last-child {
+      margin-bottom: 0 !important;
+    }
+
+    .markdown-body a:not([href]) {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    .markdown-body blockquote,
+    .markdown-body details,
+    .markdown-body dl,
+    .markdown-body ol,
+    .markdown-body p,
+    .markdown-body pre,
+    .markdown-body table,
+    .markdown-body ul {
+      margin-top: 0;
+      margin-bottom: 16px;
+    }
+
+    .markdown-body hr {
+      height: .25em;
+      padding: 0;
+      margin: 24px 0;
+      background-color: #e1e4e8;
+      border: 0;
+    }
+
+    .markdown-body blockquote {
+      padding: 0 1em;
+      color: #6a737d;
+      border-left: .25em solid #dfe2e5;
+    }
+
+    .markdown-body blockquote>:first-child {
+      margin-top: 0;
+    }
+
+    .markdown-body blockquote>:last-child {
+      margin-bottom: 0;
+    }
+
+    .markdown-body h1,
+    .markdown-body h2,
+    .markdown-body h3,
+    .markdown-body h4,
+    .markdown-body h5,
+    .markdown-body h6 {
+      margin-top: 24px;
+      margin-bottom: 16px;
+      font-weight: 600;
+      line-height: 1.25;
+    }
+
+    .markdown-body h1 {
+      font-size: 2em;
+    }
+
+    .markdown-body h1,
+    .markdown-body h2 {
+      padding-bottom: .3em;
+      border-bottom: 1px solid #eaecef;
+    }
+
+    .markdown-body h2 {
+      font-size: 1.5em;
+    }
+
+    .markdown-body h3 {
+      font-size: 1.25em;
+    }
+
+    .markdown-body h4 {
+      font-size: 1em;
+    }
+
+    .markdown-body h5 {
+      font-size: .875em;
+    }
+
+    .markdown-body h6 {
+      font-size: .85em;
+      color: #6a737d;
+    }
+
+    .markdown-body ol,
+    .markdown-body ul {
+      padding-left: 2em;
+    }
+
+    .markdown-body ol ol,
+    .markdown-body ol ul,
+    .markdown-body ul ol,
+    .markdown-body ul ul {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    .markdown-body li {
+      word-wrap: break-all;
+    }
+
+    .markdown-body li>p {
+      margin-top: 16px;
+    }
+
+    .markdown-body li+li,
+    .markdown-body li>ul {
+      margin-top: .25em;
+    }
+
+    .markdown-body ul li.task-list-item {
+      position: relative;
+      appearance: none;
+      list-style: none;
+    }
+
+    .markdown-body ul li.task-list-item.checked {
+      text-decoration: line-through;
+      color: #bdbdbd;
+    }
+
+    .markdown-body ul li.task-list-item::before {
+      content: '';
+      width: 13px;
+      height: 13px;
+      background-color: #fff;
+      position: absolute;
+      left: -28px;
+      top: 4px;
+      border-radius: 2px;
+      border: 2px solid #757575;
+    }
+
+    .markdown-body ul li.task-list-item.checked::before {
+      background-color: #1976d2;
+      border-color: #1976d2;
+    }
+
+    .markdown-body ul li.task-list-item.checked::after {
+      content: '';
+      position: absolute;
+      left: -22px;
+      top: 5px;
+      width: 4px;
+      height: 10px;
+      border: solid #fff;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+
+    .markdown-body dl {
+      padding: 0;
+    }
+
+    .markdown-body dl dt {
+      padding: 0;
+      margin-top: 16px;
+      font-size: 1em;
+      font-style: italic;
+      font-weight: 600;
+    }
+
+    .markdown-body dl dd {
+      padding: 0 16px;
+      margin-bottom: 16px;
+    }
+
+    .markdown-body table {
+      display: block;
+      width: 100%;
+      overflow: auto;
+    }
+
+    .markdown-body table th {
+      font-weight: 600;
+    }
+
+    .markdown-body table td,
+    .markdown-body table th {
+      padding: 6px 13px;
+      border: 1px solid #dfe2e5;
+    }
+
+    .markdown-body table tr {
+      background-color: #fff;
+      border-top: 1px solid #c6cbd1;
+    }
+
+    .markdown-body table tr:nth-child(2n) {
+      background-color: #f6f8fa;
+    }
+
+    .markdown-body img {
+      max-width: 100%;
+      box-sizing: initial;
+      background-color: #fff;
+    }
+
+    .markdown-body img[align=right] {
+      padding-left: 20px;
+    }
+
+    .markdown-body img[align=left] {
+      padding-right: 20px;
+    }
+
+    .markdown-body code {
+      padding: .2em .4em;
+      margin: 0;
+      font-size: 85%;
+      background-color: rgba(27, 31, 35, .05);
+      border-radius: 3px;
+    }
+
+    .markdown-body pre {
+      word-wrap: normal;
+    }
+
+    .markdown-body pre>code {
+      padding: 0;
+      margin: 0;
+      font-size: 100%;
+      word-break: normal;
+      white-space: pre;
+      background: transparent;
+      border: 0;
+    }
+
+    .markdown-body pre {
+      padding: 16px;
+      overflow: auto;
+      font-size: 85%;
+      line-height: 1.45;
+      background-color: #f6f8fa;
+      border-radius: 3px;
+    }
+
+    .markdown-body pre code {
+      display: inline;
+      max-width: auto;
+      padding: 0;
+      margin: 0;
+      overflow: visible;
+      line-height: inherit;
+      word-wrap: normal;
+      background-color: initial;
+      border: 0;
+    }
+
+    .markdown-body mark {
+      background-color: #fff8c5;
+    }
+  </style>
 </head>
+
 <body>
+  <article class="markdown-body">
+    <h1>Hello World</h1>
+    <blockquote>
+      <p>该工具是我想打造的用来进行一些日常的调试工作的瑞士军刀，会把我的一些工作用的小功能集成进来</p>
+    </blockquote>
+    <h2>如何使用</h2>
+    <ul>
+      <li>点击导航栏上的下拉工具</li>
+      <li>选择对应的功能即可跳转至相应的页面</li>
+    </ul>
+    <h2>平台</h2>
+    <blockquote>
+      <p>因为是打算使用纯JS实现功能，所以应该是全平台通用</p>
+    </blockquote>
+    <ul>
+      <li>Linux：OK</li>
+      <li>Windows：OK</li>
+      <li>MacOS：OK</li>
+    </ul>
+    
+    <hr>
+    <div style="margin-left: 40%;"><img style="width: 20%;" src="../logo.png" alt=""></div>
 
-<div class="page-header">
-  <h1>Hello World!</h1>
-</div>
-
+  </article>
 </body>
+
 </html>
\ No newline at end of file
diff --git a/html/plan.html b/html/plan.html
new file mode 100644
index 0000000..3bbd051
--- /dev/null
+++ b/html/plan.html
@@ -0,0 +1,575 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <title>plan</title>
+
+  <style>
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      background-color: #ffffff;
+    }
+
+    .markdown-body {
+      box-sizing: border-box;
+      min-width: 200px;
+      max-width: 980px;
+      margin: 0 auto;
+      padding: 45px;
+    }
+
+    @media (max-width: 767px) {
+      .markdown-body {
+        padding: 15px;
+      }
+    }
+
+    .markdown-body {
+      -ms-text-size-adjust: 100%;
+      -webkit-text-size-adjust: 100%;
+      line-height: 1.5;
+      color: #24292e;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+      ;
+      font-size: 16px;
+      line-height: 1.5;
+      word-wrap: break-word;
+    }
+
+    .markdown-body details {
+      display: block;
+    }
+
+    .markdown-body summary {
+      display: list-item;
+    }
+
+    .markdown-body a {
+      background-color: initial;
+    }
+
+    .markdown-body a:active,
+    .markdown-body a:hover {
+      outline-width: 0;
+    }
+
+    .markdown-body strong {
+      font-weight: inherit;
+      font-weight: bolder;
+    }
+
+    .markdown-body h1 {
+      font-size: 2em;
+      margin: .67em 0;
+    }
+
+    .markdown-body img {
+      border-style: none;
+    }
+
+    .markdown-body code,
+    .markdown-body kbd,
+    .markdown-body pre {
+      font-family: monospace, monospace;
+      font-size: 1em;
+    }
+
+    .markdown-body hr {
+      box-sizing: initial;
+      height: 0;
+      overflow: visible;
+    }
+
+    .markdown-body input {
+      font: inherit;
+      margin: 0;
+    }
+
+    .markdown-body input {
+      overflow: visible;
+    }
+
+    .markdown-body [type=checkbox] {
+      box-sizing: border-box;
+      padding: 0;
+    }
+
+    .markdown-body * {
+      box-sizing: border-box;
+    }
+
+    .markdown-body input {
+      font-family: inherit;
+      font-size: inherit;
+      line-height: inherit;
+    }
+
+    .markdown-body a {
+      color: #0366d6;
+      text-decoration: none;
+    }
+
+    .markdown-body a:hover {
+      text-decoration: underline;
+    }
+
+    .markdown-body strong {
+      font-weight: 600;
+    }
+
+    .markdown-body hr {
+      height: 0;
+      margin: 15px 0;
+      overflow: hidden;
+      background: transparent;
+      border: 0;
+      border-bottom: 1px solid #dfe2e5;
+    }
+
+    .markdown-body hr:after,
+    .markdown-body hr:before {
+      display: table;
+      content: "";
+    }
+
+    .markdown-body hr:after {
+      clear: both;
+    }
+
+    .markdown-body table {
+      border-spacing: 0;
+      border-collapse: collapse;
+    }
+
+    .markdown-body td,
+    .markdown-body th {
+      padding: 0;
+    }
+
+    .markdown-body details summary {
+      cursor: pointer;
+    }
+
+    .markdown-body kbd {
+      display: inline-block;
+      padding: 3px 5px;
+      font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+      line-height: 10px;
+      color: #444d56;
+      vertical-align: middle;
+      background-color: #fafbfc;
+      border: 1px solid #d1d5da;
+      border-radius: 3px;
+      box-shadow: inset 0 -1px 0 #d1d5da;
+    }
+
+    .markdown-body h1,
+    .markdown-body h2,
+    .markdown-body h3,
+    .markdown-body h4,
+    .markdown-body h5,
+    .markdown-body h6 {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    .markdown-body h1 {
+      font-size: 32px;
+    }
+
+    .markdown-body h1,
+    .markdown-body h2 {
+      font-weight: 600;
+    }
+
+    .markdown-body h2 {
+      font-size: 24px;
+    }
+
+    .markdown-body h3 {
+      font-size: 20px;
+    }
+
+    .markdown-body h3,
+    .markdown-body h4 {
+      font-weight: 600;
+    }
+
+    .markdown-body h4 {
+      font-size: 16px;
+    }
+
+    .markdown-body h5 {
+      font-size: 14px;
+    }
+
+    .markdown-body h5,
+    .markdown-body h6 {
+      font-weight: 600;
+    }
+
+    .markdown-body h6 {
+      font-size: 12px;
+    }
+
+    .markdown-body p {
+      margin-top: 0;
+      margin-bottom: 10px;
+    }
+
+    .markdown-body blockquote {
+      margin: 0;
+    }
+
+    .markdown-body ol,
+    .markdown-body ul {
+      padding-left: 0;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    .markdown-body ol ol,
+    .markdown-body ul ol {
+      list-style-type: lower-roman;
+    }
+
+    .markdown-body ol ol ol,
+    .markdown-body ol ul ol,
+    .markdown-body ul ol ol,
+    .markdown-body ul ul ol {
+      list-style-type: lower-alpha;
+    }
+
+    .markdown-body dd {
+      margin-left: 0;
+    }
+
+    .markdown-body code,
+    .markdown-body pre {
+      font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+      font-size: 12px;
+    }
+
+    .markdown-body pre {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    .markdown-body input::-webkit-inner-spin-button,
+    .markdown-body input::-webkit-outer-spin-button {
+      margin: 0;
+      -webkit-appearance: none;
+      appearance: none;
+    }
+
+    .markdown-body :checked+.radio-label {
+      position: relative;
+      z-index: 1;
+      border-color: #0366d6;
+    }
+
+    .markdown-body hr {
+      border-bottom-color: #eee;
+    }
+
+    .markdown-body kbd {
+      display: inline-block;
+      padding: 3px 5px;
+      font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+      line-height: 10px;
+      color: #444d56;
+      vertical-align: middle;
+      background-color: #fafbfc;
+      border: 1px solid #d1d5da;
+      border-radius: 3px;
+      box-shadow: inset 0 -1px 0 #d1d5da;
+    }
+
+    .markdown-body:after,
+    .markdown-body:before {
+      display: table;
+      content: "";
+    }
+
+    .markdown-body:after {
+      clear: both;
+    }
+
+    .markdown-body>:first-child {
+      margin-top: 0 !important;
+    }
+
+    .markdown-body>:last-child {
+      margin-bottom: 0 !important;
+    }
+
+    .markdown-body a:not([href]) {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    .markdown-body blockquote,
+    .markdown-body details,
+    .markdown-body dl,
+    .markdown-body ol,
+    .markdown-body p,
+    .markdown-body pre,
+    .markdown-body table,
+    .markdown-body ul {
+      margin-top: 0;
+      margin-bottom: 16px;
+    }
+
+    .markdown-body hr {
+      height: .25em;
+      padding: 0;
+      margin: 24px 0;
+      background-color: #e1e4e8;
+      border: 0;
+    }
+
+    .markdown-body blockquote {
+      padding: 0 1em;
+      color: #6a737d;
+      border-left: .25em solid #dfe2e5;
+    }
+
+    .markdown-body blockquote>:first-child {
+      margin-top: 0;
+    }
+
+    .markdown-body blockquote>:last-child {
+      margin-bottom: 0;
+    }
+
+    .markdown-body h1,
+    .markdown-body h2,
+    .markdown-body h3,
+    .markdown-body h4,
+    .markdown-body h5,
+    .markdown-body h6 {
+      margin-top: 24px;
+      margin-bottom: 16px;
+      font-weight: 600;
+      line-height: 1.25;
+    }
+
+    .markdown-body h1 {
+      font-size: 2em;
+    }
+
+    .markdown-body h1,
+    .markdown-body h2 {
+      padding-bottom: .3em;
+      border-bottom: 1px solid #eaecef;
+    }
+
+    .markdown-body h2 {
+      font-size: 1.5em;
+    }
+
+    .markdown-body h3 {
+      font-size: 1.25em;
+    }
+
+    .markdown-body h4 {
+      font-size: 1em;
+    }
+
+    .markdown-body h5 {
+      font-size: .875em;
+    }
+
+    .markdown-body h6 {
+      font-size: .85em;
+      color: #6a737d;
+    }
+
+    .markdown-body ol,
+    .markdown-body ul {
+      padding-left: 2em;
+    }
+
+    .markdown-body ol ol,
+    .markdown-body ol ul,
+    .markdown-body ul ol,
+    .markdown-body ul ul {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    .markdown-body li {
+      word-wrap: break-all;
+    }
+
+    .markdown-body li>p {
+      margin-top: 16px;
+    }
+
+    .markdown-body li+li,
+    .markdown-body li>ul {
+      margin-top: .25em;
+    }
+
+    .markdown-body ul li.task-list-item {
+      position: relative;
+      appearance: none;
+      list-style: none;
+    }
+
+    .markdown-body ul li.task-list-item.checked {
+      text-decoration: line-through;
+      color: #bdbdbd;
+    }
+
+    .markdown-body ul li.task-list-item::before {
+      content: '';
+      width: 13px;
+      height: 13px;
+      background-color: #fff;
+      position: absolute;
+      left: -28px;
+      top: 4px;
+      border-radius: 2px;
+      border: 2px solid #757575;
+    }
+
+    .markdown-body ul li.task-list-item.checked::before {
+      background-color: #1976d2;
+      border-color: #1976d2;
+    }
+
+    .markdown-body ul li.task-list-item.checked::after {
+      content: '';
+      position: absolute;
+      left: -22px;
+      top: 5px;
+      width: 4px;
+      height: 10px;
+      border: solid #fff;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+
+    .markdown-body dl {
+      padding: 0;
+    }
+
+    .markdown-body dl dt {
+      padding: 0;
+      margin-top: 16px;
+      font-size: 1em;
+      font-style: italic;
+      font-weight: 600;
+    }
+
+    .markdown-body dl dd {
+      padding: 0 16px;
+      margin-bottom: 16px;
+    }
+
+    .markdown-body table {
+      display: block;
+      width: 100%;
+      overflow: auto;
+    }
+
+    .markdown-body table th {
+      font-weight: 600;
+    }
+
+    .markdown-body table td,
+    .markdown-body table th {
+      padding: 6px 13px;
+      border: 1px solid #dfe2e5;
+    }
+
+    .markdown-body table tr {
+      background-color: #fff;
+      border-top: 1px solid #c6cbd1;
+    }
+
+    .markdown-body table tr:nth-child(2n) {
+      background-color: #f6f8fa;
+    }
+
+    .markdown-body img {
+      max-width: 100%;
+      box-sizing: initial;
+      background-color: #fff;
+    }
+
+    .markdown-body img[align=right] {
+      padding-left: 20px;
+    }
+
+    .markdown-body img[align=left] {
+      padding-right: 20px;
+    }
+
+    .markdown-body code {
+      padding: .2em .4em;
+      margin: 0;
+      font-size: 85%;
+      background-color: rgba(27, 31, 35, .05);
+      border-radius: 3px;
+    }
+
+    .markdown-body pre {
+      word-wrap: normal;
+    }
+
+    .markdown-body pre>code {
+      padding: 0;
+      margin: 0;
+      font-size: 100%;
+      word-break: normal;
+      white-space: pre;
+      background: transparent;
+      border: 0;
+    }
+
+    .markdown-body pre {
+      padding: 16px;
+      overflow: auto;
+      font-size: 85%;
+      line-height: 1.45;
+      background-color: #f6f8fa;
+      border-radius: 3px;
+    }
+
+    .markdown-body pre code {
+      display: inline;
+      max-width: auto;
+      padding: 0;
+      margin: 0;
+      overflow: visible;
+      line-height: inherit;
+      word-wrap: normal;
+      background-color: initial;
+      border: 0;
+    }
+
+    .markdown-body mark {
+      background-color: #fff8c5;
+    }
+  </style>
+</head>
+
+<body>
+  <article class="markdown-body">
+    <h1>plan</h1>
+    <br />
+    <h2>音频</h2>
+    <ul>
+      <li class="task-list-item checked"> PCM数据转换：将原始的16bit的PCM数据转换成十进制的幅度值</li>
+    </ul>
+    <h2>文本操作</h2>
+
+  </article>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/html/uac_pcm_data_convert.html b/html/uac_pcm_data_convert.html
index fa84e0f..119a4ad 100644
--- a/html/uac_pcm_data_convert.html
+++ b/html/uac_pcm_data_convert.html
@@ -22,9 +22,18 @@
     </div>
   </form>
   
-  <p>
-    <button type="button" class="btn btn-primary btn-lg btn-block" href = "javascript:void(0);" onclick="convert_usb_pcm_data()">运行</button>
-  </p>
+  <div class="btn-toolbar" role="toolbar">
+    <button type="button" class="btn btn-primary" href="javascript:void(0);" onclick="convert_usb_pcm_data()">
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      运行
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+    </button>
+    <div class="btn-group">
+      <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal_of_how_to_use_pcm_uac_data_convert">如何使用</button>
+    </div>
+  </div>
   
   <form role="form">
     <div class="form-group">
@@ -34,6 +43,28 @@
   </form>
 </div>
 
+
+<!-- 模态框（Modal） 如何使用 -->
+<div class="modal fade" id="modal_of_how_to_use_pcm_uac_data_convert" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
+	<div class="modal-dialog">
+		<div class="modal-content">
+			<div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+					&times;
+				</button>
+				<h4 class="modal-title" id="myModalLabel">
+					<b>如何使用</b>
+				</h4>
+			</div>
+			<div class="modal-body">
+				<p>在上方的窗口输入原始的PCM数据，然后点击中间的运行按钮，然后在下方的窗口会输出所有的转换数据和PCM最大值</p>
+        <hr>
+        <p>点击右上方或者面板外退出</p>
+			</div>
+		</div><!-- /.modal-content -->
+	</div><!-- /.modal -->
+</div>
+
 </body>
 
 <script>
diff --git a/index.html b/index.html
index 56e9749..14eab20 100644
--- a/index.html
+++ b/index.html
@@ -14,14 +14,16 @@
 <nav class="navbar navbar-default" role="navigation">
   <div class="container-fluid"> 
   <div class="navbar-header">
-    <a class="navbar-brand" href = "javascript:void(0);" onclick ="switch_pages_by_file_path('html/hello.html')">impressionyang的工具箱</a>
+    <a class="navbar-brand" href = "javascript:void(0);" onclick ="switch_pages_by_file_path('html/hello.html')">
+      <span class="glyphicon glyphicon-home" aria-hidden="true"></span> impressionyang的工具箱</a>
   </div>
   <div>
     <ul class="nav navbar-nav">
-      <li class="active"><a href="#">计划</a></li>
+      <li class=""><a href = "javascript:void(0);" onclick ="switch_pages_by_file_path('html/plan.html')">
+        <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 计划</a></li>
       <li class="dropdown">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-          功能 
+          <span class="glyphicon glyphicon-headphones" aria-hidden="true"></span> 音频功能 
           <b class="caret"></b>
         </a>
         <ul class="dropdown-menu">
