commit

src/main/resources/static/css/footer.css

+/* 公共样式表css */
+html,body {
+    color: #333;
+    margin: 0;
+    height: 100%;
+    font-family: "Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;
+}
+
+* {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+a {
+    text-decoration: none;
+    color: #000;
+}
+
+img {
+    border: 0;
+}
+
+body {
+    background: #fff;
+    color: #666;
+}
+
+html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td {
+    margin: 0;
+    padding: 0;
+}
+
+a {
+    text-decoration: none;
+    color: #08acee;
+}
+
+button {
+    outline: 0;
+}
+
+img {
+    border: 0;
+}
+
+button,input,optgroup,select,textarea {
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    outline: none;
+}
+
+li {
+    list-style: none;
+}
+
+a {
+    color: #666;
+}
+
+a:hover {
+    color: #eee;
+}
+
+.clearfix::after {
+    clear: both;
+    content: ".";
+    display: block;
+    height: 0;
+    visibility: hidden;
+}
+
+.clearfix {
+}
+
+/* 必要布局样式css */
+.footer-box {
+    background: #222132;
+    overflow: hidden;
+    width: 100%;
+    color: #888;
+    padding: 30px 0 35px;
+}
+
+.footer-container {
+    width: 1200px;
+    margin: 0 auto;
+    padding: 0;
+}
+
+.footer-service {
+    margin-right: -26px;
+    margin-bottom: 38px;
+    padding-left: 69px;
+}
+
+.footer-service-item {
+    float: left;
+    height: 60px;
+    width: 240px;
+    margin-right: 26px;
+}
+
+.footer-service-item i {
+    width: 50px;
+    height: 45px;
+    float: left;
+    margin: 17px 17px 0 29px;
+    opacity: .8;
+    -webkit-transform: scale(.6);
+    -moz-transform: scale(.6);
+    transform: scale(.6);
+}
+
+.footer-service-item span {
+    font-size: 16px;
+    color: #ccc;
+    float: left;
+    margin-top: 29px;
+}
+
+.footer-icon-001 i {
+    background: url(../images/icon-footer01.png) no-repeat center center;
+    background-size: contain;
+}
+
+.footer-icon-002 i {
+    background: url(../images/icon-footer02.png) no-repeat center center;
+    background-size: contain;
+}
+
+.footer-icon-003 i {
+    background: url(../images/icon-footer03.png) no-repeat center center;
+    background-size: contain;
+}
+
+.footer-icon-004 i {
+    background: url(../images/icon-footer04.png) no-repeat center center;
+    background-size: contain;
+}
+
+.footer-line {
+    height: 0;
+    display: block;
+    clear: both;
+    border-bottom: 1px solid #393854;
+}
+
+.footer-links {
+    padding-top: 40px;
+    padding-left: 69px;
+}
+
+.footer-article-item {
+    width: 209px;
+    height: 226px;
+    float: left;
+    margin-right: 23px;
+    line-height: 2;
+    font-size: 14px;
+}
+
+.footer-article-item dt {
+    color: #ccc;
+    font-size: 16px;
+    margin-bottom: 10px;
+    line-height: 2;
+    font-weight: 300;
+}
+
+.footer-article-item dd {
+    line-height: 2;
+}
+
+.footer-article-item dd a {
+    color: #888;
+    transition: all .1s;
+}
+
+.footer-article-item dd a:hover {
+    color: #fff;
+}
+
+.footer-contact-item {
+    width: 145px;
+    float: left;
+}
+
+.footer-contact-item h3 {
+    font-size: 16px;
+    color: #ccc;
+    line-height: 2;
+    margin-bottom: 10px;
+    font-weight: 400;
+}
+
+.footer-contact-item p {
+    font-size: 22px;
+    color: #fff;
+    font-family: Arial,"Microsoft Yahei","HanHei SC",PingHei,"PingFang SC","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
+    margin-bottom: 15px;
+}
+
+.footer-ewm {
+    float: left;
+    width: 110px;
+    margin-right: 18px;
+    text-align: center;
+}
+
+.footer-ewm img {
+    width: 110px;
+    height: 110px;
+    display: block;
+    border: none;
+}
+
+.footer-ewm p {
+    font-size: 14px;
+    color: #ccc;
+    margin-top: 12px;
+}
+
+.footer-friend {
+    width: 1050px;
+    height: 20px;
+    line-height: 20px;
+    margin: 30px auto;
+}
+
+.footer-friend-title {
+    float: left;
+    color: #ccc;
+    font-size: 14px;
+}
+
+.footer-friend-title-list {
+    float: left;
+}
+
+.footer-friend-title-list li {
+    float: left;
+}
+
+.footer-friend-title-list li a {
+    color: #888;
+    transition: all .1s;
+    display: inline-block;
+    padding: 0 10px;
+    font-size: 14px;
+}
+
+.footer-friend-title-list li a:hover {
+    color: #fff;
+}
+
+.footer-friend-more {
+    color: #ccc;
+    transition: all .1s;
+    float: left;
+    font-size: 14px;
+}
+
+.footer-copyright {
+    line-height: 20px;
+    font-size: 14px;
+    text-align: center;
+}
+
+.footer-copyright p {
+    margin-bottom: 9px;
+    font-size: 14px;
+    color: #888;
+}

src/main/resources/templates/page/AboutEnglish.html

@@ -147,58 +147,148 @@
             </p>
             <br>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">联系方式</a></li>
-                        <li><a href="#" style="font-size: larger">15014366986</a></li>
-                        <li><a href="#" style="font-size: larger">2923616405</a></li>
-                        <li><a href="#" style="font-size: larger">pyc852164</a></li>
-                    </ul>
-                </div>
+    </div>
+</div>
+<link rel="stylesheet" href="../../static/css/footer.css">
+<div class="footer-box">
+    <div class="footer-container">
+        <div class="footer-service clearfix">
+            <div class="footer-service-item footer-icon-001">
+                <i></i>
+                <span>专注于后端开发</span>
             </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">关于我</a></li>
-                        <li><a href="https://blog.csdn.net/qq_42896653"
-                               target="_blank" style="font-size: larger">
-                            CSDN:我的关于计算机学习的博客地址
-                        </a></li>
-                        <li><a href="https://github.com/pyc-ycy"
-                               target="_blank" style="font-size: larger">
-                            Github：编程学习项目源代码托管仓库地址
-                        </a></li>
-                        <li><a href="https://gitee.com/pengyoucongcode"
-                               target="_blank" style="font-size: larger">
-                            Gitee：学习项目源代码托管地址
-                        </a></li>
-                    </ul>
-                </div>
+            <div class="footer-service-item footer-icon-002">
+                <i></i>
+                <span>扎实编程能力</span>
+            </div>
+            <div class="footer-service-item footer-icon-003">
+                <i></i>
+                <span>学习能力强</span>
+            </div>
+            <div class="footer-service-item footer-icon-004">
+                <i></i>
+                <span>掌握多门编程语言</span>
             </div>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li style="font-size: larger">关于我</li>
-                        <li style="font-size: larger">我的博客文章，主要是计算机学习方面</li>
-                        <li style="font-size: larger">我的代码托管平台，以C++和Java为主</li>
-                        <li style="font-size: larger">也是代码托管平台，以C++和Java为主</li>
-                    </ul>
+        <div class="footer-line"></div>
+        <div class="footer-links clearfix">
+            <dl class="footer-article-item">
+                <dt>擅长编程语言</dt>
+                <dd>
+                    <a href="#">Java</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++</a>
+                </dd>
+                <dd>
+                    <a href="#">Python</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>关于开发者</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">CSDN博客</a>
+                </dd>
+                <dd>
+                    <a href="#">专注后端</a>
+                </dd>
+                <dd>
+                    <a href="#">兼为前端</a>
+                </dd>
+                <dd>
+                    <a href="#">数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">专业出身</a>
+                </dd>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">联系我</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>擅长领域</dt>
+                <dd>
+                    <a href="#">Java Web</a>
+                </dd>
+                <dd>
+                    <a href="#">MFC客户端</a>
+                </dd>
+                <dd>
+                    <a href="#">PyQT5</a>
+                </dd>
+                <dd>
+                    <a href="#">Python 数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++ 数据结构</a>
+                </dd>
+                <dd>
+                    <a href="#">Java 后端</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>其他</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">博客地址</a>
+                </dd>
+                <dd>
+                    <a href=" https://github.com/pyc-ycy">Github</a>
+                </dd>
+                <dd>
+                    <a href="https://gitee.com/pengyoucongcode">Gitee</a>
+                </dd>
+            </dl>
+            <dl class="footer-contact-item">
+                <h3>联系我们</h3>
+                <p>150-14366986</p>
+                <div class="footer-ewm">
+                    <img src="images/vm.png" alt="">
+                    <p>关注CSDN博客</p>
                 </div>
-            </div>
+            </dl>
+        </div>
+        <div class="footer-friend">
+            <div class="footer-friend-title">友情链接：</div>
+            <ul class="footer-friend-title-list clearfix">
+                <li>
+                    <a href="http://www.baidu.com" target="_blank">百度一下</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
+                </li>
+                <li>
+                    <a href="https://mvnrepository.com/" target="_blank">Maven中心仓库</a>
+                </li>
+                <li>
+                    <a href="https://www.bilibili.com/" target="_blank">B站</a>
+                </li>
+                <li>
+                    <a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>
+                </li>
+                <li>
+                    <a href="https://www.w3school.com.cn/" target="_blank">W3Cschool</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/linux/linux-tutorial.html" target="_blank">Linux学习</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">Bootstrap学习</a>
+                </li>
+                <li>
+                    <a href="https://cn.vuejs.org/" target="_blank">Vuejs</a>
+                </li>
+            </ul>
+            <a href="#" class="footer-friend-more">更多 >></a>
+        </div>
+        <div class="footer-copyright">
+            <p>© 2017-2021 (彭友聪) 开发，并保留所有权利&nbsp;&nbsp;&nbsp;常年法律顾问: （深圳）律师事务所</p>
+            <p>
+                陆丰市河西街道xxxxx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a href="#">
+                    <img src="images/icon-footer.png" alt="">**网安备 0008899999xxxx号
+                </a>
+            </p>
         </div>
-    </div>
-</div>
-<div id="footer">
-    <div style="text-align: center">
-        <p>
-            <span>@2020 御承扬Copyright&copy;2020-05-04</span>
-        </p>
     </div>
 </div>
 

src/main/resources/templates/page/AboutLearn.html

@@ -152,51 +152,6 @@
                 IT 类工作，你还需要对编程进行深入学习。
             </p>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">联系方式</a></li>
-                        <li><a href="#" style="font-size: larger">15014366986</a></li>
-                        <li><a href="#" style="font-size: larger">2923616405</a></li>
-                        <li><a href="#" style="font-size: larger">pyc852164</a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">关于我</a></li>
-                        <li><a href="https://blog.csdn.net/qq_42896653"
-                               target="_blank" style="font-size: larger">
-                            CSDN:我的关于计算机学习的博客地址
-                        </a></li>
-                        <li><a href="https://github.com/pyc-ycy"
-                               target="_blank" style="font-size: larger">
-                            Github：编程学习项目源代码托管仓库地址
-                        </a></li>
-                        <li><a href="https://gitee.com/pengyoucongcode"
-                               target="_blank" style="font-size: larger">
-                            Gitee：学习项目源代码托管地址
-                        </a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li style="font-size: larger">关于我</li>
-                        <li style="font-size: larger">我的博客文章，主要是计算机学习方面</li>
-                        <li style="font-size: larger">我的代码托管平台，以C++和Java为主</li>
-                        <li style="font-size: larger">也是代码托管平台，以C++和Java为主</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
     </div>
 </div>
 
@@ -205,11 +160,146 @@
     <div class="scrollItem" id="toTop">顶部</div>
     <div class="scrollItem" id="toBottom">底部</div>
 </div>
-<div id="footer">
-    <div style="text-align: center">
-        <p>
-            <span>@2020 御承扬Copyright&copy;2020-05-04</span>
-        </p>
+<link rel="stylesheet" href="../../static/css/footer.css">
+<div class="footer-box">
+    <div class="footer-container">
+        <div class="footer-service clearfix">
+            <div class="footer-service-item footer-icon-001">
+                <i></i>
+                <span>专注于后端开发</span>
+            </div>
+            <div class="footer-service-item footer-icon-002">
+                <i></i>
+                <span>扎实编程能力</span>
+            </div>
+            <div class="footer-service-item footer-icon-003">
+                <i></i>
+                <span>学习能力强</span>
+            </div>
+            <div class="footer-service-item footer-icon-004">
+                <i></i>
+                <span>掌握多门编程语言</span>
+            </div>
+        </div>
+        <div class="footer-line"></div>
+        <div class="footer-links clearfix">
+            <dl class="footer-article-item">
+                <dt>擅长编程语言</dt>
+                <dd>
+                    <a href="#">Java</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++</a>
+                </dd>
+                <dd>
+                    <a href="#">Python</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>关于开发者</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">CSDN博客</a>
+                </dd>
+                <dd>
+                    <a href="#">专注后端</a>
+                </dd>
+                <dd>
+                    <a href="#">兼为前端</a>
+                </dd>
+                <dd>
+                    <a href="#">数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">专业出身</a>
+                </dd>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">联系我</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>擅长领域</dt>
+                <dd>
+                    <a href="#">Java Web</a>
+                </dd>
+                <dd>
+                    <a href="#">MFC客户端</a>
+                </dd>
+                <dd>
+                    <a href="#">PyQT5</a>
+                </dd>
+                <dd>
+                    <a href="#">Python 数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++ 数据结构</a>
+                </dd>
+                <dd>
+                    <a href="#">Java 后端</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>其他</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">博客地址</a>
+                </dd>
+                <dd>
+                    <a href=" https://github.com/pyc-ycy">Github</a>
+                </dd>
+                <dd>
+                    <a href="https://gitee.com/pengyoucongcode">Gitee</a>
+                </dd>
+            </dl>
+            <dl class="footer-contact-item">
+                <h3>联系我们</h3>
+                <p>150-14366986</p>
+                <div class="footer-ewm">
+                    <img src="images/vm.png" alt="">
+                    <p>关注CSDN博客</p>
+                </div>
+            </dl>
+        </div>
+        <div class="footer-friend">
+            <div class="footer-friend-title">友情链接：</div>
+            <ul class="footer-friend-title-list clearfix">
+                <li>
+                    <a href="http://www.baidu.com" target="_blank">百度一下</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
+                </li>
+                <li>
+                    <a href="https://mvnrepository.com/" target="_blank">Maven中心仓库</a>
+                </li>
+                <li>
+                    <a href="https://www.bilibili.com/" target="_blank">B站</a>
+                </li>
+                <li>
+                    <a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>
+                </li>
+                <li>
+                    <a href="https://www.w3school.com.cn/" target="_blank">W3Cschool</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/linux/linux-tutorial.html" target="_blank">Linux学习</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">Bootstrap学习</a>
+                </li>
+                <li>
+                    <a href="https://cn.vuejs.org/" target="_blank">Vuejs</a>
+                </li>
+            </ul>
+            <a href="#" class="footer-friend-more">更多 >></a>
+        </div>
+        <div class="footer-copyright">
+            <p>© 2017-2021 (彭友聪) 开发，并保留所有权利&nbsp;&nbsp;&nbsp;常年法律顾问: （深圳）律师事务所</p>
+            <p>
+                陆丰市河西街道xxxxx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a href="#">
+                    <img src="images/icon-footer.png" alt="">**网安备 0008899999xxxx号
+                </a>
+            </p>
+        </div>
     </div>
 </div>
 

src/main/resources/templates/page/AboutMath.html

@@ -139,51 +139,6 @@
                 以及其他无穷小替换、洛必达法则等定理，都可以大大简化计算，节省计算步骤。
             </p>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">联系方式</a></li>
-                        <li><a href="#" style="font-size: larger">15014366986</a></li>
-                        <li><a href="#" style="font-size: larger">2923616405</a></li>
-                        <li><a href="#" style="font-size: larger">pyc852164</a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">关于我</a></li>
-                        <li><a href="https://blog.csdn.net/qq_42896653"
-                               target="_blank" style="font-size: larger">
-                            CSDN:我的关于计算机学习的博客地址
-                        </a></li>
-                        <li><a href="https://github.com/pyc-ycy"
-                               target="_blank" style="font-size: larger">
-                            Github：编程学习项目源代码托管仓库地址
-                        </a></li>
-                        <li><a href="https://gitee.com/pengyoucongcode"
-                               target="_blank" style="font-size: larger">
-                            Gitee：学习项目源代码托管地址
-                        </a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li style="font-size: larger">关于我</li>
-                        <li style="font-size: larger">我的博客文章，主要是计算机学习方面</li>
-                        <li style="font-size: larger">我的代码托管平台，以C++和Java为主</li>
-                        <li style="font-size: larger">也是代码托管平台，以C++和Java为主</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
     </div>
 </div>
 
@@ -192,11 +147,146 @@
     <div class="scrollItem" id="toTop">顶部</div>
     <div class="scrollItem" id="toBottom">底部</div>
 </div>
-<div id="footer">
-    <div style="text-align: center">
-        <p>
-            <span>@2020 御承扬Copyright&copy;2020-05-04</span>
-        </p>
+<link rel="stylesheet" href="../../static/css/footer.css">
+<div class="footer-box">
+    <div class="footer-container">
+        <div class="footer-service clearfix">
+            <div class="footer-service-item footer-icon-001">
+                <i></i>
+                <span>专注于后端开发</span>
+            </div>
+            <div class="footer-service-item footer-icon-002">
+                <i></i>
+                <span>扎实编程能力</span>
+            </div>
+            <div class="footer-service-item footer-icon-003">
+                <i></i>
+                <span>学习能力强</span>
+            </div>
+            <div class="footer-service-item footer-icon-004">
+                <i></i>
+                <span>掌握多门编程语言</span>
+            </div>
+        </div>
+        <div class="footer-line"></div>
+        <div class="footer-links clearfix">
+            <dl class="footer-article-item">
+                <dt>擅长编程语言</dt>
+                <dd>
+                    <a href="#">Java</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++</a>
+                </dd>
+                <dd>
+                    <a href="#">Python</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>关于开发者</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">CSDN博客</a>
+                </dd>
+                <dd>
+                    <a href="#">专注后端</a>
+                </dd>
+                <dd>
+                    <a href="#">兼为前端</a>
+                </dd>
+                <dd>
+                    <a href="#">数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">专业出身</a>
+                </dd>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">联系我</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>擅长领域</dt>
+                <dd>
+                    <a href="#">Java Web</a>
+                </dd>
+                <dd>
+                    <a href="#">MFC客户端</a>
+                </dd>
+                <dd>
+                    <a href="#">PyQT5</a>
+                </dd>
+                <dd>
+                    <a href="#">Python 数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++ 数据结构</a>
+                </dd>
+                <dd>
+                    <a href="#">Java 后端</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>其他</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">博客地址</a>
+                </dd>
+                <dd>
+                    <a href=" https://github.com/pyc-ycy">Github</a>
+                </dd>
+                <dd>
+                    <a href="https://gitee.com/pengyoucongcode">Gitee</a>
+                </dd>
+            </dl>
+            <dl class="footer-contact-item">
+                <h3>联系我们</h3>
+                <p>150-14366986</p>
+                <div class="footer-ewm">
+                    <img src="images/vm.png" alt="">
+                    <p>关注CSDN博客</p>
+                </div>
+            </dl>
+        </div>
+        <div class="footer-friend">
+            <div class="footer-friend-title">友情链接：</div>
+            <ul class="footer-friend-title-list clearfix">
+                <li>
+                    <a href="http://www.baidu.com" target="_blank">百度一下</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
+                </li>
+                <li>
+                    <a href="https://mvnrepository.com/" target="_blank">Maven中心仓库</a>
+                </li>
+                <li>
+                    <a href="https://www.bilibili.com/" target="_blank">B站</a>
+                </li>
+                <li>
+                    <a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>
+                </li>
+                <li>
+                    <a href="https://www.w3school.com.cn/" target="_blank">W3Cschool</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/linux/linux-tutorial.html" target="_blank">Linux学习</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">Bootstrap学习</a>
+                </li>
+                <li>
+                    <a href="https://cn.vuejs.org/" target="_blank">Vuejs</a>
+                </li>
+            </ul>
+            <a href="#" class="footer-friend-more">更多 >></a>
+        </div>
+        <div class="footer-copyright">
+            <p>© 2017-2021 (彭友聪) 开发，并保留所有权利&nbsp;&nbsp;&nbsp;常年法律顾问: （深圳）律师事务所</p>
+            <p>
+                陆丰市河西街道xxxxx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a href="#">
+                    <img src="images/icon-footer.png" alt="">**网安备 0008899999xxxx号
+                </a>
+            </p>
+        </div>
     </div>
 </div>
 

src/main/resources/templates/page/AboutPhilosophy.html

@@ -134,51 +134,6 @@
                 简言之，我们既要学习马克思主义哲学，更要继承中国古代哲学的精华。
             </p>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">联系方式</a></li>
-                        <li><a href="#" style="font-size: larger">15014366986</a></li>
-                        <li><a href="#" style="font-size: larger">2923616405</a></li>
-                        <li><a href="#" style="font-size: larger">pyc852164</a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">关于我</a></li>
-                        <li><a href="https://blog.csdn.net/qq_42896653"
-                               target="_blank" style="font-size: larger">
-                            CSDN:我的关于计算机学习的博客地址
-                        </a></li>
-                        <li><a href="https://github.com/pyc-ycy"
-                               target="_blank" style="font-size: larger">
-                            Github：编程学习项目源代码托管仓库地址
-                        </a></li>
-                        <li><a href="https://gitee.com/pengyoucongcode"
-                               target="_blank" style="font-size: larger">
-                            Gitee：学习项目源代码托管地址
-                        </a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li style="font-size: larger">关于我</li>
-                        <li style="font-size: larger">我的博客文章，主要是计算机学习方面</li>
-                        <li style="font-size: larger">我的代码托管平台，以C++和Java为主</li>
-                        <li style="font-size: larger">也是代码托管平台，以C++和Java为主</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
     </div>
 </div>
 
@@ -187,11 +142,146 @@
     <div class="scrollItem" id="toTop">顶部</div>
     <div class="scrollItem" id="toBottom">底部</div>
 </div>
-<div id="footer">
-    <div style="text-align: center">
-        <p>
-            <span>@2020 御承扬Copyright&copy;2020-05-04</span>
-        </p>
+<link rel="stylesheet" href="../../static/css/footer.css">
+<div class="footer-box">
+    <div class="footer-container">
+        <div class="footer-service clearfix">
+            <div class="footer-service-item footer-icon-001">
+                <i></i>
+                <span>专注于后端开发</span>
+            </div>
+            <div class="footer-service-item footer-icon-002">
+                <i></i>
+                <span>扎实编程能力</span>
+            </div>
+            <div class="footer-service-item footer-icon-003">
+                <i></i>
+                <span>学习能力强</span>
+            </div>
+            <div class="footer-service-item footer-icon-004">
+                <i></i>
+                <span>掌握多门编程语言</span>
+            </div>
+        </div>
+        <div class="footer-line"></div>
+        <div class="footer-links clearfix">
+            <dl class="footer-article-item">
+                <dt>擅长编程语言</dt>
+                <dd>
+                    <a href="#">Java</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++</a>
+                </dd>
+                <dd>
+                    <a href="#">Python</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>关于开发者</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">CSDN博客</a>
+                </dd>
+                <dd>
+                    <a href="#">专注后端</a>
+                </dd>
+                <dd>
+                    <a href="#">兼为前端</a>
+                </dd>
+                <dd>
+                    <a href="#">数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">专业出身</a>
+                </dd>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">联系我</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>擅长领域</dt>
+                <dd>
+                    <a href="#">Java Web</a>
+                </dd>
+                <dd>
+                    <a href="#">MFC客户端</a>
+                </dd>
+                <dd>
+                    <a href="#">PyQT5</a>
+                </dd>
+                <dd>
+                    <a href="#">Python 数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++ 数据结构</a>
+                </dd>
+                <dd>
+                    <a href="#">Java 后端</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>其他</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">博客地址</a>
+                </dd>
+                <dd>
+                    <a href=" https://github.com/pyc-ycy">Github</a>
+                </dd>
+                <dd>
+                    <a href="https://gitee.com/pengyoucongcode">Gitee</a>
+                </dd>
+            </dl>
+            <dl class="footer-contact-item">
+                <h3>联系我们</h3>
+                <p>150-14366986</p>
+                <div class="footer-ewm">
+                    <img src="images/vm.png" alt="">
+                    <p>关注CSDN博客</p>
+                </div>
+            </dl>
+        </div>
+        <div class="footer-friend">
+            <div class="footer-friend-title">友情链接：</div>
+            <ul class="footer-friend-title-list clearfix">
+                <li>
+                    <a href="http://www.baidu.com" target="_blank">百度一下</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
+                </li>
+                <li>
+                    <a href="https://mvnrepository.com/" target="_blank">Maven中心仓库</a>
+                </li>
+                <li>
+                    <a href="https://www.bilibili.com/" target="_blank">B站</a>
+                </li>
+                <li>
+                    <a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>
+                </li>
+                <li>
+                    <a href="https://www.w3school.com.cn/" target="_blank">W3Cschool</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/linux/linux-tutorial.html" target="_blank">Linux学习</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">Bootstrap学习</a>
+                </li>
+                <li>
+                    <a href="https://cn.vuejs.org/" target="_blank">Vuejs</a>
+                </li>
+            </ul>
+            <a href="#" class="footer-friend-more">更多 >></a>
+        </div>
+        <div class="footer-copyright">
+            <p>© 2017-2021 (彭友聪) 开发，并保留所有权利&nbsp;&nbsp;&nbsp;常年法律顾问: （深圳）律师事务所</p>
+            <p>
+                陆丰市河西街道xxxxx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a href="#">
+                    <img src="images/icon-footer.png" alt="">**网安备 0008899999xxxx号
+                </a>
+            </p>
+        </div>
     </div>
 </div>
 

src/main/resources/templates/page/AddFriend.html

@@ -162,60 +162,150 @@
                 </form>
             </div>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">联系方式</a></li>
-                        <li><a href="#" style="font-size: larger">15014366986</a></li>
-                        <li><a href="#" style="font-size: larger">2923616405</a></li>
-                        <li><a href="#" style="font-size: larger">pyc852164</a></li>
-                    </ul>
-                </div>
+    </div>
+</div>
+
+
+<link rel="stylesheet" href="../../static/css/footer.css">
+<div class="footer-box">
+    <div class="footer-container">
+        <div class="footer-service clearfix">
+            <div class="footer-service-item footer-icon-001">
+                <i></i>
+                <span>专注于后端开发</span>
             </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">关于我</a></li>
-                        <li><a href="https://blog.csdn.net/qq_42896653"
-                               target="_blank" style="font-size: larger">
-                            CSDN:我的关于计算机学习的博客地址
-                        </a></li>
-                        <li><a href="https://github.com/pyc-ycy"
-                               target="_blank" style="font-size: larger">
-                            Github：编程学习项目源代码托管仓库地址
-                        </a></li>
-                        <li><a href="https://gitee.com/pengyoucongcode"
-                               target="_blank" style="font-size: larger">
-                            Gitee：学习项目源代码托管地址
-                        </a></li>
-                    </ul>
-                </div>
+            <div class="footer-service-item footer-icon-002">
+                <i></i>
+                <span>扎实编程能力</span>
+            </div>
+            <div class="footer-service-item footer-icon-003">
+                <i></i>
+                <span>学习能力强</span>
+            </div>
+            <div class="footer-service-item footer-icon-004">
+                <i></i>
+                <span>掌握多门编程语言</span>
             </div>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li style="font-size: larger">关于我</li>
-                        <li style="font-size: larger">我的博客文章，主要是计算机学习方面</li>
-                        <li style="font-size: larger">我的代码托管平台，以C++和Java为主</li>
-                        <li style="font-size: larger">也是代码托管平台，以C++和Java为主</li>
-                    </ul>
+        <div class="footer-line"></div>
+        <div class="footer-links clearfix">
+            <dl class="footer-article-item">
+                <dt>擅长编程语言</dt>
+                <dd>
+                    <a href="#">Java</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++</a>
+                </dd>
+                <dd>
+                    <a href="#">Python</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>关于开发者</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">CSDN博客</a>
+                </dd>
+                <dd>
+                    <a href="#">专注后端</a>
+                </dd>
+                <dd>
+                    <a href="#">兼为前端</a>
+                </dd>
+                <dd>
+                    <a href="#">数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">专业出身</a>
+                </dd>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">联系我</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>擅长领域</dt>
+                <dd>
+                    <a href="#">Java Web</a>
+                </dd>
+                <dd>
+                    <a href="#">MFC客户端</a>
+                </dd>
+                <dd>
+                    <a href="#">PyQT5</a>
+                </dd>
+                <dd>
+                    <a href="#">Python 数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++ 数据结构</a>
+                </dd>
+                <dd>
+                    <a href="#">Java 后端</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>其他</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">博客地址</a>
+                </dd>
+                <dd>
+                    <a href=" https://github.com/pyc-ycy">Github</a>
+                </dd>
+                <dd>
+                    <a href="https://gitee.com/pengyoucongcode">Gitee</a>
+                </dd>
+            </dl>
+            <dl class="footer-contact-item">
+                <h3>联系我们</h3>
+                <p>150-14366986</p>
+                <div class="footer-ewm">
+                    <img src="images/vm.png" alt="">
+                    <p>关注CSDN博客</p>
                 </div>
-            </div>
+            </dl>
+        </div>
+        <div class="footer-friend">
+            <div class="footer-friend-title">友情链接：</div>
+            <ul class="footer-friend-title-list clearfix">
+                <li>
+                    <a href="http://www.baidu.com" target="_blank">百度一下</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
+                </li>
+                <li>
+                    <a href="https://mvnrepository.com/" target="_blank">Maven中心仓库</a>
+                </li>
+                <li>
+                    <a href="https://www.bilibili.com/" target="_blank">B站</a>
+                </li>
+                <li>
+                    <a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>
+                </li>
+                <li>
+                    <a href="https://www.w3school.com.cn/" target="_blank">W3Cschool</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/linux/linux-tutorial.html" target="_blank">Linux学习</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">Bootstrap学习</a>
+                </li>
+                <li>
+                    <a href="https://cn.vuejs.org/" target="_blank">Vuejs</a>
+                </li>
+            </ul>
+            <a href="#" class="footer-friend-more">更多 >></a>
+        </div>
+        <div class="footer-copyright">
+            <p>© 2017-2021 (彭友聪) 开发，并保留所有权利&nbsp;&nbsp;&nbsp;常年法律顾问: （深圳）律师事务所</p>
+            <p>
+                陆丰市河西街道xxxxx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a href="#">
+                    <img src="images/icon-footer.png" alt="">**网安备 0008899999xxxx号
+                </a>
+            </p>
         </div>
-    </div>
-</div>
-
-
-<div id="footer">
-    <div style="text-align: center">
-        <p>
-            <span>@2020 御承扬Copyright&copy;2020-05-04</span>
-        </p>
     </div>
 </div>
 <div id="scroll">

src/main/resources/templates/page/AdminPage.html

@@ -172,62 +172,152 @@
                 </div>
             </div>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">联系方式</a></li>
-                        <li><a href="#" style="font-size: larger">15014366986</a></li>
-                        <li><a href="#" style="font-size: larger">2923616405</a></li>
-                        <li><a href="#" style="font-size: larger">pyc852164</a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">关于我</a></li>
-                        <li><a href="https://blog.csdn.net/qq_42896653"
-                               target="_blank" style="font-size: larger">
-                            CSDN:我的关于计算机学习的博客地址
-                        </a></li>
-                        <li><a href="https://github.com/pyc-ycy"
-                               target="_blank" style="font-size: larger">
-                            Github：编程学习项目源代码托管仓库地址
-                        </a></li>
-                        <li><a href="https://gitee.com/pengyoucongcode"
-                               target="_blank" style="font-size: larger">
-                            Gitee：学习项目源代码托管地址
-                        </a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li style="font-size: larger">关于我</li>
-                        <li style="font-size: larger">我的博客文章，主要是计算机学习方面</li>
-                        <li style="font-size: larger">我的代码托管平台，以C++和Java为主</li>
-                        <li style="font-size: larger">也是代码托管平台，以C++和Java为主</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
     </div>
 </div>
 <div id="scroll">
     <div class="scrollItem" id="toTop">顶部</div>
     <div class="scrollItem" id="toBottom">底部</div>
 </div>
-<div id="footer">
-    <div style="text-align: center">
-        <p>
-            <span>@2020 御承扬Copyright&copy;2020-05-04</span>
-        </p>
+<link rel="stylesheet" href="../../static/css/footer.css">
+<div class="footer-box">
+    <div class="footer-container">
+        <div class="footer-service clearfix">
+            <div class="footer-service-item footer-icon-001">
+                <i></i>
+                <span>专注于后端开发</span>
+            </div>
+            <div class="footer-service-item footer-icon-002">
+                <i></i>
+                <span>扎实编程能力</span>
+            </div>
+            <div class="footer-service-item footer-icon-003">
+                <i></i>
+                <span>学习能力强</span>
+            </div>
+            <div class="footer-service-item footer-icon-004">
+                <i></i>
+                <span>掌握多门编程语言</span>
+            </div>
+        </div>
+        <div class="footer-line"></div>
+        <div class="footer-links clearfix">
+            <dl class="footer-article-item">
+                <dt>擅长编程语言</dt>
+                <dd>
+                    <a href="#">Java</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++</a>
+                </dd>
+                <dd>
+                    <a href="#">Python</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>关于开发者</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">CSDN博客</a>
+                </dd>
+                <dd>
+                    <a href="#">专注后端</a>
+                </dd>
+                <dd>
+                    <a href="#">兼为前端</a>
+                </dd>
+                <dd>
+                    <a href="#">数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">专业出身</a>
+                </dd>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">联系我</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>擅长领域</dt>
+                <dd>
+                    <a href="#">Java Web</a>
+                </dd>
+                <dd>
+                    <a href="#">MFC客户端</a>
+                </dd>
+                <dd>
+                    <a href="#">PyQT5</a>
+                </dd>
+                <dd>
+                    <a href="#">Python 数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++ 数据结构</a>
+                </dd>
+                <dd>
+                    <a href="#">Java 后端</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>其他</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">博客地址</a>
+                </dd>
+                <dd>
+                    <a href=" https://github.com/pyc-ycy">Github</a>
+                </dd>
+                <dd>
+                    <a href="https://gitee.com/pengyoucongcode">Gitee</a>
+                </dd>
+            </dl>
+            <dl class="footer-contact-item">
+                <h3>联系我们</h3>
+                <p>150-14366986</p>
+                <div class="footer-ewm">
+                    <img src="images/vm.png" alt="">
+                    <p>关注CSDN博客</p>
+                </div>
+            </dl>
+        </div>
+        <div class="footer-friend">
+            <div class="footer-friend-title">友情链接：</div>
+            <ul class="footer-friend-title-list clearfix">
+                <li>
+                    <a href="http://www.baidu.com" target="_blank">百度一下</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
+                </li>
+                <li>
+                    <a href="https://mvnrepository.com/" target="_blank">Maven中心仓库</a>
+                </li>
+                <li>
+                    <a href="https://www.bilibili.com/" target="_blank">B站</a>
+                </li>
+                <li>
+                    <a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>
+                </li>
+                <li>
+                    <a href="https://www.w3school.com.cn/" target="_blank">W3Cschool</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/linux/linux-tutorial.html" target="_blank">Linux学习</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">Bootstrap学习</a>
+                </li>
+                <li>
+                    <a href="https://cn.vuejs.org/" target="_blank">Vuejs</a>
+                </li>
+            </ul>
+            <a href="#" class="footer-friend-more">更多 >></a>
+        </div>
+        <div class="footer-copyright">
+            <p>© 2017-2021 (彭友聪) 开发，并保留所有权利&nbsp;&nbsp;&nbsp;常年法律顾问: （深圳）律师事务所</p>
+            <p>
+                陆丰市河西街道xxxxx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a href="#">
+                    <img src="images/icon-footer.png" alt="">**网安备 0008899999xxxx号
+                </a>
+            </p>
+        </div>
     </div>
 </div>
 <script type="text/javascript" src="../../static/js/jquery-1.11.3.js"></script>

src/main/resources/templates/page/BrowseFriendInfo.html

@@ -163,59 +163,149 @@
                 </div>
             </div>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">联系方式</a></li>
-                        <li><a href="#" style="font-size: larger">15014366986</a></li>
-                        <li><a href="#" style="font-size: larger">2923616405</a></li>
-                        <li><a href="#" style="font-size: larger">pyc852164</a></li>
-                    </ul>
-                </div>
+    </div>
+</div>
+
+<link rel="stylesheet" href="../../static/css/footer.css">
+<div class="footer-box">
+    <div class="footer-container">
+        <div class="footer-service clearfix">
+            <div class="footer-service-item footer-icon-001">
+                <i></i>
+                <span>专注于后端开发</span>
             </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">关于我</a></li>
-                        <li><a href="https://blog.csdn.net/qq_42896653"
-                               target="_blank" style="font-size: larger">
-                            CSDN:我的关于计算机学习的博客地址
-                        </a></li>
-                        <li><a href="https://github.com/pyc-ycy"
-                               target="_blank" style="font-size: larger">
-                            Github：编程学习项目源代码托管仓库地址
-                        </a></li>
-                        <li><a href="https://gitee.com/pengyoucongcode"
-                               target="_blank" style="font-size: larger">
-                            Gitee：学习项目源代码托管地址
-                        </a></li>
-                    </ul>
-                </div>
+            <div class="footer-service-item footer-icon-002">
+                <i></i>
+                <span>扎实编程能力</span>
+            </div>
+            <div class="footer-service-item footer-icon-003">
+                <i></i>
+                <span>学习能力强</span>
+            </div>
+            <div class="footer-service-item footer-icon-004">
+                <i></i>
+                <span>掌握多门编程语言</span>
             </div>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li style="font-size: larger">关于我</li>
-                        <li style="font-size: larger">我的博客文章，主要是计算机学习方面</li>
-                        <li style="font-size: larger">我的代码托管平台，以C++和Java为主</li>
-                        <li style="font-size: larger">也是代码托管平台，以C++和Java为主</li>
-                    </ul>
+        <div class="footer-line"></div>
+        <div class="footer-links clearfix">
+            <dl class="footer-article-item">
+                <dt>擅长编程语言</dt>
+                <dd>
+                    <a href="#">Java</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++</a>
+                </dd>
+                <dd>
+                    <a href="#">Python</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>关于开发者</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">CSDN博客</a>
+                </dd>
+                <dd>
+                    <a href="#">专注后端</a>
+                </dd>
+                <dd>
+                    <a href="#">兼为前端</a>
+                </dd>
+                <dd>
+                    <a href="#">数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">专业出身</a>
+                </dd>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">联系我</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>擅长领域</dt>
+                <dd>
+                    <a href="#">Java Web</a>
+                </dd>
+                <dd>
+                    <a href="#">MFC客户端</a>
+                </dd>
+                <dd>
+                    <a href="#">PyQT5</a>
+                </dd>
+                <dd>
+                    <a href="#">Python 数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++ 数据结构</a>
+                </dd>
+                <dd>
+                    <a href="#">Java 后端</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>其他</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">博客地址</a>
+                </dd>
+                <dd>
+                    <a href=" https://github.com/pyc-ycy">Github</a>
+                </dd>
+                <dd>
+                    <a href="https://gitee.com/pengyoucongcode">Gitee</a>
+                </dd>
+            </dl>
+            <dl class="footer-contact-item">
+                <h3>联系我们</h3>
+                <p>150-14366986</p>
+                <div class="footer-ewm">
+                    <img src="images/vm.png" alt="">
+                    <p>关注CSDN博客</p>
                 </div>
-            </div>
+            </dl>
+        </div>
+        <div class="footer-friend">
+            <div class="footer-friend-title">友情链接：</div>
+            <ul class="footer-friend-title-list clearfix">
+                <li>
+                    <a href="http://www.baidu.com" target="_blank">百度一下</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
+                </li>
+                <li>
+                    <a href="https://mvnrepository.com/" target="_blank">Maven中心仓库</a>
+                </li>
+                <li>
+                    <a href="https://www.bilibili.com/" target="_blank">B站</a>
+                </li>
+                <li>
+                    <a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>
+                </li>
+                <li>
+                    <a href="https://www.w3school.com.cn/" target="_blank">W3Cschool</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/linux/linux-tutorial.html" target="_blank">Linux学习</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">Bootstrap学习</a>
+                </li>
+                <li>
+                    <a href="https://cn.vuejs.org/" target="_blank">Vuejs</a>
+                </li>
+            </ul>
+            <a href="#" class="footer-friend-more">更多 >></a>
+        </div>
+        <div class="footer-copyright">
+            <p>© 2017-2021 (彭友聪) 开发，并保留所有权利&nbsp;&nbsp;&nbsp;常年法律顾问: （深圳）律师事务所</p>
+            <p>
+                陆丰市河西街道xxxxx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a href="#">
+                    <img src="images/icon-footer.png" alt="">**网安备 0008899999xxxx号
+                </a>
+            </p>
         </div>
-    </div>
-</div>
-
-<div id="footer">
-    <div style="text-align: center">
-        <p>
-            <span>@2020 御承扬Copyright&copy;2020-05-04</span>
-        </p>
     </div>
 </div>
 <div id="scroll">
@@ -224,28 +314,5 @@
 </div>
 <script type="text/javascript" src="../../static/js/jquery-1.11.3.js"></script>
 <script type="text/javascript" src="../../static/js/oppo.js"></script>
-<script>
-    window.onload = function () {
-
-        let tp = document.getElementById("btn");
-        tp.style.display = "none";
-        let timer = null;
-        tp.onclick = function () {
-            timer = setInterval(function () {
-                let backTop = document.documentElement.scrollTop || document.body.scrollTop;
-                // 越滚月慢
-                let speedTop = backTop / 5;
-                document.documentElement.scrollTop -= backTop - speedTop;
-                if (backTop === 0) {
-                    clearInterval(timer);
-                }
-            }, 30);
-        }
-        let pageHeight = 700;
-        let nav = document.getElementById("nav");
-        let navTop = nav.offsetTop;
-    }
-
-</script>
 </body>
 </html>
\ No newline at end of file

src/main/resources/templates/page/BrowseNews.html

@@ -146,51 +146,6 @@
                 </div>
             </div>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">联系方式</a></li>
-                        <li><a href="#" style="font-size: larger">15014366986</a></li>
-                        <li><a href="#" style="font-size: larger">2923616405</a></li>
-                        <li><a href="#" style="font-size: larger">pyc852164</a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">关于我</a></li>
-                        <li><a href="https://blog.csdn.net/qq_42896653"
-                               target="_blank" style="font-size: larger">
-                            CSDN:我的关于计算机学习的博客地址
-                        </a></li>
-                        <li><a href="https://github.com/pyc-ycy"
-                               target="_blank" style="font-size: larger">
-                            Github：编程学习项目源代码托管仓库地址
-                        </a></li>
-                        <li><a href="https://gitee.com/pengyoucongcode"
-                               target="_blank" style="font-size: larger">
-                            Gitee：学习项目源代码托管地址
-                        </a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li style="font-size: larger">关于我</li>
-                        <li style="font-size: larger">我的博客文章，主要是计算机学习方面</li>
-                        <li style="font-size: larger">我的代码托管平台，以C++和Java为主</li>
-                        <li style="font-size: larger">也是代码托管平台，以C++和Java为主</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
     </div>
 </div>
 
@@ -199,11 +154,146 @@
     <div class="scrollItem" id="toTop">顶部</div>
     <div class="scrollItem" id="toBottom">底部</div>
 </div>
-<div id="footer">
-    <div style="text-align: center">
-        <p>
-            <span>@2020 御承扬Copyright&copy;2020-05-04</span>
-        </p>
+<link rel="stylesheet" href="../../static/css/footer.css">
+<div class="footer-box">
+    <div class="footer-container">
+        <div class="footer-service clearfix">
+            <div class="footer-service-item footer-icon-001">
+                <i></i>
+                <span>专注于后端开发</span>
+            </div>
+            <div class="footer-service-item footer-icon-002">
+                <i></i>
+                <span>扎实编程能力</span>
+            </div>
+            <div class="footer-service-item footer-icon-003">
+                <i></i>
+                <span>学习能力强</span>
+            </div>
+            <div class="footer-service-item footer-icon-004">
+                <i></i>
+                <span>掌握多门编程语言</span>
+            </div>
+        </div>
+        <div class="footer-line"></div>
+        <div class="footer-links clearfix">
+            <dl class="footer-article-item">
+                <dt>擅长编程语言</dt>
+                <dd>
+                    <a href="#">Java</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++</a>
+                </dd>
+                <dd>
+                    <a href="#">Python</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>关于开发者</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">CSDN博客</a>
+                </dd>
+                <dd>
+                    <a href="#">专注后端</a>
+                </dd>
+                <dd>
+                    <a href="#">兼为前端</a>
+                </dd>
+                <dd>
+                    <a href="#">数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">专业出身</a>
+                </dd>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">联系我</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>擅长领域</dt>
+                <dd>
+                    <a href="#">Java Web</a>
+                </dd>
+                <dd>
+                    <a href="#">MFC客户端</a>
+                </dd>
+                <dd>
+                    <a href="#">PyQT5</a>
+                </dd>
+                <dd>
+                    <a href="#">Python 数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++ 数据结构</a>
+                </dd>
+                <dd>
+                    <a href="#">Java 后端</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>其他</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">博客地址</a>
+                </dd>
+                <dd>
+                    <a href=" https://github.com/pyc-ycy">Github</a>
+                </dd>
+                <dd>
+                    <a href="https://gitee.com/pengyoucongcode">Gitee</a>
+                </dd>
+            </dl>
+            <dl class="footer-contact-item">
+                <h3>联系我们</h3>
+                <p>150-14366986</p>
+                <div class="footer-ewm">
+                    <img src="images/vm.png" alt="">
+                    <p>关注CSDN博客</p>
+                </div>
+            </dl>
+        </div>
+        <div class="footer-friend">
+            <div class="footer-friend-title">友情链接：</div>
+            <ul class="footer-friend-title-list clearfix">
+                <li>
+                    <a href="http://www.baidu.com" target="_blank">百度一下</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
+                </li>
+                <li>
+                    <a href="https://mvnrepository.com/" target="_blank">Maven中心仓库</a>
+                </li>
+                <li>
+                    <a href="https://www.bilibili.com/" target="_blank">B站</a>
+                </li>
+                <li>
+                    <a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>
+                </li>
+                <li>
+                    <a href="https://www.w3school.com.cn/" target="_blank">W3Cschool</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/linux/linux-tutorial.html" target="_blank">Linux学习</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">Bootstrap学习</a>
+                </li>
+                <li>
+                    <a href="https://cn.vuejs.org/" target="_blank">Vuejs</a>
+                </li>
+            </ul>
+            <a href="#" class="footer-friend-more">更多 >></a>
+        </div>
+        <div class="footer-copyright">
+            <p>© 2017-2021 (彭友聪) 开发，并保留所有权利&nbsp;&nbsp;&nbsp;常年法律顾问: （深圳）律师事务所</p>
+            <p>
+                陆丰市河西街道xxxxx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a href="#">
+                    <img src="images/icon-footer.png" alt="">**网安备 0008899999xxxx号
+                </a>
+            </p>
+        </div>
     </div>
 </div>
 <script type="text/javascript" src="../../static/js/jquery-1.11.3.js"></script>

src/main/resources/templates/page/BrowserQuestion.html

@@ -157,62 +157,152 @@
                 </table>
             </div>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">联系方式</a></li>
-                        <li><a href="#" style="font-size: larger">15014366986</a></li>
-                        <li><a href="#" style="font-size: larger">2923616405</a></li>
-                        <li><a href="#" style="font-size: larger">pyc852164</a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">关于我</a></li>
-                        <li><a href="https://blog.csdn.net/qq_42896653"
-                               target="_blank" style="font-size: larger">
-                            CSDN:我的关于计算机学习的博客地址
-                        </a></li>
-                        <li><a href="https://github.com/pyc-ycy"
-                               target="_blank" style="font-size: larger">
-                            Github：编程学习项目源代码托管仓库地址
-                        </a></li>
-                        <li><a href="https://gitee.com/pengyoucongcode"
-                               target="_blank" style="font-size: larger">
-                            Gitee：学习项目源代码托管地址
-                        </a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li style="font-size: larger">关于我</li>
-                        <li style="font-size: larger">我的博客文章，主要是计算机学习方面</li>
-                        <li style="font-size: larger">我的代码托管平台，以C++和Java为主</li>
-                        <li style="font-size: larger">也是代码托管平台，以C++和Java为主</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
     </div>
 </div>
 <div id="scroll">
     <div class="scrollItem" id="toTop">顶部</div>
     <div class="scrollItem" id="toBottom">底部</div>
 </div>
-<div id="footer">
-    <div style="text-align: center">
-        <p>
-            <span>@2020 御承扬Copyright&copy;2020-05-04</span>
-        </p>
+<link rel="stylesheet" href="../../static/css/footer.css">
+<div class="footer-box">
+    <div class="footer-container">
+        <div class="footer-service clearfix">
+            <div class="footer-service-item footer-icon-001">
+                <i></i>
+                <span>专注于后端开发</span>
+            </div>
+            <div class="footer-service-item footer-icon-002">
+                <i></i>
+                <span>扎实编程能力</span>
+            </div>
+            <div class="footer-service-item footer-icon-003">
+                <i></i>
+                <span>学习能力强</span>
+            </div>
+            <div class="footer-service-item footer-icon-004">
+                <i></i>
+                <span>掌握多门编程语言</span>
+            </div>
+        </div>
+        <div class="footer-line"></div>
+        <div class="footer-links clearfix">
+            <dl class="footer-article-item">
+                <dt>擅长编程语言</dt>
+                <dd>
+                    <a href="#">Java</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++</a>
+                </dd>
+                <dd>
+                    <a href="#">Python</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>关于开发者</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">CSDN博客</a>
+                </dd>
+                <dd>
+                    <a href="#">专注后端</a>
+                </dd>
+                <dd>
+                    <a href="#">兼为前端</a>
+                </dd>
+                <dd>
+                    <a href="#">数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">专业出身</a>
+                </dd>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">联系我</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>擅长领域</dt>
+                <dd>
+                    <a href="#">Java Web</a>
+                </dd>
+                <dd>
+                    <a href="#">MFC客户端</a>
+                </dd>
+                <dd>
+                    <a href="#">PyQT5</a>
+                </dd>
+                <dd>
+                    <a href="#">Python 数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++ 数据结构</a>
+                </dd>
+                <dd>
+                    <a href="#">Java 后端</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>其他</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">博客地址</a>
+                </dd>
+                <dd>
+                    <a href=" https://github.com/pyc-ycy">Github</a>
+                </dd>
+                <dd>
+                    <a href="https://gitee.com/pengyoucongcode">Gitee</a>
+                </dd>
+            </dl>
+            <dl class="footer-contact-item">
+                <h3>联系我们</h3>
+                <p>150-14366986</p>
+                <div class="footer-ewm">
+                    <img src="images/vm.png" alt="">
+                    <p>关注CSDN博客</p>
+                </div>
+            </dl>
+        </div>
+        <div class="footer-friend">
+            <div class="footer-friend-title">友情链接：</div>
+            <ul class="footer-friend-title-list clearfix">
+                <li>
+                    <a href="http://www.baidu.com" target="_blank">百度一下</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
+                </li>
+                <li>
+                    <a href="https://mvnrepository.com/" target="_blank">Maven中心仓库</a>
+                </li>
+                <li>
+                    <a href="https://www.bilibili.com/" target="_blank">B站</a>
+                </li>
+                <li>
+                    <a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>
+                </li>
+                <li>
+                    <a href="https://www.w3school.com.cn/" target="_blank">W3Cschool</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/linux/linux-tutorial.html" target="_blank">Linux学习</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">Bootstrap学习</a>
+                </li>
+                <li>
+                    <a href="https://cn.vuejs.org/" target="_blank">Vuejs</a>
+                </li>
+            </ul>
+            <a href="#" class="footer-friend-more">更多 >></a>
+        </div>
+        <div class="footer-copyright">
+            <p>© 2017-2021 (彭友聪) 开发，并保留所有权利&nbsp;&nbsp;&nbsp;常年法律顾问: （深圳）律师事务所</p>
+            <p>
+                陆丰市河西街道xxxxx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a href="#">
+                    <img src="images/icon-footer.png" alt="">**网安备 0008899999xxxx号
+                </a>
+            </p>
+        </div>
     </div>
 </div>
 <script type="text/javascript" src="../../static/js/jquery-1.11.3.js"></script>

src/main/resources/templates/page/English.html

@@ -49,71 +49,6 @@
             margin: 0;
             padding: 0;
         }
-
-        .main {
-            margin: 10px auto;
-            width: 65%;
-            height: 1400px;
-            /*background-color: yellowgreen;*/
-        }
-
-        .main p {
-            font-size: 18px;
-            text-indent: 3em;
-        }
-
-        .main h1 {
-            font-size: 24px;
-        }
-
-        .main img {
-            margin-left: 25px;
-        }
-
-        .line {
-            border: 1px solid black;
-            /*margin-left: 10%;*/
-            width: 25%;
-        }
-
-        .main h2 {
-            font-size: 20px;
-            text-indent: 25px;
-        }
-
-        .leftContent {
-            position: fixed;
-            left: 0;
-            top: 14%;
-            bottom: 50px;
-            width: 15%;
-            height: 80%;
-            background-color: #fff;
-        }
-
-        .item {
-            margin: 50px 20px;
-        }
-
-        .item-bgc {
-            text-align: center;
-            line-height: 50px;
-            vertical-align: middle;
-            background-color: #9e9899;
-            height: 50px;
-        }
-
-        .leftContent a {
-            font-size: 18px;
-            text-decoration: none;
-            color: #2e6da4;
-        }
-
-        .leftContent a:hover {
-            font-size: 22px;
-            text-decoration: black;
-            color: blue;
-        }
     </style>
 </head>
 <body>
@@ -230,51 +165,6 @@
                 英语的思维与汉语的思维，区别挺大的。例如，英语多被动，汉语多主动。因此，阅读英语、写英语句子要注意用英语的思维。
             </p>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">联系方式</a></li>
-                        <li><a href="#" style="font-size: larger">15014366986</a></li>
-                        <li><a href="#" style="font-size: larger">2923616405</a></li>
-                        <li><a href="#" style="font-size: larger">pyc852164</a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">关于我</a></li>
-                        <li><a href="https://blog.csdn.net/qq_42896653"
-                               target="_blank" style="font-size: larger">
-                            CSDN:我的关于计算机学习的博客地址
-                        </a></li>
-                        <li><a href="https://github.com/pyc-ycy"
-                               target="_blank" style="font-size: larger">
-                            Github：编程学习项目源代码托管仓库地址
-                        </a></li>
-                        <li><a href="https://gitee.com/pengyoucongcode"
-                               target="_blank" style="font-size: larger">
-                            Gitee：学习项目源代码托管地址
-                        </a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li style="font-size: larger">关于我</li>
-                        <li style="font-size: larger">我的博客文章，主要是计算机学习方面</li>
-                        <li style="font-size: larger">我的代码托管平台，以C++和Java为主</li>
-                        <li style="font-size: larger">也是代码托管平台，以C++和Java为主</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
     </div>
 </div>
 
@@ -282,11 +172,146 @@
     <div class="scrollItem" id="toTop">顶部</div>
     <div class="scrollItem" id="toBottom">底部</div>
 </div>
-<div id="footer">
-    <div style="text-align: center">
-        <p>
-            <span>@2020 御承扬Copyright&copy;2020-05-04</span>
-        </p>
+<link rel="stylesheet" href="../../static/css/footer.css">
+<div class="footer-box">
+    <div class="footer-container">
+        <div class="footer-service clearfix">
+            <div class="footer-service-item footer-icon-001">
+                <i></i>
+                <span>专注于后端开发</span>
+            </div>
+            <div class="footer-service-item footer-icon-002">
+                <i></i>
+                <span>扎实编程能力</span>
+            </div>
+            <div class="footer-service-item footer-icon-003">
+                <i></i>
+                <span>学习能力强</span>
+            </div>
+            <div class="footer-service-item footer-icon-004">
+                <i></i>
+                <span>掌握多门编程语言</span>
+            </div>
+        </div>
+        <div class="footer-line"></div>
+        <div class="footer-links clearfix">
+            <dl class="footer-article-item">
+                <dt>擅长编程语言</dt>
+                <dd>
+                    <a href="#">Java</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++</a>
+                </dd>
+                <dd>
+                    <a href="#">Python</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>关于开发者</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">CSDN博客</a>
+                </dd>
+                <dd>
+                    <a href="#">专注后端</a>
+                </dd>
+                <dd>
+                    <a href="#">兼为前端</a>
+                </dd>
+                <dd>
+                    <a href="#">数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">专业出身</a>
+                </dd>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">联系我</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>擅长领域</dt>
+                <dd>
+                    <a href="#">Java Web</a>
+                </dd>
+                <dd>
+                    <a href="#">MFC客户端</a>
+                </dd>
+                <dd>
+                    <a href="#">PyQT5</a>
+                </dd>
+                <dd>
+                    <a href="#">Python 数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++ 数据结构</a>
+                </dd>
+                <dd>
+                    <a href="#">Java 后端</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>其他</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">博客地址</a>
+                </dd>
+                <dd>
+                    <a href=" https://github.com/pyc-ycy">Github</a>
+                </dd>
+                <dd>
+                    <a href="https://gitee.com/pengyoucongcode">Gitee</a>
+                </dd>
+            </dl>
+            <dl class="footer-contact-item">
+                <h3>联系我们</h3>
+                <p>150-14366986</p>
+                <div class="footer-ewm">
+                    <img src="images/vm.png" alt="">
+                    <p>关注CSDN博客</p>
+                </div>
+            </dl>
+        </div>
+        <div class="footer-friend">
+            <div class="footer-friend-title">友情链接：</div>
+            <ul class="footer-friend-title-list clearfix">
+                <li>
+                    <a href="http://www.baidu.com" target="_blank">百度一下</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
+                </li>
+                <li>
+                    <a href="https://mvnrepository.com/" target="_blank">Maven中心仓库</a>
+                </li>
+                <li>
+                    <a href="https://www.bilibili.com/" target="_blank">B站</a>
+                </li>
+                <li>
+                    <a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>
+                </li>
+                <li>
+                    <a href="https://www.w3school.com.cn/" target="_blank">W3Cschool</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/linux/linux-tutorial.html" target="_blank">Linux学习</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">Bootstrap学习</a>
+                </li>
+                <li>
+                    <a href="https://cn.vuejs.org/" target="_blank">Vuejs</a>
+                </li>
+            </ul>
+            <a href="#" class="footer-friend-more">更多 >></a>
+        </div>
+        <div class="footer-copyright">
+            <p>© 2017-2021 (彭友聪) 开发，并保留所有权利&nbsp;&nbsp;&nbsp;常年法律顾问: （深圳）律师事务所</p>
+            <p>
+                陆丰市河西街道xxxxx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a href="#">
+                    <img src="images/icon-footer.png" alt="">**网安备 0008899999xxxx号
+                </a>
+            </p>
+        </div>
     </div>
 </div>
 <script type="text/javascript" src="../../static/js/jquery-1.11.3.js"></script>

src/main/resources/templates/page/FeedBack.html

@@ -28,11 +28,6 @@
             margin: 0;
             padding: 0;
         }
-        .user-info{
-            margin: 10px auto;
-            width: 800px;
-            height: auto;
-        }
         #scroll {
             position:fixed; top:300px; right:100px;
         }
@@ -174,58 +169,148 @@
                 </div>
             </div>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">联系方式</a></li>
-                        <li><a href="#" style="font-size: larger">15014366986</a></li>
-                        <li><a href="#" style="font-size: larger">2923616405</a></li>
-                        <li><a href="#" style="font-size: larger">pyc852164</a></li>
-                    </ul>
-                </div>
+    </div>
+</div>
+<link rel="stylesheet" href="../../static/css/footer.css">
+<div class="footer-box">
+    <div class="footer-container">
+        <div class="footer-service clearfix">
+            <div class="footer-service-item footer-icon-001">
+                <i></i>
+                <span>专注于后端开发</span>
             </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">关于我</a></li>
-                        <li><a href="https://blog.csdn.net/qq_42896653"
-                               target="_blank" style="font-size: larger">
-                            CSDN:我的关于计算机学习的博客地址
-                        </a></li>
-                        <li><a href="https://github.com/pyc-ycy"
-                               target="_blank" style="font-size: larger">
-                            Github：编程学习项目源代码托管仓库地址
-                        </a></li>
-                        <li><a href="https://gitee.com/pengyoucongcode"
-                               target="_blank" style="font-size: larger">
-                            Gitee：学习项目源代码托管地址
-                        </a></li>
-                    </ul>
-                </div>
+            <div class="footer-service-item footer-icon-002">
+                <i></i>
+                <span>扎实编程能力</span>
+            </div>
+            <div class="footer-service-item footer-icon-003">
+                <i></i>
+                <span>学习能力强</span>
+            </div>
+            <div class="footer-service-item footer-icon-004">
+                <i></i>
+                <span>掌握多门编程语言</span>
             </div>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li style="font-size: larger">关于我</li>
-                        <li style="font-size: larger">我的博客文章，主要是计算机学习方面</li>
-                        <li style="font-size: larger">我的代码托管平台，以C++和Java为主</li>
-                        <li style="font-size: larger">也是代码托管平台，以C++和Java为主</li>
-                    </ul>
+        <div class="footer-line"></div>
+        <div class="footer-links clearfix">
+            <dl class="footer-article-item">
+                <dt>擅长编程语言</dt>
+                <dd>
+                    <a href="#">Java</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++</a>
+                </dd>
+                <dd>
+                    <a href="#">Python</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>关于开发者</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">CSDN博客</a>
+                </dd>
+                <dd>
+                    <a href="#">专注后端</a>
+                </dd>
+                <dd>
+                    <a href="#">兼为前端</a>
+                </dd>
+                <dd>
+                    <a href="#">数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">专业出身</a>
+                </dd>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">联系我</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>擅长领域</dt>
+                <dd>
+                    <a href="#">Java Web</a>
+                </dd>
+                <dd>
+                    <a href="#">MFC客户端</a>
+                </dd>
+                <dd>
+                    <a href="#">PyQT5</a>
+                </dd>
+                <dd>
+                    <a href="#">Python 数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++ 数据结构</a>
+                </dd>
+                <dd>
+                    <a href="#">Java 后端</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>其他</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">博客地址</a>
+                </dd>
+                <dd>
+                    <a href=" https://github.com/pyc-ycy">Github</a>
+                </dd>
+                <dd>
+                    <a href="https://gitee.com/pengyoucongcode">Gitee</a>
+                </dd>
+            </dl>
+            <dl class="footer-contact-item">
+                <h3>联系我们</h3>
+                <p>150-14366986</p>
+                <div class="footer-ewm">
+                    <img src="images/vm.png" alt="">
+                    <p>关注CSDN博客</p>
                 </div>
-            </div>
+            </dl>
+        </div>
+        <div class="footer-friend">
+            <div class="footer-friend-title">友情链接：</div>
+            <ul class="footer-friend-title-list clearfix">
+                <li>
+                    <a href="http://www.baidu.com" target="_blank">百度一下</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
+                </li>
+                <li>
+                    <a href="https://mvnrepository.com/" target="_blank">Maven中心仓库</a>
+                </li>
+                <li>
+                    <a href="https://www.bilibili.com/" target="_blank">B站</a>
+                </li>
+                <li>
+                    <a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>
+                </li>
+                <li>
+                    <a href="https://www.w3school.com.cn/" target="_blank">W3Cschool</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/linux/linux-tutorial.html" target="_blank">Linux学习</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">Bootstrap学习</a>
+                </li>
+                <li>
+                    <a href="https://cn.vuejs.org/" target="_blank">Vuejs</a>
+                </li>
+            </ul>
+            <a href="#" class="footer-friend-more">更多 >></a>
+        </div>
+        <div class="footer-copyright">
+            <p>© 2017-2021 (彭友聪) 开发，并保留所有权利&nbsp;&nbsp;&nbsp;常年法律顾问: （深圳）律师事务所</p>
+            <p>
+                陆丰市河西街道xxxxx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a href="#">
+                    <img src="images/icon-footer.png" alt="">**网安备 0008899999xxxx号
+                </a>
+            </p>
         </div>
-    </div>
-</div>
-<div id="footer">
-    <div style="text-align: center">
-        <p>
-            <span>@2020 御承扬Copyright&copy;2020-05-04</span>
-        </p>
     </div>
 </div>
 <div id="scroll">

src/main/resources/templates/page/Footer.html

+<!DOCTYPE html>
+<link rel="stylesheet" href="../../static/css/footer.css">
+<div class="footer-box">
+    <div class="footer-container">
+        <div class="footer-service clearfix">
+            <div class="footer-service-item footer-icon-001">
+                <i></i>
+                <span>专注服务于电商领域</span>
+            </div>
+            <div class="footer-service-item footer-icon-002">
+                <i></i>
+                <span>资深电商客服专家</span>
+            </div>
+            <div class="footer-service-item footer-icon-003">
+                <i></i>
+                <span>一对一专属会员经理</span>
+            </div>
+            <div class="footer-service-item footer-icon-004">
+                <i></i>
+                <span>385万用户诚意推荐</span>
+            </div>
+        </div>
+        <div class="footer-line"></div>
+        <div class="footer-links clearfix">
+            <dl class="footer-article-item">
+                <dt>旗下品牌</dt>
+                <dd>
+                    <a href="#">jq22</a>
+                </dd>
+                <dd>
+                    <a href="#">ECJia</a>
+                </dd>
+                <dd>
+                    <a href="#">ECTouch</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>关于我们</dt>
+                <dd>
+                    <a href="#">公司介绍</a>
+                </dd>
+                <dd>
+                    <a href="#">发展历程</a>
+                </dd>
+                <dd>
+                    <a href="#">团队风采</a>
+                </dd>
+                <dd>
+                    <a href="#">办公环境</a>
+                </dd>
+                <dd>
+                    <a href="#">荣誉资质</a>
+                </dd>
+                <dd>
+                    <a href="#">联系我们</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>精品教程</dt>
+                <dd>
+                    <a href="#">模板说明</a>
+                </dd>
+                <dd>
+                    <a href="#">jq22教程</a>
+                </dd>
+                <dd>
+                    <a href="#">微商城教程</a>
+                </dd>
+                <dd>
+                    <a href="#">APP教程</a>
+                </dd>
+                <dd>
+                    <a href="#">视频指导</a>
+                </dd>
+                <dd>
+                    <a href="#">问答堂</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>其他</dt>
+                <dd>
+                    <a href="#">官方论坛</a>
+                </dd>
+                <dd>
+                    <a href="#">服务支持</a>
+                </dd>
+                <dd>
+                    <a href="#">电商大会</a>
+                </dd>
+                <dd>
+                    <a href="#">投诉建议</a>
+                </dd>
+                <dd>
+                    <a href="#">支付方式</a>
+                </dd>
+                <dd>
+                    <a href="#">站点地图</a>
+                </dd>
+            </dl>
+            <dl class="footer-contact-item">
+                <h3>联系我们</h3>
+                <p>400-010-xxx</p>
+                <div class="footer-ewm">
+                    <img src="images/vm.png" alt="">
+                    <p>关注微信订阅号</p>
+                </div>
+            </dl>
+        </div>
+        <div class="footer-friend">
+            <div class="footer-friend-title">友情链接：</div>
+            <ul class="footer-friend-title-list clearfix">
+                <li>
+                    <a href="#">jq22</a>
+                </li>
+                <li>
+                    <a href="#">移动商城购物</a>
+                </li>
+                <li>
+                    <a href="#">APP商城开发</a>
+                </li>
+                <li>
+                    <a href="#">DESTOON B2B</a>
+                </li>
+                <li>
+                    <a href="#">Linux  </a>
+                </li>
+                <li>
+                    <a href="#">Linux 面板</a>
+                </li>
+                <li>
+                    <a href="#">Chrome插件</a>
+                </li>
+                <li>
+                    <a href="#">W3Cschool</a>
+                </li>
+                <li>
+                    <a href="#">网站</a>
+                </li>
+                <li>
+                    <a href="#">工具</a>
+                </li>
+                <li>
+                    <a href="#">移动商城购物</a>
+                </li>
+
+            </ul>
+            <a href="#" class="footer-friend-more">更多 >></a>
+        </div>
+        <div class="footer-copyright">
+            <p>© 2002-2018 (jq22.com) 版权所有，并保留所有权利&nbsp;&nbsp;&nbsp;常年法律顾问: （天津）律师事务所</p>
+            <p>
+                天津市南开二纬路xxxx号劝业场&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a href="#">
+                    <img src="images/icon-footer.png" alt="">**网安备 0008899999xxxx号
+                </a>
+            </p>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/main/resources/templates/page/Help.html

@@ -28,11 +28,6 @@
             margin: 0;
             padding: 0;
         }
-        .user-info{
-            margin: 10px auto;
-            width: 800px;
-            height: auto;
-        }
         #scroll {
             position:fixed; top:300px; right:100px;
         }
@@ -218,58 +213,148 @@
                 </div>
             </div>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">联系方式</a></li>
-                        <li><a href="#" style="font-size: larger">15014366986</a></li>
-                        <li><a href="#" style="font-size: larger">2923616405</a></li>
-                        <li><a href="#" style="font-size: larger">pyc852164</a></li>
-                    </ul>
-                </div>
+    </div>
+</div>
+<link rel="stylesheet" href="../../static/css/footer.css">
+<div class="footer-box">
+    <div class="footer-container">
+        <div class="footer-service clearfix">
+            <div class="footer-service-item footer-icon-001">
+                <i></i>
+                <span>专注于后端开发</span>
             </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">关于我</a></li>
-                        <li><a href="https://blog.csdn.net/qq_42896653"
-                               target="_blank" style="font-size: larger">
-                            CSDN:我的关于计算机学习的博客地址
-                        </a></li>
-                        <li><a href="https://github.com/pyc-ycy"
-                               target="_blank" style="font-size: larger">
-                            Github：编程学习项目源代码托管仓库地址
-                        </a></li>
-                        <li><a href="https://gitee.com/pengyoucongcode"
-                               target="_blank" style="font-size: larger">
-                            Gitee：学习项目源代码托管地址
-                        </a></li>
-                    </ul>
-                </div>
+            <div class="footer-service-item footer-icon-002">
+                <i></i>
+                <span>扎实编程能力</span>
+            </div>
+            <div class="footer-service-item footer-icon-003">
+                <i></i>
+                <span>学习能力强</span>
+            </div>
+            <div class="footer-service-item footer-icon-004">
+                <i></i>
+                <span>掌握多门编程语言</span>
             </div>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li style="font-size: larger">关于我</li>
-                        <li style="font-size: larger">我的博客文章，主要是计算机学习方面</li>
-                        <li style="font-size: larger">我的代码托管平台，以C++和Java为主</li>
-                        <li style="font-size: larger">也是代码托管平台，以C++和Java为主</li>
-                    </ul>
+        <div class="footer-line"></div>
+        <div class="footer-links clearfix">
+            <dl class="footer-article-item">
+                <dt>擅长编程语言</dt>
+                <dd>
+                    <a href="#">Java</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++</a>
+                </dd>
+                <dd>
+                    <a href="#">Python</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>关于开发者</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">CSDN博客</a>
+                </dd>
+                <dd>
+                    <a href="#">专注后端</a>
+                </dd>
+                <dd>
+                    <a href="#">兼为前端</a>
+                </dd>
+                <dd>
+                    <a href="#">数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">专业出身</a>
+                </dd>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">联系我</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>擅长领域</dt>
+                <dd>
+                    <a href="#">Java Web</a>
+                </dd>
+                <dd>
+                    <a href="#">MFC客户端</a>
+                </dd>
+                <dd>
+                    <a href="#">PyQT5</a>
+                </dd>
+                <dd>
+                    <a href="#">Python 数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++ 数据结构</a>
+                </dd>
+                <dd>
+                    <a href="#">Java 后端</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>其他</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">博客地址</a>
+                </dd>
+                <dd>
+                    <a href=" https://github.com/pyc-ycy">Github</a>
+                </dd>
+                <dd>
+                    <a href="https://gitee.com/pengyoucongcode">Gitee</a>
+                </dd>
+            </dl>
+            <dl class="footer-contact-item">
+                <h3>联系我们</h3>
+                <p>150-14366986</p>
+                <div class="footer-ewm">
+                    <img src="images/vm.png" alt="">
+                    <p>关注CSDN博客</p>
                 </div>
-            </div>
+            </dl>
+        </div>
+        <div class="footer-friend">
+            <div class="footer-friend-title">友情链接：</div>
+            <ul class="footer-friend-title-list clearfix">
+                <li>
+                    <a href="http://www.baidu.com" target="_blank">百度一下</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
+                </li>
+                <li>
+                    <a href="https://mvnrepository.com/" target="_blank">Maven中心仓库</a>
+                </li>
+                <li>
+                    <a href="https://www.bilibili.com/" target="_blank">B站</a>
+                </li>
+                <li>
+                    <a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>
+                </li>
+                <li>
+                    <a href="https://www.w3school.com.cn/" target="_blank">W3Cschool</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/linux/linux-tutorial.html" target="_blank">Linux学习</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">Bootstrap学习</a>
+                </li>
+                <li>
+                    <a href="https://cn.vuejs.org/" target="_blank">Vuejs</a>
+                </li>
+            </ul>
+            <a href="#" class="footer-friend-more">更多 >></a>
+        </div>
+        <div class="footer-copyright">
+            <p>© 2017-2021 (彭友聪) 开发，并保留所有权利&nbsp;&nbsp;&nbsp;常年法律顾问: （深圳）律师事务所</p>
+            <p>
+                陆丰市河西街道xxxxx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a href="#">
+                    <img src="images/icon-footer.png" alt="">**网安备 0008899999xxxx号
+                </a>
+            </p>
         </div>
-    </div>
-</div>
-<div id="footer">
-    <div style="text-align: center">
-        <p>
-            <span>@2020 御承扬Copyright&copy;2020-05-04</span>
-        </p>
     </div>
 </div>
 <div id="scroll">

src/main/resources/templates/page/Home.html

@@ -219,58 +219,148 @@
                 </div>
             </div>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">联系方式</a></li>
-                        <li><a href="#" style="font-size: larger">15014366986</a></li>
-                        <li><a href="#" style="font-size: larger">2923616405</a></li>
-                        <li><a href="#" style="font-size: larger">pyc852164</a></li>
-                    </ul>
-                </div>
+    </div>
+</div>
+<link rel="stylesheet" href="../../static/css/footer.css">
+<div class="footer-box">
+    <div class="footer-container">
+        <div class="footer-service clearfix">
+            <div class="footer-service-item footer-icon-001">
+                <i></i>
+                <span>专注于后端开发</span>
             </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">关于我</a></li>
-                        <li><a href="https://blog.csdn.net/qq_42896653"
-                               target="_blank" style="font-size: larger">
-                            CSDN:我的关于计算机学习的博客地址
-                        </a></li>
-                        <li><a href="https://github.com/pyc-ycy"
-                               target="_blank" style="font-size: larger">
-                            Github：编程学习项目源代码托管仓库地址
-                        </a></li>
-                        <li><a href="https://gitee.com/pengyoucongcode"
-                               target="_blank" style="font-size: larger">
-                            Gitee：学习项目源代码托管地址
-                        </a></li>
-                    </ul>
-                </div>
+            <div class="footer-service-item footer-icon-002">
+                <i></i>
+                <span>扎实编程能力</span>
+            </div>
+            <div class="footer-service-item footer-icon-003">
+                <i></i>
+                <span>学习能力强</span>
+            </div>
+            <div class="footer-service-item footer-icon-004">
+                <i></i>
+                <span>掌握多门编程语言</span>
             </div>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li style="font-size: larger">关于我</li>
-                        <li style="font-size: larger">我的博客文章，主要是计算机学习方面</li>
-                        <li style="font-size: larger">我的代码托管平台，以C++和Java为主</li>
-                        <li style="font-size: larger">也是代码托管平台，以C++和Java为主</li>
-                    </ul>
+        <div class="footer-line"></div>
+        <div class="footer-links clearfix">
+            <dl class="footer-article-item">
+                <dt>擅长编程语言</dt>
+                <dd>
+                    <a href="#">Java</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++</a>
+                </dd>
+                <dd>
+                    <a href="#">Python</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>关于开发者</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">CSDN博客</a>
+                </dd>
+                <dd>
+                    <a href="#">专注后端</a>
+                </dd>
+                <dd>
+                    <a href="#">兼为前端</a>
+                </dd>
+                <dd>
+                    <a href="#">数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">专业出身</a>
+                </dd>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">联系我</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>擅长领域</dt>
+                <dd>
+                    <a href="#">Java Web</a>
+                </dd>
+                <dd>
+                    <a href="#">MFC客户端</a>
+                </dd>
+                <dd>
+                    <a href="#">PyQT5</a>
+                </dd>
+                <dd>
+                    <a href="#">Python 数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++ 数据结构</a>
+                </dd>
+                <dd>
+                    <a href="#">Java 后端</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>其他</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">博客地址</a>
+                </dd>
+                <dd>
+                    <a href=" https://github.com/pyc-ycy">Github</a>
+                </dd>
+                <dd>
+                    <a href="https://gitee.com/pengyoucongcode">Gitee</a>
+                </dd>
+            </dl>
+            <dl class="footer-contact-item">
+                <h3>联系我们</h3>
+                <p>150-14366986</p>
+                <div class="footer-ewm">
+                    <img src="images/vm.png" alt="">
+                    <p>关注CSDN博客</p>
                 </div>
-            </div>
+            </dl>
+        </div>
+        <div class="footer-friend">
+            <div class="footer-friend-title">友情链接：</div>
+            <ul class="footer-friend-title-list clearfix">
+                <li>
+                    <a href="http://www.baidu.com" target="_blank">百度一下</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
+                </li>
+                <li>
+                    <a href="https://mvnrepository.com/" target="_blank">Maven中心仓库</a>
+                </li>
+                <li>
+                    <a href="https://www.bilibili.com/" target="_blank">B站</a>
+                </li>
+                <li>
+                    <a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>
+                </li>
+                <li>
+                    <a href="https://www.w3school.com.cn/" target="_blank">W3Cschool</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/linux/linux-tutorial.html" target="_blank">Linux学习</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">Bootstrap学习</a>
+                </li>
+                <li>
+                    <a href="https://cn.vuejs.org/" target="_blank">Vuejs</a>
+                </li>
+            </ul>
+            <a href="#" class="footer-friend-more">更多 >></a>
+        </div>
+        <div class="footer-copyright">
+            <p>© 2017-2021 (彭友聪) 开发，并保留所有权利&nbsp;&nbsp;&nbsp;常年法律顾问: （深圳）律师事务所</p>
+            <p>
+                陆丰市河西街道xxxxx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a href="#">
+                    <img src="images/icon-footer.png" alt="">**网安备 0008899999xxxx号
+                </a>
+            </p>
         </div>
-    </div>
-</div>
-<div id="footer">
-    <div style="text-align: center">
-        <p>
-            <span>@2020 御承扬Copyright&copy;2020-05-04</span>
-        </p>
     </div>
 </div>
 <div id="scroll">

src/main/resources/templates/page/ImportGrade.html

@@ -202,62 +202,152 @@
                 </form>
             </div>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">联系方式</a></li>
-                        <li><a href="#" style="font-size: larger">15014366986</a></li>
-                        <li><a href="#" style="font-size: larger">2923616405</a></li>
-                        <li><a href="#" style="font-size: larger">pyc852164</a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">关于我</a></li>
-                        <li><a href="https://blog.csdn.net/qq_42896653"
-                               target="_blank" style="font-size: larger">
-                            CSDN:我的关于计算机学习的博客地址
-                        </a></li>
-                        <li><a href="https://github.com/pyc-ycy"
-                               target="_blank" style="font-size: larger">
-                            Github：编程学习项目源代码托管仓库地址
-                        </a></li>
-                        <li><a href="https://gitee.com/pengyoucongcode"
-                               target="_blank" style="font-size: larger">
-                            Gitee：学习项目源代码托管地址
-                        </a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li style="font-size: larger">关于我</li>
-                        <li style="font-size: larger">我的博客文章，主要是计算机学习方面</li>
-                        <li style="font-size: larger">我的代码托管平台，以C++和Java为主</li>
-                        <li style="font-size: larger">也是代码托管平台，以C++和Java为主</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
     </div>
 </div>
 <div id="scroll">
     <div class="scrollItem" id="toTop">顶部</div>
     <div class="scrollItem" id="toBottom">底部</div>
 </div>
-<div id="footer">
-    <div style="text-align: center">
-        <p>
-            <span>@2020 御承扬Copyright&copy;2020-05-04</span>
-        </p>
+<link rel="stylesheet" href="../../static/css/footer.css">
+<div class="footer-box">
+    <div class="footer-container">
+        <div class="footer-service clearfix">
+            <div class="footer-service-item footer-icon-001">
+                <i></i>
+                <span>专注于后端开发</span>
+            </div>
+            <div class="footer-service-item footer-icon-002">
+                <i></i>
+                <span>扎实编程能力</span>
+            </div>
+            <div class="footer-service-item footer-icon-003">
+                <i></i>
+                <span>学习能力强</span>
+            </div>
+            <div class="footer-service-item footer-icon-004">
+                <i></i>
+                <span>掌握多门编程语言</span>
+            </div>
+        </div>
+        <div class="footer-line"></div>
+        <div class="footer-links clearfix">
+            <dl class="footer-article-item">
+                <dt>擅长编程语言</dt>
+                <dd>
+                    <a href="#">Java</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++</a>
+                </dd>
+                <dd>
+                    <a href="#">Python</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>关于开发者</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">CSDN博客</a>
+                </dd>
+                <dd>
+                    <a href="#">专注后端</a>
+                </dd>
+                <dd>
+                    <a href="#">兼为前端</a>
+                </dd>
+                <dd>
+                    <a href="#">数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">专业出身</a>
+                </dd>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">联系我</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>擅长领域</dt>
+                <dd>
+                    <a href="#">Java Web</a>
+                </dd>
+                <dd>
+                    <a href="#">MFC客户端</a>
+                </dd>
+                <dd>
+                    <a href="#">PyQT5</a>
+                </dd>
+                <dd>
+                    <a href="#">Python 数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++ 数据结构</a>
+                </dd>
+                <dd>
+                    <a href="#">Java 后端</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>其他</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">博客地址</a>
+                </dd>
+                <dd>
+                    <a href=" https://github.com/pyc-ycy">Github</a>
+                </dd>
+                <dd>
+                    <a href="https://gitee.com/pengyoucongcode">Gitee</a>
+                </dd>
+            </dl>
+            <dl class="footer-contact-item">
+                <h3>联系我们</h3>
+                <p>150-14366986</p>
+                <div class="footer-ewm">
+                    <img src="images/vm.png" alt="">
+                    <p>关注CSDN博客</p>
+                </div>
+            </dl>
+        </div>
+        <div class="footer-friend">
+            <div class="footer-friend-title">友情链接：</div>
+            <ul class="footer-friend-title-list clearfix">
+                <li>
+                    <a href="http://www.baidu.com" target="_blank">百度一下</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
+                </li>
+                <li>
+                    <a href="https://mvnrepository.com/" target="_blank">Maven中心仓库</a>
+                </li>
+                <li>
+                    <a href="https://www.bilibili.com/" target="_blank">B站</a>
+                </li>
+                <li>
+                    <a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>
+                </li>
+                <li>
+                    <a href="https://www.w3school.com.cn/" target="_blank">W3Cschool</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/linux/linux-tutorial.html" target="_blank">Linux学习</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">Bootstrap学习</a>
+                </li>
+                <li>
+                    <a href="https://cn.vuejs.org/" target="_blank">Vuejs</a>
+                </li>
+            </ul>
+            <a href="#" class="footer-friend-more">更多 >></a>
+        </div>
+        <div class="footer-copyright">
+            <p>© 2017-2021 (彭友聪) 开发，并保留所有权利&nbsp;&nbsp;&nbsp;常年法律顾问: （深圳）律师事务所</p>
+            <p>
+                陆丰市河西街道xxxxx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a href="#">
+                    <img src="images/icon-footer.png" alt="">**网安备 0008899999xxxx号
+                </a>
+            </p>
+        </div>
     </div>
 </div>
 

src/main/resources/templates/page/Index.html

@@ -213,63 +213,153 @@
                 </div>
             </div>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">联系方式</a></li>
-                        <li><a href="#" style="font-size: larger">15014366986</a></li>
-                        <li><a href="#" style="font-size: larger">2923616405</a></li>
-                        <li><a href="#" style="font-size: larger">pyc852164</a></li>
-                    </ul>
-                </div>
+    </div>
+</div>
+<link rel="stylesheet" href="../../static/css/footer.css">
+<div class="footer-box">
+    <div class="footer-container">
+        <div class="footer-service clearfix">
+            <div class="footer-service-item footer-icon-001">
+                <i></i>
+                <span>专注于后端开发</span>
             </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">关于我</a></li>
-                        <li><a href="https://blog.csdn.net/qq_42896653"
-                               target="_blank" style="font-size: larger">
-                            CSDN:我的关于计算机学习的博客地址
-                        </a></li>
-                        <li><a href="https://github.com/pyc-ycy"
-                               target="_blank" style="font-size: larger">
-                            Github：编程学习项目源代码托管仓库地址
-                        </a></li>
-                        <li><a href="https://gitee.com/pengyoucongcode"
-                               target="_blank" style="font-size: larger">
-                            Gitee：学习项目源代码托管地址
-                        </a></li>
-                    </ul>
-                </div>
+            <div class="footer-service-item footer-icon-002">
+                <i></i>
+                <span>扎实编程能力</span>
+            </div>
+            <div class="footer-service-item footer-icon-003">
+                <i></i>
+                <span>学习能力强</span>
+            </div>
+            <div class="footer-service-item footer-icon-004">
+                <i></i>
+                <span>掌握多门编程语言</span>
             </div>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li style="font-size: larger">关于我</li>
-                        <li style="font-size: larger">我的博客文章，主要是计算机学习方面</li>
-                        <li style="font-size: larger">我的代码托管平台，以C++和Java为主</li>
-                        <li style="font-size: larger">也是代码托管平台，以C++和Java为主</li>
-                    </ul>
+        <div class="footer-line"></div>
+        <div class="footer-links clearfix">
+            <dl class="footer-article-item">
+                <dt>擅长编程语言</dt>
+                <dd>
+                    <a href="#">Java</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++</a>
+                </dd>
+                <dd>
+                    <a href="#">Python</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>关于开发者</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">CSDN博客</a>
+                </dd>
+                <dd>
+                    <a href="#">专注后端</a>
+                </dd>
+                <dd>
+                    <a href="#">兼为前端</a>
+                </dd>
+                <dd>
+                    <a href="#">数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">专业出身</a>
+                </dd>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">联系我</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>擅长领域</dt>
+                <dd>
+                    <a href="#">Java Web</a>
+                </dd>
+                <dd>
+                    <a href="#">MFC客户端</a>
+                </dd>
+                <dd>
+                    <a href="#">PyQT5</a>
+                </dd>
+                <dd>
+                    <a href="#">Python 数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++ 数据结构</a>
+                </dd>
+                <dd>
+                    <a href="#">Java 后端</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>其他</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">博客地址</a>
+                </dd>
+                <dd>
+                    <a href=" https://github.com/pyc-ycy">Github</a>
+                </dd>
+                <dd>
+                    <a href="https://gitee.com/pengyoucongcode">Gitee</a>
+                </dd>
+            </dl>
+            <dl class="footer-contact-item">
+                <h3>联系我们</h3>
+                <p>150-14366986</p>
+                <div class="footer-ewm">
+                    <img src="images/vm.png" alt="">
+                    <p>关注CSDN博客</p>
                 </div>
-            </div>
+            </dl>
+        </div>
+        <div class="footer-friend">
+            <div class="footer-friend-title">友情链接：</div>
+            <ul class="footer-friend-title-list clearfix">
+                <li>
+                    <a href="http://www.baidu.com" target="_blank">百度一下</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
+                </li>
+                <li>
+                    <a href="https://mvnrepository.com/" target="_blank">Maven中心仓库</a>
+                </li>
+                <li>
+                    <a href="https://www.bilibili.com/" target="_blank">B站</a>
+                </li>
+                <li>
+                    <a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>
+                </li>
+                <li>
+                    <a href="https://www.w3school.com.cn/" target="_blank">W3Cschool</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/linux/linux-tutorial.html" target="_blank">Linux学习</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">Bootstrap学习</a>
+                </li>
+                <li>
+                    <a href="https://cn.vuejs.org/" target="_blank">Vuejs</a>
+                </li>
+            </ul>
+            <a href="#" class="footer-friend-more">更多 >></a>
+        </div>
+        <div class="footer-copyright">
+            <p>© 2017-2021 (彭友聪) 开发，并保留所有权利&nbsp;&nbsp;&nbsp;常年法律顾问: （深圳）律师事务所</p>
+            <p>
+                陆丰市河西街道xxxxx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a href="#">
+                    <img src="images/icon-footer.png" alt="">**网安备 0008899999xxxx号
+                </a>
+            </p>
         </div>
-    </div>
-</div>
-<div id="footer">
-    <div style="text-align: center">
-        <p>
-            <span>@2020 御承扬Copyright&copy;2020-05-04</span>
-        </p>
     </div>
 </div>
 <div id="scroll">
-    <div class="scrollItem" id="toTop">回到顶部</div>
-    <div class="scrollItem" id="toBottom">回到顶部</div>
+    <div class="scrollItem" id="toTop">顶部</div>
+    <div class="scrollItem" id="toBottom">底部</div>
 </div>
 <script type="text/javascript" src="../../static/js/swiper.js"></script>
 

src/main/resources/templates/page/Learn.html

@@ -173,51 +173,6 @@
                 这些都能锻炼你编写算法和数据结构的能力，要知道计算机中的程序其本质就是<b>”一定的算法运行在特定的数据结构上“</b>
             </p>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">联系方式</a></li>
-                        <li><a href="#" style="font-size: larger">15014366986</a></li>
-                        <li><a href="#" style="font-size: larger">2923616405</a></li>
-                        <li><a href="#" style="font-size: larger">pyc852164</a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">关于我</a></li>
-                        <li><a href="https://blog.csdn.net/qq_42896653"
-                               target="_blank" style="font-size: larger">
-                            CSDN:我的关于计算机学习的博客地址
-                        </a></li>
-                        <li><a href="https://github.com/pyc-ycy"
-                               target="_blank" style="font-size: larger">
-                            Github：编程学习项目源代码托管仓库地址
-                        </a></li>
-                        <li><a href="https://gitee.com/pengyoucongcode"
-                               target="_blank" style="font-size: larger">
-                            Gitee：学习项目源代码托管地址
-                        </a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li style="font-size: larger">关于我</li>
-                        <li style="font-size: larger">我的博客文章，主要是计算机学习方面</li>
-                        <li style="font-size: larger">我的代码托管平台，以C++和Java为主</li>
-                        <li style="font-size: larger">也是代码托管平台，以C++和Java为主</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
     </div>
 </div>
 
@@ -225,11 +180,146 @@
     <div class="scrollItem" id="toTop">顶部</div>
     <div class="scrollItem" id="toBottom">底部</div>
 </div>
-<div id="footer">
-    <div style="text-align: center">
-        <p>
-            <span>@2020 御承扬Copyright&copy;2020-05-04</span>
-        </p>
+<link rel="stylesheet" href="../../static/css/footer.css">
+<div class="footer-box">
+    <div class="footer-container">
+        <div class="footer-service clearfix">
+            <div class="footer-service-item footer-icon-001">
+                <i></i>
+                <span>专注于后端开发</span>
+            </div>
+            <div class="footer-service-item footer-icon-002">
+                <i></i>
+                <span>扎实编程能力</span>
+            </div>
+            <div class="footer-service-item footer-icon-003">
+                <i></i>
+                <span>学习能力强</span>
+            </div>
+            <div class="footer-service-item footer-icon-004">
+                <i></i>
+                <span>掌握多门编程语言</span>
+            </div>
+        </div>
+        <div class="footer-line"></div>
+        <div class="footer-links clearfix">
+            <dl class="footer-article-item">
+                <dt>擅长编程语言</dt>
+                <dd>
+                    <a href="#">Java</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++</a>
+                </dd>
+                <dd>
+                    <a href="#">Python</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>关于开发者</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">CSDN博客</a>
+                </dd>
+                <dd>
+                    <a href="#">专注后端</a>
+                </dd>
+                <dd>
+                    <a href="#">兼为前端</a>
+                </dd>
+                <dd>
+                    <a href="#">数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">专业出身</a>
+                </dd>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">联系我</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>擅长领域</dt>
+                <dd>
+                    <a href="#">Java Web</a>
+                </dd>
+                <dd>
+                    <a href="#">MFC客户端</a>
+                </dd>
+                <dd>
+                    <a href="#">PyQT5</a>
+                </dd>
+                <dd>
+                    <a href="#">Python 数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++ 数据结构</a>
+                </dd>
+                <dd>
+                    <a href="#">Java 后端</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>其他</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">博客地址</a>
+                </dd>
+                <dd>
+                    <a href=" https://github.com/pyc-ycy">Github</a>
+                </dd>
+                <dd>
+                    <a href="https://gitee.com/pengyoucongcode">Gitee</a>
+                </dd>
+            </dl>
+            <dl class="footer-contact-item">
+                <h3>联系我们</h3>
+                <p>150-14366986</p>
+                <div class="footer-ewm">
+                    <img src="images/vm.png" alt="">
+                    <p>关注CSDN博客</p>
+                </div>
+            </dl>
+        </div>
+        <div class="footer-friend">
+            <div class="footer-friend-title">友情链接：</div>
+            <ul class="footer-friend-title-list clearfix">
+                <li>
+                    <a href="http://www.baidu.com" target="_blank">百度一下</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
+                </li>
+                <li>
+                    <a href="https://mvnrepository.com/" target="_blank">Maven中心仓库</a>
+                </li>
+                <li>
+                    <a href="https://www.bilibili.com/" target="_blank">B站</a>
+                </li>
+                <li>
+                    <a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>
+                </li>
+                <li>
+                    <a href="https://www.w3school.com.cn/" target="_blank">W3Cschool</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/linux/linux-tutorial.html" target="_blank">Linux学习</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">Bootstrap学习</a>
+                </li>
+                <li>
+                    <a href="https://cn.vuejs.org/" target="_blank">Vuejs</a>
+                </li>
+            </ul>
+            <a href="#" class="footer-friend-more">更多 >></a>
+        </div>
+        <div class="footer-copyright">
+            <p>© 2017-2021 (彭友聪) 开发，并保留所有权利&nbsp;&nbsp;&nbsp;常年法律顾问: （深圳）律师事务所</p>
+            <p>
+                陆丰市河西街道xxxxx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a href="#">
+                    <img src="images/icon-footer.png" alt="">**网安备 0008899999xxxx号
+                </a>
+            </p>
+        </div>
     </div>
 </div>
 <script type="text/javascript" src="../../static/js/jquery-1.11.3.js"></script>

src/main/resources/templates/page/ManageUser.html

@@ -189,51 +189,6 @@
                 </div>
                 <button type="submit" class="btn btn-danger">解冻</button>
             </form>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">联系方式</a></li>
-                        <li><a href="#" style="font-size: larger">15014366986</a></li>
-                        <li><a href="#" style="font-size: larger">2923616405</a></li>
-                        <li><a href="#" style="font-size: larger">pyc852164</a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">关于我</a></li>
-                        <li><a href="https://blog.csdn.net/qq_42896653"
-                               target="_blank" style="font-size: larger">
-                            CSDN:我的关于计算机学习的博客地址
-                        </a></li>
-                        <li><a href="https://github.com/pyc-ycy"
-                               target="_blank" style="font-size: larger">
-                            Github：编程学习项目源代码托管仓库地址
-                        </a></li>
-                        <li><a href="https://gitee.com/pengyoucongcode"
-                               target="_blank" style="font-size: larger">
-                            Gitee：学习项目源代码托管地址
-                        </a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li style="font-size: larger">关于我</li>
-                        <li style="font-size: larger">我的博客文章，主要是计算机学习方面</li>
-                        <li style="font-size: larger">我的代码托管平台，以C++和Java为主</li>
-                        <li style="font-size: larger">也是代码托管平台，以C++和Java为主</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
     </div>
 </div>
 
@@ -241,13 +196,148 @@
     <div class="scrollItem" id="toTop">顶部</div>
     <div class="scrollItem" id="toBottom">底部</div>
 </div>
-<div id="footer">
-    <div style="text-align: center">
-        <p>
-            <span>@2020 御承扬Copyright&copy;2020-05-04</span>
-        </p>
+    <link rel="stylesheet" href="../../static/css/footer.css">
+    <div class="footer-box">
+        <div class="footer-container">
+            <div class="footer-service clearfix">
+                <div class="footer-service-item footer-icon-001">
+                    <i></i>
+                    <span>专注于后端开发</span>
+                </div>
+                <div class="footer-service-item footer-icon-002">
+                    <i></i>
+                    <span>扎实编程能力</span>
+                </div>
+                <div class="footer-service-item footer-icon-003">
+                    <i></i>
+                    <span>学习能力强</span>
+                </div>
+                <div class="footer-service-item footer-icon-004">
+                    <i></i>
+                    <span>掌握多门编程语言</span>
+                </div>
+            </div>
+            <div class="footer-line"></div>
+            <div class="footer-links clearfix">
+                <dl class="footer-article-item">
+                    <dt>擅长编程语言</dt>
+                    <dd>
+                        <a href="#">Java</a>
+                    </dd>
+                    <dd>
+                        <a href="#">C/C++</a>
+                    </dd>
+                    <dd>
+                        <a href="#">Python</a>
+                    </dd>
+                </dl>
+                <dl class="footer-article-item">
+                    <dt>关于开发者</dt>
+                    <dd>
+                        <a href="https://blog.csdn.net/qq_42896653" target="_blank">CSDN博客</a>
+                    </dd>
+                    <dd>
+                        <a href="#">专注后端</a>
+                    </dd>
+                    <dd>
+                        <a href="#">兼为前端</a>
+                    </dd>
+                    <dd>
+                        <a href="#">数据分析</a>
+                    </dd>
+                    <dd>
+                        <a href="#">专业出身</a>
+                    </dd>
+                    <dd>
+                        <a href="https://blog.csdn.net/qq_42896653" target="_blank">联系我</a>
+                    </dd>
+                </dl>
+                <dl class="footer-article-item">
+                    <dt>擅长领域</dt>
+                    <dd>
+                        <a href="#">Java Web</a>
+                    </dd>
+                    <dd>
+                        <a href="#">MFC客户端</a>
+                    </dd>
+                    <dd>
+                        <a href="#">PyQT5</a>
+                    </dd>
+                    <dd>
+                        <a href="#">Python 数据分析</a>
+                    </dd>
+                    <dd>
+                        <a href="#">C/C++ 数据结构</a>
+                    </dd>
+                    <dd>
+                        <a href="#">Java 后端</a>
+                    </dd>
+                </dl>
+                <dl class="footer-article-item">
+                    <dt>其他</dt>
+                    <dd>
+                        <a href="https://blog.csdn.net/qq_42896653" target="_blank">博客地址</a>
+                    </dd>
+                    <dd>
+                        <a href=" https://github.com/pyc-ycy">Github</a>
+                    </dd>
+                    <dd>
+                        <a href="https://gitee.com/pengyoucongcode">Gitee</a>
+                    </dd>
+                </dl>
+                <dl class="footer-contact-item">
+                    <h3>联系我们</h3>
+                    <p>150-14366986</p>
+                    <div class="footer-ewm">
+                        <img src="images/vm.png" alt="">
+                        <p>关注CSDN博客</p>
+                    </div>
+                </dl>
+            </div>
+            <div class="footer-friend">
+                <div class="footer-friend-title">友情链接：</div>
+                <ul class="footer-friend-title-list clearfix">
+                    <li>
+                        <a href="http://www.baidu.com" target="_blank">百度一下</a>
+                    </li>
+                    <li>
+                        <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
+                    </li>
+                    <li>
+                        <a href="https://mvnrepository.com/" target="_blank">Maven中心仓库</a>
+                    </li>
+                    <li>
+                        <a href="https://www.bilibili.com/" target="_blank">B站</a>
+                    </li>
+                    <li>
+                        <a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>
+                    </li>
+                    <li>
+                        <a href="https://www.w3school.com.cn/" target="_blank">W3Cschool</a>
+                    </li>
+                    <li>
+                        <a href="https://www.runoob.com/linux/linux-tutorial.html" target="_blank">Linux学习</a>
+                    </li>
+                    <li>
+                        <a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">Bootstrap学习</a>
+                    </li>
+                    <li>
+                        <a href="https://cn.vuejs.org/" target="_blank">Vuejs</a>
+                    </li>
+                </ul>
+                <a href="#" class="footer-friend-more">更多 >></a>
+            </div>
+            <div class="footer-copyright">
+                <p>© 2017-2021 (彭友聪) 开发，并保留所有权利&nbsp;&nbsp;&nbsp;常年法律顾问: （深圳）律师事务所</p>
+                <p>
+                    陆丰市河西街道xxxxx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                    <a href="#">
+                        <img src="images/icon-footer.png" alt="">**网安备 0008899999xxxx号
+                    </a>
+                </p>
+            </div>
+        </div>
     </div>
-</div>
 <script type="text/javascript" src="../../static/js/jquery-1.11.3.js"></script>
 <script type="text/javascript" src="../../static/js/oppo.js"></script>
 

src/main/resources/templates/page/Math.html

@@ -141,51 +141,6 @@
                 以及其他无穷小替换、洛必达法则等定理，都可以大大简化计算，节省计算步骤。
             </p>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">联系方式</a></li>
-                        <li><a href="#" style="font-size: larger">15014366986</a></li>
-                        <li><a href="#" style="font-size: larger">2923616405</a></li>
-                        <li><a href="#" style="font-size: larger">pyc852164</a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">关于我</a></li>
-                        <li><a href="https://blog.csdn.net/qq_42896653"
-                               target="_blank" style="font-size: larger">
-                            CSDN:我的关于计算机学习的博客地址
-                        </a></li>
-                        <li><a href="https://github.com/pyc-ycy"
-                               target="_blank" style="font-size: larger">
-                            Github：编程学习项目源代码托管仓库地址
-                        </a></li>
-                        <li><a href="https://gitee.com/pengyoucongcode"
-                               target="_blank" style="font-size: larger">
-                            Gitee：学习项目源代码托管地址
-                        </a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li style="font-size: larger">关于我</li>
-                        <li style="font-size: larger">我的博客文章，主要是计算机学习方面</li>
-                        <li style="font-size: larger">我的代码托管平台，以C++和Java为主</li>
-                        <li style="font-size: larger">也是代码托管平台，以C++和Java为主</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
     </div>
 </div>
 
@@ -193,11 +148,146 @@
     <div class="scrollItem" id="toTop">顶部</div>
     <div class="scrollItem" id="toBottom">底部</div>
 </div>
-<div id="footer">
-    <div style="text-align: center">
-        <p>
-            <span>@2020 御承扬Copyright&copy;2020-05-04</span>
-        </p>
+<link rel="stylesheet" href="../../static/css/footer.css">
+<div class="footer-box">
+    <div class="footer-container">
+        <div class="footer-service clearfix">
+            <div class="footer-service-item footer-icon-001">
+                <i></i>
+                <span>专注于后端开发</span>
+            </div>
+            <div class="footer-service-item footer-icon-002">
+                <i></i>
+                <span>扎实编程能力</span>
+            </div>
+            <div class="footer-service-item footer-icon-003">
+                <i></i>
+                <span>学习能力强</span>
+            </div>
+            <div class="footer-service-item footer-icon-004">
+                <i></i>
+                <span>掌握多门编程语言</span>
+            </div>
+        </div>
+        <div class="footer-line"></div>
+        <div class="footer-links clearfix">
+            <dl class="footer-article-item">
+                <dt>擅长编程语言</dt>
+                <dd>
+                    <a href="#">Java</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++</a>
+                </dd>
+                <dd>
+                    <a href="#">Python</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>关于开发者</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">CSDN博客</a>
+                </dd>
+                <dd>
+                    <a href="#">专注后端</a>
+                </dd>
+                <dd>
+                    <a href="#">兼为前端</a>
+                </dd>
+                <dd>
+                    <a href="#">数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">专业出身</a>
+                </dd>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">联系我</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>擅长领域</dt>
+                <dd>
+                    <a href="#">Java Web</a>
+                </dd>
+                <dd>
+                    <a href="#">MFC客户端</a>
+                </dd>
+                <dd>
+                    <a href="#">PyQT5</a>
+                </dd>
+                <dd>
+                    <a href="#">Python 数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++ 数据结构</a>
+                </dd>
+                <dd>
+                    <a href="#">Java 后端</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>其他</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">博客地址</a>
+                </dd>
+                <dd>
+                    <a href=" https://github.com/pyc-ycy">Github</a>
+                </dd>
+                <dd>
+                    <a href="https://gitee.com/pengyoucongcode">Gitee</a>
+                </dd>
+            </dl>
+            <dl class="footer-contact-item">
+                <h3>联系我们</h3>
+                <p>150-14366986</p>
+                <div class="footer-ewm">
+                    <img src="images/vm.png" alt="">
+                    <p>关注CSDN博客</p>
+                </div>
+            </dl>
+        </div>
+        <div class="footer-friend">
+            <div class="footer-friend-title">友情链接：</div>
+            <ul class="footer-friend-title-list clearfix">
+                <li>
+                    <a href="http://www.baidu.com" target="_blank">百度一下</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
+                </li>
+                <li>
+                    <a href="https://mvnrepository.com/" target="_blank">Maven中心仓库</a>
+                </li>
+                <li>
+                    <a href="https://www.bilibili.com/" target="_blank">B站</a>
+                </li>
+                <li>
+                    <a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>
+                </li>
+                <li>
+                    <a href="https://www.w3school.com.cn/" target="_blank">W3Cschool</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/linux/linux-tutorial.html" target="_blank">Linux学习</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">Bootstrap学习</a>
+                </li>
+                <li>
+                    <a href="https://cn.vuejs.org/" target="_blank">Vuejs</a>
+                </li>
+            </ul>
+            <a href="#" class="footer-friend-more">更多 >></a>
+        </div>
+        <div class="footer-copyright">
+            <p>© 2017-2021 (彭友聪) 开发，并保留所有权利&nbsp;&nbsp;&nbsp;常年法律顾问: （深圳）律师事务所</p>
+            <p>
+                陆丰市河西街道xxxxx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a href="#">
+                    <img src="images/icon-footer.png" alt="">**网安备 0008899999xxxx号
+                </a>
+            </p>
+        </div>
     </div>
 </div>
 <script type="text/javascript" src="../../static/js/jquery-1.11.3.js"></script>

src/main/resources/templates/page/MyFriend.html

@@ -207,51 +207,6 @@
                 </div>
             </div>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">联系方式</a></li>
-                        <li><a href="#" style="font-size: larger">15014366986</a></li>
-                        <li><a href="#" style="font-size: larger">2923616405</a></li>
-                        <li><a href="#" style="font-size: larger">pyc852164</a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">关于我</a></li>
-                        <li><a href="https://blog.csdn.net/qq_42896653"
-                               target="_blank" style="font-size: larger">
-                            CSDN:我的关于计算机学习的博客地址
-                        </a></li>
-                        <li><a href="https://github.com/pyc-ycy"
-                               target="_blank" style="font-size: larger">
-                            Github：编程学习项目源代码托管仓库地址
-                        </a></li>
-                        <li><a href="https://gitee.com/pengyoucongcode"
-                               target="_blank" style="font-size: larger">
-                            Gitee：学习项目源代码托管地址
-                        </a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li style="font-size: larger">关于我</li>
-                        <li style="font-size: larger">我的博客文章，主要是计算机学习方面</li>
-                        <li style="font-size: larger">我的代码托管平台，以C++和Java为主</li>
-                        <li style="font-size: larger">也是代码托管平台，以C++和Java为主</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
     </div>
 </div>
 <script type="text/javascript">
@@ -266,11 +221,146 @@
     <div class="scrollItem" id="toTop">顶部</div>
     <div class="scrollItem" id="toBottom">底部</div>
 </div>
-<div id="footer">
-    <div style="text-align: center">
-        <p>
-            <span>@2020 御承扬Copyright&copy;2020-05-04</span>
-        </p>
+<link rel="stylesheet" href="../../static/css/footer.css">
+<div class="footer-box">
+    <div class="footer-container">
+        <div class="footer-service clearfix">
+            <div class="footer-service-item footer-icon-001">
+                <i></i>
+                <span>专注于后端开发</span>
+            </div>
+            <div class="footer-service-item footer-icon-002">
+                <i></i>
+                <span>扎实编程能力</span>
+            </div>
+            <div class="footer-service-item footer-icon-003">
+                <i></i>
+                <span>学习能力强</span>
+            </div>
+            <div class="footer-service-item footer-icon-004">
+                <i></i>
+                <span>掌握多门编程语言</span>
+            </div>
+        </div>
+        <div class="footer-line"></div>
+        <div class="footer-links clearfix">
+            <dl class="footer-article-item">
+                <dt>擅长编程语言</dt>
+                <dd>
+                    <a href="#">Java</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++</a>
+                </dd>
+                <dd>
+                    <a href="#">Python</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>关于开发者</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">CSDN博客</a>
+                </dd>
+                <dd>
+                    <a href="#">专注后端</a>
+                </dd>
+                <dd>
+                    <a href="#">兼为前端</a>
+                </dd>
+                <dd>
+                    <a href="#">数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">专业出身</a>
+                </dd>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">联系我</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>擅长领域</dt>
+                <dd>
+                    <a href="#">Java Web</a>
+                </dd>
+                <dd>
+                    <a href="#">MFC客户端</a>
+                </dd>
+                <dd>
+                    <a href="#">PyQT5</a>
+                </dd>
+                <dd>
+                    <a href="#">Python 数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++ 数据结构</a>
+                </dd>
+                <dd>
+                    <a href="#">Java 后端</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>其他</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">博客地址</a>
+                </dd>
+                <dd>
+                    <a href=" https://github.com/pyc-ycy">Github</a>
+                </dd>
+                <dd>
+                    <a href="https://gitee.com/pengyoucongcode">Gitee</a>
+                </dd>
+            </dl>
+            <dl class="footer-contact-item">
+                <h3>联系我们</h3>
+                <p>150-14366986</p>
+                <div class="footer-ewm">
+                    <img src="images/vm.png" alt="">
+                    <p>关注CSDN博客</p>
+                </div>
+            </dl>
+        </div>
+        <div class="footer-friend">
+            <div class="footer-friend-title">友情链接：</div>
+            <ul class="footer-friend-title-list clearfix">
+                <li>
+                    <a href="http://www.baidu.com" target="_blank">百度一下</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
+                </li>
+                <li>
+                    <a href="https://mvnrepository.com/" target="_blank">Maven中心仓库</a>
+                </li>
+                <li>
+                    <a href="https://www.bilibili.com/" target="_blank">B站</a>
+                </li>
+                <li>
+                    <a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>
+                </li>
+                <li>
+                    <a href="https://www.w3school.com.cn/" target="_blank">W3Cschool</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/linux/linux-tutorial.html" target="_blank">Linux学习</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">Bootstrap学习</a>
+                </li>
+                <li>
+                    <a href="https://cn.vuejs.org/" target="_blank">Vuejs</a>
+                </li>
+            </ul>
+            <a href="#" class="footer-friend-more">更多 >></a>
+        </div>
+        <div class="footer-copyright">
+            <p>© 2017-2021 (彭友聪) 开发，并保留所有权利&nbsp;&nbsp;&nbsp;常年法律顾问: （深圳）律师事务所</p>
+            <p>
+                陆丰市河西街道xxxxx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a href="#">
+                    <img src="images/icon-footer.png" alt="">**网安备 0008899999xxxx号
+                </a>
+            </p>
+        </div>
     </div>
 </div>
 

src/main/resources/templates/page/Philosophy.html

@@ -136,51 +136,6 @@
                 简言之，我们既要学习马克思主义哲学，更要继承中国古代哲学的精华。
             </p>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">联系方式</a></li>
-                        <li><a href="#" style="font-size: larger">15014366986</a></li>
-                        <li><a href="#" style="font-size: larger">2923616405</a></li>
-                        <li><a href="#" style="font-size: larger">pyc852164</a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">关于我</a></li>
-                        <li><a href="https://blog.csdn.net/qq_42896653"
-                               target="_blank" style="font-size: larger">
-                            CSDN:我的关于计算机学习的博客地址
-                        </a></li>
-                        <li><a href="https://github.com/pyc-ycy"
-                               target="_blank" style="font-size: larger">
-                            Github：编程学习项目源代码托管仓库地址
-                        </a></li>
-                        <li><a href="https://gitee.com/pengyoucongcode"
-                               target="_blank" style="font-size: larger">
-                            Gitee：学习项目源代码托管地址
-                        </a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li style="font-size: larger">关于我</li>
-                        <li style="font-size: larger">我的博客文章，主要是计算机学习方面</li>
-                        <li style="font-size: larger">我的代码托管平台，以C++和Java为主</li>
-                        <li style="font-size: larger">也是代码托管平台，以C++和Java为主</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
     </div>
 </div>
 
@@ -188,11 +143,146 @@
     <div class="scrollItem" id="toTop">顶部</div>
     <div class="scrollItem" id="toBottom">底部</div>
 </div>
-<div id="footer">
-    <div style="text-align: center">
-        <p>
-            <span>@2020 御承扬Copyright&copy;2020-05-04</span>
-        </p>
+<link rel="stylesheet" href="../../static/css/footer.css">
+<div class="footer-box">
+    <div class="footer-container">
+        <div class="footer-service clearfix">
+            <div class="footer-service-item footer-icon-001">
+                <i></i>
+                <span>专注于后端开发</span>
+            </div>
+            <div class="footer-service-item footer-icon-002">
+                <i></i>
+                <span>扎实编程能力</span>
+            </div>
+            <div class="footer-service-item footer-icon-003">
+                <i></i>
+                <span>学习能力强</span>
+            </div>
+            <div class="footer-service-item footer-icon-004">
+                <i></i>
+                <span>掌握多门编程语言</span>
+            </div>
+        </div>
+        <div class="footer-line"></div>
+        <div class="footer-links clearfix">
+            <dl class="footer-article-item">
+                <dt>擅长编程语言</dt>
+                <dd>
+                    <a href="#">Java</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++</a>
+                </dd>
+                <dd>
+                    <a href="#">Python</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>关于开发者</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">CSDN博客</a>
+                </dd>
+                <dd>
+                    <a href="#">专注后端</a>
+                </dd>
+                <dd>
+                    <a href="#">兼为前端</a>
+                </dd>
+                <dd>
+                    <a href="#">数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">专业出身</a>
+                </dd>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">联系我</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>擅长领域</dt>
+                <dd>
+                    <a href="#">Java Web</a>
+                </dd>
+                <dd>
+                    <a href="#">MFC客户端</a>
+                </dd>
+                <dd>
+                    <a href="#">PyQT5</a>
+                </dd>
+                <dd>
+                    <a href="#">Python 数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++ 数据结构</a>
+                </dd>
+                <dd>
+                    <a href="#">Java 后端</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>其他</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">博客地址</a>
+                </dd>
+                <dd>
+                    <a href=" https://github.com/pyc-ycy">Github</a>
+                </dd>
+                <dd>
+                    <a href="https://gitee.com/pengyoucongcode">Gitee</a>
+                </dd>
+            </dl>
+            <dl class="footer-contact-item">
+                <h3>联系我们</h3>
+                <p>150-14366986</p>
+                <div class="footer-ewm">
+                    <img src="images/vm.png" alt="">
+                    <p>关注CSDN博客</p>
+                </div>
+            </dl>
+        </div>
+        <div class="footer-friend">
+            <div class="footer-friend-title">友情链接：</div>
+            <ul class="footer-friend-title-list clearfix">
+                <li>
+                    <a href="http://www.baidu.com" target="_blank">百度一下</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
+                </li>
+                <li>
+                    <a href="https://mvnrepository.com/" target="_blank">Maven中心仓库</a>
+                </li>
+                <li>
+                    <a href="https://www.bilibili.com/" target="_blank">B站</a>
+                </li>
+                <li>
+                    <a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>
+                </li>
+                <li>
+                    <a href="https://www.w3school.com.cn/" target="_blank">W3Cschool</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/linux/linux-tutorial.html" target="_blank">Linux学习</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">Bootstrap学习</a>
+                </li>
+                <li>
+                    <a href="https://cn.vuejs.org/" target="_blank">Vuejs</a>
+                </li>
+            </ul>
+            <a href="#" class="footer-friend-more">更多 >></a>
+        </div>
+        <div class="footer-copyright">
+            <p>© 2017-2021 (彭友聪) 开发，并保留所有权利&nbsp;&nbsp;&nbsp;常年法律顾问: （深圳）律师事务所</p>
+            <p>
+                陆丰市河西街道xxxxx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a href="#">
+                    <img src="images/icon-footer.png" alt="">**网安备 0008899999xxxx号
+                </a>
+            </p>
+        </div>
     </div>
 </div>
 <script type="text/javascript" src="../../static/js/jquery-1.11.3.js"></script>

src/main/resources/templates/page/PublishNews.html

@@ -155,51 +155,6 @@
                 </table>
             </form>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">联系方式</a></li>
-                        <li><a href="#" style="font-size: larger">15014366986</a></li>
-                        <li><a href="#" style="font-size: larger">2923616405</a></li>
-                        <li><a href="#" style="font-size: larger">pyc852164</a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">关于我</a></li>
-                        <li><a href="https://blog.csdn.net/qq_42896653"
-                               target="_blank" style="font-size: larger">
-                            CSDN:我的关于计算机学习的博客地址
-                        </a></li>
-                        <li><a href="https://github.com/pyc-ycy"
-                               target="_blank" style="font-size: larger">
-                            Github：编程学习项目源代码托管仓库地址
-                        </a></li>
-                        <li><a href="https://gitee.com/pengyoucongcode"
-                               target="_blank" style="font-size: larger">
-                            Gitee：学习项目源代码托管地址
-                        </a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li style="font-size: larger">关于我</li>
-                        <li style="font-size: larger">我的博客文章，主要是计算机学习方面</li>
-                        <li style="font-size: larger">我的代码托管平台，以C++和Java为主</li>
-                        <li style="font-size: larger">也是代码托管平台，以C++和Java为主</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
     </div>
 </div>
 
@@ -217,11 +172,146 @@
     <div class="scrollItem" id="toTop">顶部</div>
     <div class="scrollItem" id="toBottom">底部</div>
 </div>
-<div id="footer">
-    <div style="text-align: center">
-        <p>
-            <span>@2020 御承扬Copyright&copy;2020-05-04</span>
-        </p>
+<link rel="stylesheet" href="../../static/css/footer.css">
+<div class="footer-box">
+    <div class="footer-container">
+        <div class="footer-service clearfix">
+            <div class="footer-service-item footer-icon-001">
+                <i></i>
+                <span>专注于后端开发</span>
+            </div>
+            <div class="footer-service-item footer-icon-002">
+                <i></i>
+                <span>扎实编程能力</span>
+            </div>
+            <div class="footer-service-item footer-icon-003">
+                <i></i>
+                <span>学习能力强</span>
+            </div>
+            <div class="footer-service-item footer-icon-004">
+                <i></i>
+                <span>掌握多门编程语言</span>
+            </div>
+        </div>
+        <div class="footer-line"></div>
+        <div class="footer-links clearfix">
+            <dl class="footer-article-item">
+                <dt>擅长编程语言</dt>
+                <dd>
+                    <a href="#">Java</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++</a>
+                </dd>
+                <dd>
+                    <a href="#">Python</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>关于开发者</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">CSDN博客</a>
+                </dd>
+                <dd>
+                    <a href="#">专注后端</a>
+                </dd>
+                <dd>
+                    <a href="#">兼为前端</a>
+                </dd>
+                <dd>
+                    <a href="#">数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">专业出身</a>
+                </dd>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">联系我</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>擅长领域</dt>
+                <dd>
+                    <a href="#">Java Web</a>
+                </dd>
+                <dd>
+                    <a href="#">MFC客户端</a>
+                </dd>
+                <dd>
+                    <a href="#">PyQT5</a>
+                </dd>
+                <dd>
+                    <a href="#">Python 数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++ 数据结构</a>
+                </dd>
+                <dd>
+                    <a href="#">Java 后端</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>其他</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">博客地址</a>
+                </dd>
+                <dd>
+                    <a href=" https://github.com/pyc-ycy">Github</a>
+                </dd>
+                <dd>
+                    <a href="https://gitee.com/pengyoucongcode">Gitee</a>
+                </dd>
+            </dl>
+            <dl class="footer-contact-item">
+                <h3>联系我们</h3>
+                <p>150-14366986</p>
+                <div class="footer-ewm">
+                    <img src="images/vm.png" alt="">
+                    <p>关注CSDN博客</p>
+                </div>
+            </dl>
+        </div>
+        <div class="footer-friend">
+            <div class="footer-friend-title">友情链接：</div>
+            <ul class="footer-friend-title-list clearfix">
+                <li>
+                    <a href="http://www.baidu.com" target="_blank">百度一下</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
+                </li>
+                <li>
+                    <a href="https://mvnrepository.com/" target="_blank">Maven中心仓库</a>
+                </li>
+                <li>
+                    <a href="https://www.bilibili.com/" target="_blank">B站</a>
+                </li>
+                <li>
+                    <a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>
+                </li>
+                <li>
+                    <a href="https://www.w3school.com.cn/" target="_blank">W3Cschool</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/linux/linux-tutorial.html" target="_blank">Linux学习</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">Bootstrap学习</a>
+                </li>
+                <li>
+                    <a href="https://cn.vuejs.org/" target="_blank">Vuejs</a>
+                </li>
+            </ul>
+            <a href="#" class="footer-friend-more">更多 >></a>
+        </div>
+        <div class="footer-copyright">
+            <p>© 2017-2021 (彭友聪) 开发，并保留所有权利&nbsp;&nbsp;&nbsp;常年法律顾问: （深圳）律师事务所</p>
+            <p>
+                陆丰市河西街道xxxxx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a href="#">
+                    <img src="images/icon-footer.png" alt="">**网安备 0008899999xxxx号
+                </a>
+            </p>
+        </div>
     </div>
 </div>
 

src/main/resources/templates/page/PublishQuestion.html

@@ -178,62 +178,152 @@
                 </form>
             </div>
         </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">联系方式</a></li>
-                        <li><a href="#" style="font-size: larger">15014366986</a></li>
-                        <li><a href="#" style="font-size: larger">2923616405</a></li>
-                        <li><a href="#" style="font-size: larger">pyc852164</a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li><a href="#" style="font-size: larger">关于我</a></li>
-                        <li><a href="https://blog.csdn.net/qq_42896653"
-                               target="_blank" style="font-size: larger">
-                            CSDN:我的关于计算机学习的博客地址
-                        </a></li>
-                        <li><a href="https://github.com/pyc-ycy"
-                               target="_blank" style="font-size: larger">
-                            Github：编程学习项目源代码托管仓库地址
-                        </a></li>
-                        <li><a href="https://gitee.com/pengyoucongcode"
-                               target="_blank" style="font-size: larger">
-                            Gitee：学习项目源代码托管地址
-                        </a></li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        <div class="col-sm-6 col-md-4">
-            <div class="thumbnail">
-                <div class="caption">
-                    <ul>
-                        <li style="font-size: larger">关于我</li>
-                        <li style="font-size: larger">我的博客文章，主要是计算机学习方面</li>
-                        <li style="font-size: larger">我的代码托管平台，以C++和Java为主</li>
-                        <li style="font-size: larger">也是代码托管平台，以C++和Java为主</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
     </div>
 </div>
 <div id="scroll">
     <div class="scrollItem" id="toTop">顶部</div>
     <div class="scrollItem" id="toBottom">底部</div>
 </div>
-<div id="footer">
-    <div style="text-align: center">
-        <p>
-            <span>@2020 御承扬Copyright&copy;2020-05-04</span>
-        </p>
+<link rel="stylesheet" href="../../static/css/footer.css">
+<div class="footer-box">
+    <div class="footer-container">
+        <div class="footer-service clearfix">
+            <div class="footer-service-item footer-icon-001">
+                <i></i>
+                <span>专注于后端开发</span>
+            </div>
+            <div class="footer-service-item footer-icon-002">
+                <i></i>
+                <span>扎实编程能力</span>
+            </div>
+            <div class="footer-service-item footer-icon-003">
+                <i></i>
+                <span>学习能力强</span>
+            </div>
+            <div class="footer-service-item footer-icon-004">
+                <i></i>
+                <span>掌握多门编程语言</span>
+            </div>
+        </div>
+        <div class="footer-line"></div>
+        <div class="footer-links clearfix">
+            <dl class="footer-article-item">
+                <dt>擅长编程语言</dt>
+                <dd>
+                    <a href="#">Java</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++</a>
+                </dd>
+                <dd>
+                    <a href="#">Python</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>关于开发者</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">CSDN博客</a>
+                </dd>
+                <dd>
+                    <a href="#">专注后端</a>
+                </dd>
+                <dd>
+                    <a href="#">兼为前端</a>
+                </dd>
+                <dd>
+                    <a href="#">数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">专业出身</a>
+                </dd>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">联系我</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>擅长领域</dt>
+                <dd>
+                    <a href="#">Java Web</a>
+                </dd>
+                <dd>
+                    <a href="#">MFC客户端</a>
+                </dd>
+                <dd>
+                    <a href="#">PyQT5</a>
+                </dd>
+                <dd>
+                    <a href="#">Python 数据分析</a>
+                </dd>
+                <dd>
+                    <a href="#">C/C++ 数据结构</a>
+                </dd>
+                <dd>
+                    <a href="#">Java 后端</a>
+                </dd>
+            </dl>
+            <dl class="footer-article-item">
+                <dt>其他</dt>
+                <dd>
+                    <a href="https://blog.csdn.net/qq_42896653" target="_blank">博客地址</a>
+                </dd>
+                <dd>
+                    <a href=" https://github.com/pyc-ycy">Github</a>
+                </dd>
+                <dd>
+                    <a href="https://gitee.com/pengyoucongcode">Gitee</a>
+                </dd>
+            </dl>
+            <dl class="footer-contact-item">
+                <h3>联系我们</h3>
+                <p>150-14366986</p>
+                <div class="footer-ewm">
+                    <img src="images/vm.png" alt="">
+                    <p>关注CSDN博客</p>
+                </div>
+            </dl>
+        </div>
+        <div class="footer-friend">
+            <div class="footer-friend-title">友情链接：</div>
+            <ul class="footer-friend-title-list clearfix">
+                <li>
+                    <a href="http://www.baidu.com" target="_blank">百度一下</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/" target="_blank">菜鸟教程</a>
+                </li>
+                <li>
+                    <a href="https://mvnrepository.com/" target="_blank">Maven中心仓库</a>
+                </li>
+                <li>
+                    <a href="https://www.bilibili.com/" target="_blank">B站</a>
+                </li>
+                <li>
+                    <a href="http://c.biancheng.net/" target="_blank">C语言中文网</a>
+                </li>
+                <li>
+                    <a href="https://www.w3school.com.cn/" target="_blank">W3Cschool</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/linux/linux-tutorial.html" target="_blank">Linux学习</a>
+                </li>
+                <li>
+                    <a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html" target="_blank">Bootstrap学习</a>
+                </li>
+                <li>
+                    <a href="https://cn.vuejs.org/" target="_blank">Vuejs</a>
+                </li>
+            </ul>
+            <a href="#" class="footer-friend-more">更多 >></a>
+        </div>
+        <div class="footer-copyright">
+            <p>© 2017-2021 (彭友聪) 开发，并保留所有权利&nbsp;&nbsp;&nbsp;常年法律顾问: （深圳）律师事务所</p>
+            <p>
+                陆丰市河西街道xxxxx&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                <a href="#">
+                    <img src="images/icon-footer.png" alt="">**网安备 0008899999xxxx号
+                </a>
+            </p>
+        </div>
     </div>
 </div>