diff --git a/content.json b/content.json
new file mode 100644
index 0000000..745e065
--- /dev/null
+++ b/content.json
@@ -0,0 +1,7 @@
+[
+	{
+		"title": "笔记1",
+		"date": "2019-09-19$1",
+		"hasCode": false
+	}
+]
\ No newline at end of file
diff --git a/content/html/2019-09-19$1.html b/content/html/2019-09-19$1.html
new file mode 100644
index 0000000..9a1c217
--- /dev/null
+++ b/content/html/2019-09-19$1.html
@@ -0,0 +1,9 @@
+<span>笔记1：首字下沉的技巧</span>
+<p>在浏览网页的时候我们时常会看到一段文字的第一个字有下沉的效果。那么是如何实现的那？下面小编给大家分享一下CSS如何实现首字下沉效果</p>
+<p>首先准备一个HTML文档，然后在文档中准备好一段文字，如下图所示</p>
+<img src="images/note1/1.jpg" alt="截图1">
+<p>接下来就去除浏览器的间隙，将margin以及padding都设置为0。然后设置body的样式，如下图所示设置字体以及字体颜色样式接下来就是设置文字段落的样式了，设置行间距，段落宽度等。然后定位到p元素的first-child，然后找到其第一个字，这里用到的是first-letter，如下图所示
+</p>
+<img src="images/note1/2.jpg" alt="截图2">
+<p>最后我们运行以后，你会看到如下图所示的效果，第一个字是不是下沉了</p>
+<p>综上所述，实现首字下沉效果主要运用了CSS的first-letter选择器，给其添加样式即可</p>
\ No newline at end of file
diff --git a/css/myui.css b/css/myui.css
index 589c1a0..8a4201a 100644
--- a/css/myui.css
+++ b/css/myui.css
@@ -170,7 +170,6 @@ body {
 	width: 100%;
 	position: relative;
 	padding: 50px 20px 25px;
-	overflow-y: scroll;
 	transition: padding .5s ease .1s;
 	left: 50%;
 	transform:translateX(-50%)
diff --git a/index.html b/index.html
index 8bd09da..024961b 100644
--- a/index.html
+++ b/index.html
@@ -32,40 +32,13 @@
         </label>
 
         <div class="content-border">
-            <div class="content">
-                <span>笔记1：首字下沉的技巧</span>
-                <p>在浏览网页的时候我们时常会看到一段文字的第一个字有下沉的效果。那么是如何实现的那？下面小编给大家分享一下CSS如何实现首字下沉效果</p>
-                <p>首先准备一个HTML文档，然后在文档中准备好一段文字，如下图所示</p>
-                <img src="images/note1/1.jpg" alt="截图1">
-                <p>接下来就去除浏览器的间隙，将margin以及padding都设置为0。然后设置body的样式，如下图所示设置字体以及字体颜色样式接下来就是设置文字段落的样式了，设置行间距，段落宽度等。然后定位到p元素的first-child，然后找到其第一个字，这里用到的是first-letter，如下图所示
-                </p>
-                <img src="images/note1/2.jpg" alt="截图2">
-                <p>最后我们运行以后，你会看到如下图所示的效果，第一个字是不是下沉了</p>
-                <p>综上所述，实现首字下沉效果主要运用了CSS的first-letter选择器，给其添加样式即可</p>
-            </div>
-            <div class="content">
-                <span>笔记2：css选择器</span>
-                <p>有时候我们会想选择众多兄弟元素中特定次序的元素，这个怎么通过css来选中呢？这里有个技巧，就是巧用css的child选择器</p>
-                <p>1、first-child</p>
-                <p>first-child表示选择列表中的第一个标签。代码如下：
-                    <pre><code></code></pre>
-            </div>
-            <div class="content">
-                <span>笔记3</span>
-
-            </div>
-            <div class="content">
-                <span>笔记4</span>
-
-            </div>
+            <!--文章-->
             <div class="sidebar-border">
                 <div class="sidebar">
                     <div>
                         往期回顾
                     </div>
-                    <div>
-                        content 2
-                    </div>
+                    <!--列表-->
                 </div>
             </div>
         </div>
@@ -74,7 +47,7 @@
     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
     <script src="js/drag.js"></script>
     <script src="js/initialize.js"></script>
-    <script src="js/main.js"></script>
+    <script src="js/index.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
new file mode 100644
index 0000000..595841b
--- /dev/null
+++ b/js/index.js
@@ -0,0 +1,32 @@
+// $.ajax({
+// 	type:"GET",
+// 	url:"https://javacloud.bmob.cn/0104a7ae840e3555/counter?name=wcx",
+// 	async:true,
+// 	success:function(res){
+// 		message.alert('提示',res);
+// 	},
+// 	error:function(){
+// 		message.alert('提示','error!');
+// 	}
+// });
+
+
+$.ajax({
+	type: "GET",
+	url: "content.json",
+	dataType: "json",
+	success: function (response) {
+		var lastIndex = response.length - 1;
+
+		if (response[lastIndex]['hasCode'] == true)
+			loadScript('content/js/' + response[lastIndex]['date'] + '.js');
+
+		$.ajax({
+			type: "GET",
+			url: 'content/html/' + response[lastIndex]['date'] + '.html',
+			success: function (response) {
+				appendContent(response);
+			}
+		});
+	}
+});
\ No newline at end of file
diff --git a/js/initialize.js b/js/initialize.js
index ba41b7d..d7b81d6 100644
--- a/js/initialize.js
+++ b/js/initialize.js
@@ -78,6 +78,29 @@ var message = new function () {
 	}
 }
 
+function loadScript(url, callback){
+	var script = document.createElement('script');
+	script.src = url;
+	document.head.appendChild(script);
+	if(callback)
+		callback();
+}
+
+function loadCss(url, callback){
+	var css = document.createElement('link');
+	css.rel = 'stylesheet';
+	css.href = url;
+	document.head.appendChild(css);
+	if(callback)
+		callback();
+}
+
+function appendContent(content){
+	var div = $('<div class="content">');
+	div.append(content);
+	$('.content-border').prepend(div);
+}
+
 function uuid() {
 	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
 		var r = Math.random() * 16 | 0,
@@ -190,4 +213,6 @@ function Base64() {
 		}
 		return string;
 	}
-}
\ No newline at end of file
+}
+
+console.log('\n' + base64.decode('4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paE4paR4paRCuKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkOKWiOKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWhOKWgOKWkuKWjOKWkQrilpHilpHilpHilpHilpHilpHilpHilpHilpDiloDilpLilojilpHilpHilpHilpHilpHilpHilpHilpHiloTiloDilpLilpLilpLilpAK4paR4paR4paR4paR4paR4paR4paR4paQ4paE4paA4paS4paS4paA4paA4paA4paA4paE4paE4paE4paA4paS4paS4paS4paS4paS4paQCuKWkeKWkeKWkeKWkeKWkeKWhOKWhOKWgOKWkuKWkeKWkuKWkuKWkuKWkuKWkuKWkuKWkuKWkuKWkuKWiOKWkuKWkuKWhOKWiOKWkuKWkArilpHilpHilpHiloTiloDilpLilpLilpLilpHilpHilpHilpLilpLilpLilpHilpHilpHilpLilpLilpLiloDilojilojiloDilpLilowK4paR4paR4paQ4paS4paS4paS4paE4paE4paS4paS4paS4paS4paR4paR4paR4paS4paS4paS4paS4paS4paS4paS4paA4paE4paS4paSCuKWkeKWkeKWjOKWkeKWkeKWjOKWiOKWgOKWkuKWkuKWkuKWkuKWkuKWhOKWgOKWiOKWhOKWkuKWkuKWkuKWkuKWkuKWkuKWkuKWiOKWkuKWkArilpHilpDilpHilpHilpHilpLilpLilpLilpLilpLilpLilpLilpLilozilojilojiloDilpLilpLilpHilpHilpHilpLilpLilpLiloDiloQK4paR4paM4paR4paS4paE4paI4paI4paE4paS4paS4paS4paS4paS4paS4paS4paS4paS4paR4paR4paR4paR4paR4paR4paS4paS4paS4paSCuKWgOKWkuKWgOKWkOKWhOKWiOKWhOKWiOKWjOKWhOKWkeKWgOKWkuKWkuKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkuKWkuKWkgrljZXouqvni5flsLHov5nmoLfpu5jpu5jlnLDnnIvnnYDkvaDvvIzkuIDlj6Xor53kuZ/kuI3or7TjgII='));
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
deleted file mode 100644
index e29304a..0000000
--- a/js/main.js
+++ /dev/null
@@ -1,13 +0,0 @@
-// $.ajax({
-// 	type:"GET",
-// 	url:"https://javacloud.bmob.cn/0104a7ae840e3555/counter?name=wcx",
-// 	async:true,
-// 	success:function(res){
-// 		message.alert('提示',res);
-// 	},
-// 	error:function(){
-// 		message.alert('提示','error!');
-// 	}
-// });
-
-console.log('\n' + base64.decode('4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paR4paE4paR4paRCuKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkOKWiOKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWhOKWgOKWkuKWjOKWkQrilpHilpHilpHilpHilpHilpHilpHilpHilpDiloDilpLilojilpHilpHilpHilpHilpHilpHilpHilpHiloTiloDilpLilpLilpLilpAK4paR4paR4paR4paR4paR4paR4paR4paQ4paE4paA4paS4paS4paA4paA4paA4paA4paE4paE4paE4paA4paS4paS4paS4paS4paS4paQCuKWkeKWkeKWkeKWkeKWkeKWhOKWhOKWgOKWkuKWkeKWkuKWkuKWkuKWkuKWkuKWkuKWkuKWkuKWkuKWiOKWkuKWkuKWhOKWiOKWkuKWkArilpHilpHilpHiloTiloDilpLilpLilpLilpHilpHilpHilpLilpLilpLilpHilpHilpHilpLilpLilpLiloDilojilojiloDilpLilowK4paR4paR4paQ4paS4paS4paS4paE4paE4paS4paS4paS4paS4paR4paR4paR4paS4paS4paS4paS4paS4paS4paS4paA4paE4paS4paSCuKWkeKWkeKWjOKWkeKWkeKWjOKWiOKWgOKWkuKWkuKWkuKWkuKWkuKWhOKWgOKWiOKWhOKWkuKWkuKWkuKWkuKWkuKWkuKWkuKWiOKWkuKWkArilpHilpDilpHilpHilpHilpLilpLilpLilpLilpLilpLilpLilpLilozilojilojiloDilpLilpLilpHilpHilpHilpLilpLilpLiloDiloQK4paR4paM4paR4paS4paE4paI4paI4paE4paS4paS4paS4paS4paS4paS4paS4paS4paS4paR4paR4paR4paR4paR4paR4paS4paS4paS4paSCuKWgOKWkuKWgOKWkOKWhOKWiOKWhOKWiOKWjOKWhOKWkeKWgOKWkuKWkuKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkeKWkuKWkuKWkgrljZXouqvni5flsLHov5nmoLfpu5jpu5jlnLDnnIvnnYDkvaDvvIzkuIDlj6Xor53kuZ/kuI3or7TjgII='));