diff --git a/demos/calendar.html b/demos/calendar.html
index 26b8bd9..be45d2d 100644
--- a/demos/calendar.html
+++ b/demos/calendar.html
@@ -3,22 +3,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <title>Calendar</title>
-
-  <div class="page">
-    <nav>
-      <h1 class="date"></h1>
-      <div class="controls">
-        <button id="previousMonth">&lt;</button>
-        <button id="today">今天</button>
-        <button id="nextMonth">&gt;</button>
-      </div>
-    </nav>
-    <div class="calendar"></div>
-  </div>
-  <script src="../lib/dom/index.js"></script>
-  <script src="view-source.js"></script>
-  <script src="../lib/date2/index.js"></script>
-  <script src="../lib/calendar/index.js"></script>
   <style>
     body{margin:0;}      
     * {box-sizing: border-box;}
@@ -48,6 +32,22 @@ <h1 class="date"></h1>
     .calendar .days .previousMonth,
     .calendar .days .nextMonth{ color: #C3C3C3; }
   </style>
+
+  <div class="page">
+    <nav>
+      <h1 class="date"></h1>
+      <div class="controls">
+        <button id="previousMonth">&lt;</button>
+        <button id="today">今天</button>
+        <button id="nextMonth">&gt;</button>
+      </div>
+    </nav>
+    <div class="calendar"></div>
+  </div>
+  <script src="../lib/dom/index.js"></script>
+  <script src="view-source.js"></script>
+  <script src="../lib/date2/index.js"></script>
+  <script src="../lib/calendar/index.js"></script>
   <script>
     let calendar = new Calendar({
       element: document.querySelector('.calendar'),
diff --git a/demos/fullpage.html b/demos/fullpage.html
index 6bf64b7..a60d3c1 100644
--- a/demos/fullpage.html
+++ b/demos/fullpage.html
@@ -3,6 +3,15 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <title>Fullpage</title>
+  <style>
+    body{ margin:0; color: #0F0E0D; }
+    .page{ height: 100vh; }
+    section{ height: 100vh; display: flex; justify-content: center; align-items: center; font-size: 20vh; }
+    section:nth-child(1){ background: #F1AF22; }
+    section:nth-child(2){ background: #356ADA; }
+    section:nth-child(3){ background: #D82220; }
+    section:nth-child(4){ background: #08AA37; }
+  </style>
   <div class="page">
     <section>
       <div class="circle">1</div>
@@ -21,15 +30,6 @@
   <script src="../lib/dom/index.js"></script>
   <script src="view-source.js"></script>
   <script src="../lib/fullpage/index.js"></script>
-  <style>
-    body{ margin:0; color: #0F0E0D; }
-    .page{ height: 100vh; }
-    section{ height: 100vh; display: flex; justify-content: center; align-items: center; font-size: 20vh; }
-    section:nth-child(1){ background: #F1AF22; }
-    section:nth-child(2){ background: #356ADA; }
-    section:nth-child(3){ background: #D82220; }
-    section:nth-child(4){ background: #08AA37; }
-  </style>
   <script>
     new FullPage({
       element: document.querySelector('body > .page')
diff --git a/demos/image-picker.html b/demos/image-picker.html
index 546bbe7..f30d7d9 100644
--- a/demos/image-picker.html
+++ b/demos/image-picker.html
@@ -9,17 +9,6 @@
     .card { background: white; width: 20em; height: 80vh; box-shadow: 0 0 5px hsla(0,0%,0%,0.95); border-radius: 2px;
       display: flex; justify-content: flex-start; align-items: center; padding-top: 3em; flex-direction: column;}
   </style>
-
-
-  <div class="card">
-    <div class="image-picker">
-      <img src="https://avatars0.githubusercontent.com/u/839559" width=100 height=100>
-    </div>
-    <p>点击图片编辑</p>
-  </div>
-  <script src="../lib/dom/index.js"></script>
-  <script src="view-source.js"></script>
-  <script src="../lib/image-picker/index.js"></script>
   <style>
     .image-picker{ width: 100px; height: 100px; border-radius: 50%; overflow: hidden; position: relative; }
     .image-picker::after{
@@ -41,6 +30,17 @@
       content:'处理中'; background: hsla(0,0%,0%,0.2);
     }
   </style>
+
+
+  <div class="card">
+    <div class="image-picker">
+      <img src="https://avatars0.githubusercontent.com/u/839559" width=100 height=100>
+    </div>
+    <p>点击图片编辑</p>
+  </div>
+  <script src="../lib/dom/index.js"></script>
+  <script src="view-source.js"></script>
+  <script src="../lib/image-picker/index.js"></script>
   <script>
     new ImagePicker({
       element: document.querySelector('.image-picker'),
diff --git a/demos/pager.html b/demos/pager.html
index 3f7b810..ae5adcf 100644
--- a/demos/pager.html
+++ b/demos/pager.html
@@ -3,24 +3,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <title>Pager</title>
-
-
-  <div>
-    <p>
-      这个分页器会在控制台打印出页数
-    </p>
-    <div class="pager"> </div>
-  </div>
-  <div>
-    <p>
-      这个分页器会改变 url
-    </p>
-    <div class="pager"> </div>
-  </div>
-  <script src="../lib/dom/index.js"></script>
-  <script src="view-source.js"></script>
-  <script src="../lib/bom/index.js"></script>
-  <script src="../lib/pager/index.js"></script>
   <style>
     body{ background: #E7E7E7; }
     ol{ list-style:none; margin:0;padding:0; }
@@ -48,6 +30,24 @@
     .pager>nav>ol[data-role="pageNumbers"]>li.current{ background: linear-gradient(to bottom, #DADADA 0%, #D0D0D0 100%); margin: .2em; }
 
   </style>
+
+
+  <div>
+    <p>
+      这个分页器会在控制台打印出页数
+    </p>
+    <div class="pager"> </div>
+  </div>
+  <div>
+    <p>
+      这个分页器会改变 url
+    </p>
+    <div class="pager"> </div>
+  </div>
+  <script src="../lib/dom/index.js"></script>
+  <script src="view-source.js"></script>
+  <script src="../lib/bom/index.js"></script>
+  <script src="../lib/pager/index.js"></script>
   <script>
     let pagers = document.querySelectorAll('.pager')
     new Pager({
diff --git a/demos/tabs.html b/demos/tabs.html
index 4f956b9..909f3dd 100644
--- a/demos/tabs.html
+++ b/demos/tabs.html
@@ -3,6 +3,27 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <title>Tabs</title>
+  <style>
+    body{ background: #E2DED2; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; }
+    *{ box-sizing: border-box; }
+    .wrapper{ margin-top: 3em; position: relative; border-radius: 4px; padding: 8px; width: 460px;
+      background: repeating-linear-gradient( -45deg, #D7D3C7, #D7D3C7 2px, #CECABE 2px, #CECABE 4px); }
+    .wrapper::before{ content:'';display: block;position: absolute;top: -2px; bottom: -2px; left: -2px; right: -2px;
+      border: 1px solid #CBC7BC; border-radius: 6px; z-index: -1; }
+    .tabs{ background: #F2F1EC; }
+    .tabs ol{ list-style: none;  margin: 0; padding: 0; }
+    .tabs ol:first-child{ display: flex; border: 1px solid #B8B3AE; border-bottom: none; }
+    .tabs ol:first-child>li{ flex-grow: 1; padding: 20px; text-align: center; text-transform: uppercase;
+      background: linear-gradient(to bottom, #e5dfd3 0%,#d0c9b8 100%); color: #847E6F; text-shadow: 1px 1px 1px white;
+      box-shadow: inset 0 0 2px hsla(0,0%,0%,0.15); }
+    .tabs ol:first-child>li.active{ background: linear-gradient(to bottom, white 0%,#F0EDE6 100%);
+      color: #222222; box-shadow: none; }
+    .tabs ol:nth-child(2){ border: 1px solid #B8B3AE; border-top: none; background: #F0EDE6; }
+    .tabs ol:nth-child(2) > li{ display: none; min-height: 5em; }
+    .tabs ol:nth-child(2) > li.active{ display: flex; justify-content: center; align-items: center; }
+    .circle{ width: 80px; height: 80px; border-radius: 50%; background: #DFDCD3;
+      display: flex; justify-content: center; align-items: center; font-size: 28px; color:#333; margin: 5em 0; }
+  </style>
 
   <div class="wrapper">
     <div class="tabs">
@@ -28,27 +49,6 @@
   <script src="../lib/dom/index.js"></script>
   <script src="view-source.js"></script>
   <script src="../lib/tabs/index.js"></script>
-  <style>
-    body{ background: #E2DED2; display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; }
-    *{ box-sizing: border-box; }
-    .wrapper{ margin-top: 3em; position: relative; border-radius: 4px; padding: 8px; width: 460px;
-      background: repeating-linear-gradient( -45deg, #D7D3C7, #D7D3C7 2px, #CECABE 2px, #CECABE 4px); }
-    .wrapper::before{ content:'';display: block;position: absolute;top: -2px; bottom: -2px; left: -2px; right: -2px;
-      border: 1px solid #CBC7BC; border-radius: 6px; z-index: -1; }
-    .tabs{ background: #F2F1EC; }
-    .tabs ol{ list-style: none;  margin: 0; padding: 0; }
-    .tabs ol:first-child{ display: flex; border: 1px solid #B8B3AE; border-bottom: none; }
-    .tabs ol:first-child>li{ flex-grow: 1; padding: 20px; text-align: center; text-transform: uppercase;
-      background: linear-gradient(to bottom, #e5dfd3 0%,#d0c9b8 100%); color: #847E6F; text-shadow: 1px 1px 1px white;
-      box-shadow: inset 0 0 2px hsla(0,0%,0%,0.15); }
-    .tabs ol:first-child>li.active{ background: linear-gradient(to bottom, white 0%,#F0EDE6 100%);
-      color: #222222; box-shadow: none; }
-    .tabs ol:nth-child(2){ border: 1px solid #B8B3AE; border-top: none; background: #F0EDE6; }
-    .tabs ol:nth-child(2) > li{ display: none; min-height: 5em; }
-    .tabs ol:nth-child(2) > li.active{ display: flex; justify-content: center; align-items: center; }
-    .circle{ width: 80px; height: 80px; border-radius: 50%; background: #DFDCD3;
-      display: flex; justify-content: center; align-items: center; font-size: 28px; color:#333; margin: 5em 0; }
-  </style>
   <script>
     new Tabs({
       element: document.querySelectorAll('.tabs')[0]