SpringBoot开发小而美的博客学习笔记02（博客详情页面）

SpringBoot开发小而美的博客学习笔记02博客详情
详情页面主要有：导航、底部、中间内容
导航：

底部：

<footer class="ui inverted vertical segment m-padded-tb-massive">
    <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/wechat.jpg" class="ui rounded image" alt="" style="width: 110px">
                    </div>
                </div>
            </div>
            <!--   最新博客   -->
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事（User Story）</a>
                    <a href="#" class="item">关于刻意练习的清单</a>
                    <a href="#" class="item">失效要趁早</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">Email：2192787371@qqc.com</a>
                    <a href="#" class="item">QQ：2192787371</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced ">Blog</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客，会分享关于编程、写作、思考相关的任何 内容，希望可以给来到这儿的人有所帮助...</p>
            </div>
        </div>
        <!--    分界线    -->
        <div class="ui inverted section divider "></div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright @ 2016 - 2017 Jiujiu Designed by Jiujiu</p>
    </div>

</footer>

效果：

导航和底部的效果和之前首页一样，可直接复制过来用
中间内容（包括头部、图片、内容、博客信息、评论）：
头部：

图片：

内容：

css:

博客信息：

博客信息效果：

留言部分：

css:

留言部分效果：

留言区可以评论，也可进行回复

详情页面整体效果：