diff --git a/demo/pc/footer.html b/demo/pc/footer.html
index cbcf2e7..de9500f 100644
--- a/demo/pc/footer.html
+++ b/demo/pc/footer.html
@@ -1,6 +1,38 @@
 <fieldset class="layui-elem-field layui-field-title">
-    <legend>字段集区块 - 横线风格</legend>
-    <div class="layui-field-box">
-        内容区域
+    <legend>脚部-大块深色</legend>
+    <div class="layui-field-box" style="width: 1000px;">
+        <div class="ul-footer" style="margin-top: 15px;">
+            <div class="container">
+                <div>
+                    <img class="logo" src="https://cdn.720zilla.com/upload/site_logo/60af18f560d62.png" alt="">
+                </div>
+                <div style="min-width: 60%;">
+                    <div class="footer-nav">
+                    </div>
+
+
+                    <div class="footer-link" style="margin-top: 15px;">
+                        <span style="margin-left: 10px;margin-right: -5px;">合作伙伴：</span>
+                        <a href="http://ulthon.com" target="_blank">临沂奥宏网络科技有限公司</a>
+
+                    </div>
+
+                    <div>
+                        <p style="margin-left: 10px;">
+                            <span>本站所有权利归 720zilla.com 所有</span>
+                            <a href="http://www.beian.miit.gov.cn/" target="_blank">鲁ICP备19027671号</a>
+
+                        </p>
+                    </div>
+                </div>
+                <div>
+                    <p>联系我们</p>
+                    <p>电话:13518691790</p>
+                    <p>邮箱:service@ulthon.com</p>
+                    <p>工作时间:周一至周五 9:00 - 18:00</p>
+                    <p><img style="width: 120px;" src="https://cdn.720zilla.com/upload/site_logo/60af122190dfd.jpg" alt=""></p>
+                </div>
+            </div>
+        </div>
     </div>
 </fieldset>
\ No newline at end of file
diff --git a/demo/pc/jumbotron.html b/demo/pc/jumbotron.html
index 7ca3d8b..1437e3d 100644
--- a/demo/pc/jumbotron.html
+++ b/demo/pc/jumbotron.html
@@ -3,7 +3,7 @@
     <div class="layui-field-box">
         <div class="ul-padding-md ul-bg-gray">
 
-            <div class="jumbotron clean">
+            <div class="ul-jumbotron clean">
                 <div class="main">
 
                     <div class="title">layui-ul</div>
@@ -23,7 +23,7 @@
     <div class="layui-field-box">
         <div class="ul-padding-md ul-bg-gray">
 
-            <div class="jumbotron dark">
+            <div class="ul-jumbotron dark">
                 <div class="main">
 
                     <div class="title">layui-ul</div>
@@ -51,7 +51,7 @@
     <div class="layui-field-box">
         <div class="ul-padding-md ul-bg-gray">
 
-            <div class="jumbotron left dark">
+            <div class="ul-jumbotron left dark">
                 <div class="main">
 
                     <div class="title">layui-ul</div>
diff --git a/source/scss/footer/_footer.scss b/source/scss/footer/_footer.scss
new file mode 100644
index 0000000..ec34cbb
--- /dev/null
+++ b/source/scss/footer/_footer.scss
@@ -0,0 +1,37 @@
+.ul-footer {
+    background-color: #333;
+    color           : #fff;
+}
+
+.ul-footer .container {
+    display: flex;
+    margin : 0 auto;
+    padding: 40px 0;
+}
+
+.ul-footer .logo {
+    width: 120px;
+}
+
+.ul-footer .container>div {
+    padding: 0 25px;
+}
+
+.ul-footer .container>div:not(:last-child) {
+    border-right: 1px solid #555;
+}
+
+.ul-footer .ul-footer-nav a {
+    color      : #fff;
+    margin     : 5px 10px;
+    font-weight: 600;
+}
+
+.ul-footer .ul-footer-link a {
+    color : #ddd;
+    margin: 5px 10px;
+}
+
+.ul-footer p {
+    margin-top: 5px;
+}
\ No newline at end of file
diff --git a/source/scss/footer/_index.scss b/source/scss/footer/_index.scss
new file mode 100644
index 0000000..6f8a197
--- /dev/null
+++ b/source/scss/footer/_index.scss
@@ -0,0 +1 @@
+@import 'footer';
\ No newline at end of file
diff --git a/source/scss/jumbotron/_jumbotron.scss b/source/scss/jumbotron/_jumbotron.scss
index 0c4a107..afac8e4 100644
--- a/source/scss/jumbotron/_jumbotron.scss
+++ b/source/scss/jumbotron/_jumbotron.scss
@@ -1,4 +1,4 @@
-.jumbotron {
+.ul-jumbotron {
     padding   : 15px;
     text-align: center;
 
diff --git a/source/scss/jumbotron/_jumbotron_clean.scss b/source/scss/jumbotron/_jumbotron_clean.scss
index 26f6c00..8635cff 100644
--- a/source/scss/jumbotron/_jumbotron_clean.scss
+++ b/source/scss/jumbotron/_jumbotron_clean.scss
@@ -1,4 +1,4 @@
-.jumbotron {
+.ul-jumbotron {
     &.clean{
         background-color: #fff;
     }
diff --git a/source/scss/jumbotron/_jumbotron_dark.scss b/source/scss/jumbotron/_jumbotron_dark.scss
index 74028d3..fbcaccb 100644
--- a/source/scss/jumbotron/_jumbotron_dark.scss
+++ b/source/scss/jumbotron/_jumbotron_dark.scss
@@ -1,4 +1,4 @@
-.jumbotron {
+.ul-jumbotron {
     &.dark {
         background-color: #1F2430;
         color           : #fff;
diff --git a/source/scss/jumbotron/_jumbotron_left.scss b/source/scss/jumbotron/_jumbotron_left.scss
index d1c2753..b2545d4 100644
--- a/source/scss/jumbotron/_jumbotron_left.scss
+++ b/source/scss/jumbotron/_jumbotron_left.scss
@@ -1,4 +1,4 @@
-.jumbotron {
+.ul-jumbotron {
     &.left {
         .main {
             text-align : left;
diff --git a/source/scss/layui-ul.scss b/source/scss/layui-ul.scss
index 28c84f3..35a6e8e 100644
--- a/source/scss/layui-ul.scss
+++ b/source/scss/layui-ul.scss
@@ -6,6 +6,7 @@
 @import './card/index';
 @import './title/index';
 @import './jumbotron/index';
+@import './footer/index';
 
 
 /* 头部开始 */