文章目录

• Spring Boot开发小而美的个人博客-李哥
• • 1、页面开发-归档页
  • 2、实现代码
  • 3、遇到的问题
  • 4、效果

Spring Boot开发小而美的个人博客-李哥

1、页面开发-归档页

• archives.html
  (通过拷贝tags.html后修改)
• 按照年份列出每年的博客列表
  

2、实现代码

• 1，

<!--(1) header-->
            <div class="ui top attached padded segment ">
                <div class="ui middle aligned two column grid">
                    <div class="column">
                        <h3 class="ui teal header">归档</h3>
                    </div>
                    <div class="right aligned column">
                        共<h2 class="ui orange header m-inline-block m-text-thin">122</h2>篇博客
                    </div>
                </div>
            </div>

• 2，

<!-- 2017博文情况 -->
            <h3 class="ui center aligned header">2017</h3>
            <div class="ui fluid vertical menu">
                <a href="#" target="_blank" class="item">
                    <span>
                        <i class="mini teal circle icon"></i>关于点餐的清单
                        <div class="ui teal basic left pointing label m-padded-tb-mini">9月3日</div>
                    </span>
                    <div class="ui orange basic left pointing label m-padded-tb-mini">原创</div>
                </a>
                <a href="#" target="_blank" class="item">
                    <span>
                        <i class="mini teal circle icon"></i>关于点餐的清单
                        <div class="ui teal basic left pointing label m-padded-tb-mini">9月3日</div>
                    </span>
                    <div class="ui orange basic left pointing label m-padded-tb-mini">原创</div>
                </a>
                <a href="#" target="_blank" class="item">
                    <span>
                        <i class="mini teal circle icon"></i>关于点餐的清单
                        <div class="ui teal basic left pointing label m-padded-tb-mini">9月3日</div>
                    </span>
                    <div class="ui orange basic left pointing label m-padded-tb-mini">原创</div>
                </a>
                <a href="#" target="_blank" class="item">
                    <span>
                        <i class="mini teal circle icon"></i>关于点餐的清单
                        <div class="ui teal basic left pointing label m-padded-tb-mini">9月3日</div>
                    </span>
                    <div class="ui orange basic left pointing label m-padded-tb-mini">原创</div>
                </a>
            </div>

3、遇到的问题

无

4、效果

标签：美的,Boot,博客,SSM,实训,归档,清单,点餐
来源： https://blog.csdn.net/qq_46300856/article/details/117599519