diff --git a/demo/list.html b/demo/list.html
index f73637a..c792984 100644
--- a/demo/list.html
+++ b/demo/list.html
@@ -176,10 +176,52 @@
             <div class="ul-message-item-img" style="background-image: url('/static/images/view.jpg');" data-repeat="4">
 
             </div>
-            
+
           </div>
         </div>
       </div>
     </div>
   </div>
+</fieldset>
+
+
+<fieldset class="layui-elem-field layui-field-title">
+  <legend>笔记列表</legend>
+  <div class="layui-field-box">
+    <div class="ul-padding-md">
+      <div class="ul-note-list">
+        <div class="ul-note-item current">
+          <div class="ul-note-item-icon">
+            <i class="layui-icon layui-icon-read"></i>
+          </div>
+          <div class="ul-note-item-info">
+            <div class="ul-note-item-title">未命名的笔记</div>
+            <div class="ul-note-item-desc">未命名的笔记未命名的笔记未命名的笔记</div>
+            <div class="ul-note-item-time">2021-04-11</div>
+            <div class="ul-note-item-tree">
+              ddd
+            </div>
+
+          </div>
+        </div>
+        <div class="ul-note-item">
+          <div class="ul-note-item-icon">
+            <i class="layui-icon layui-icon-read"></i>
+          </div>
+          <div class="ul-note-item-info">
+            <div class="ul-note-item-title">未命名的笔记</div>
+            <div class="ul-note-item-desc">未命名的笔记未命名的笔记未命名的笔记</div>
+            <div class="ul-note-item-time">2021-04-11</div>
+            <div class="ul-note-item-tree">
+              ddd
+            </div>
+
+          </div>
+        </div>
+
+
+      </div>
+    </div>
+
+  </div>
 </fieldset>
\ No newline at end of file
diff --git a/demo/tree.html b/demo/tree.html
index d4adb79..576c287 100644
--- a/demo/tree.html
+++ b/demo/tree.html
@@ -101,7 +101,7 @@
               }
               console.log('点击收缩目录');
               // 一般不用写这个逻辑
-            }else{
+            } else {
               console.log('点击目录项');
               // 在这里写点击逻辑
             }
@@ -128,10 +128,10 @@
             <span class="ul-tree-item-title">读书笔记</span>
           </div>
           <div class="ul-tree-item-children">
-  
+
           </div>
         </div>
-  
+
       </div>
     </div>
     <div class="ul-section">
@@ -148,12 +148,12 @@
                 <span class="ul-tree-item-title">小说</span>
               </div>
               <div class="ul-tree-item-children">
-  
+
               </div>
             </div>
           </div>
         </div>
-  
+
       </div>
     </div>
     <pre class="layui-code demo-js"></pre>
@@ -194,4 +194,4 @@
       </div>
     </div>
   </div>
-</fieldset>
\ No newline at end of file
+</fieldset>
diff --git a/public/cdn/layui-ul.css b/public/cdn/layui-ul.css
index efdcbdc..b06dcb4 100644
--- a/public/cdn/layui-ul.css
+++ b/public/cdn/layui-ul.css
@@ -523,13 +523,13 @@
 
 .ul-tree-item {
   background-color: #fbfbfb;
-  cursor: pointer;
+  cursor          : pointer;
 }
 
 .ul-tree-item-info {
   border-left: 3px solid transparent;
-  padding         : 8px 0;
-  position        : relative;
+  padding    : 8px 0;
+  position   : relative;
 }
 
 
@@ -537,7 +537,8 @@
   background-color: #9cf;
   border-color    : #6699CC;
 }
-.ul-tree-item-info:hover{
+
+.ul-tree-item-info:hover {
   background-color: rgb(190, 222, 255);
   border-color    : #6699CC;
 }
@@ -550,4 +551,41 @@
   position: absolute;
   left    : 5px;
   top     : 10px;
+}
+
+
+.ul-note-item {
+  display        : flex;
+  justify-content: flex-start;
+  align-items    : flex-start;
+  cursor         : pointer;
+  padding        : 15px;
+}
+
+.ul-note-item.current,
+.ul-note-item:hover {
+  background-color: #eee;
+}
+
+.ul-note-item .ul-note-item-icon {
+  margin-right: 10px;
+  ;
+}
+
+.ul-note-item .ul-note-item-desc {
+  color    : #999;
+  font-size: 12px;
+  margin-top: 5px;
+}
+
+.ul-note-item .ul-note-item-time {
+  color     : #bbb;
+  font-size : 12px;
+  margin-top: 5px;
+}
+
+.ul-note-item .ul-note-item-tree {
+  font-size : 12px;
+  color     : #bbb;
+  margin-top: 5px;
 }
\ No newline at end of file