<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head th:fragment="fr_head(title)"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"> <title th:replace="${title}">_fragments</title> <link rel="stylesheet" href="../static/css/my.css" th:src="@{/css/my.css}"> <link rel="stylesheet" href="../static/css/animate.css" th:src="@{/css/animate.css}"> <link rel="stylesheet" href="../static/lib/highlight/styles/default.css" th:src="@{/lib/highlight/styles/default.css}"> </head> <body> <!--导航--> <nav th:fragment="menu(n)" class="ui inverted attached segment my-padded-tb-mini my-shadow-small"> <div class="ui container"> <div class="ui inverted secondary stackable menu"> <h2 class="ui teal header item">Blog</h2> <a href="#" class="my-margin-top-small my-item item my-mobile-hide" th:classappend="${n==1} ? ‘active‘"><i class="mini home icon"></i>首页</a> <a href="#" class="my-margin-top-small my-item item my-mobile-hide" th:classappend="${n==2} ? ‘active‘"><i class="mini idea icon"></i>分类</a> <a href="#" class="my-margin-top-small my-item item my-mobile-hide" th:classappend="${n==3} ? ‘active‘" ><i class="mini tags icon"></i>标签</a> <a href="#" class="my-margin-top-small my-item item my-mobile-hide" th:classappend="${n==4} ? ‘active‘"><i class="mini clone icon"></i>归档</a> <a href="#" class="my-margin-top-small my-item item my-mobile-hide" th:classappend="${n==5} ? ‘active‘"><i class="mini info icon"></i>关于我</a> <div class="right my-margin-top-small my-item item my-mobile-hide"> <div class="ui icon inverted transparent input"> <input type="text" placeholder="Search..."> <i class="search link icon"></i> </div> </div> </div> <!-- 手机端菜单栏按钮 --> <a href="#" class="ui menu toggle black icon button my-right-top my-mobile-show"> <i class="sidebar icon"></i> </a> </div> </nav> <!--底部footer--> <footer th:fragment="fotter" class="ui inverted vertical segment my-padded-huge"> <div class="ui center aligned container"> <div class="ui inverted divided stackable grid"> <div class="three wide column"> <div class="ui inverted link list"> <div class="item"> <img src="../static/images/we-chat.png" th:src="@{../static/images/we-chat.png}" class="ui rounded image" alt="" style="width: 110px"> </div> </div> </div> <div class="three wide column"> <h4 class="ui inverted header my-text-spaced my-text-lined my-opacity-mini">最新博客</h4> <div class="ui inverted link list"> <a href="#" class="item">用户故事(User Story)</a> <a href="#" class="item">用户故事(User Story)</a> <a href="#" class="item">用户故事(User Story)</a> </div> </div> <div class="four wide column"> <h4 class="ui inverted header my-text-spaced my-text-lined my-opacity-mini">联系我</h4> <div class="ui inverted link list"> <a href="#" class="item">Email：SkyGrass0618@126.com</a> <a href="#" class="item">QQ：1667191252</a> <a href="#" class="item">微博：九霄云外的天草</a> </div> </div> <div class="six wide column"> <h4 class="ui inverted header my-text-spaced my-text-lined my-opacity-mini">My Blog</h4> <p class="my-opacity-mini my-text-lined">这里是我的个人博客、会分享我学习编程过程中的经理和心得，希望可以给来到这里的人带来帮助...</p> </div> </div> <div class="ui inverted section divider "></div> <p class="my-text-thin my-text-spaced my-text-lined my-opacity-big">Copyright © 2020 skg-xsn Designed by skg-xsn</p> </div> </footer> </body> </html>
<footer th:replace="_fragments :: fotter"></footer>
原文：https://www.cnblogs.com/skygrass0531/p/12519530.html