Spring boot实训个人博客系统三分类页

最新推荐文章于 2021-10-25 00:27:50 发布

原创

最新推荐文章于 2021-10-25 00:27:50 发布 · 251 阅读

0 ·

CC 4.0 BY-SA版权

本文档详细介绍了使用Spring Boot实战个人博客系统的过程中，如何创建和配置分类页面。从新建types.html文件开始，逐步讲解了头部标签、分类标签、标签区、博客文章列表、底部按钮的实现，并提供了相应的CSS样式文件内容，最后展示了完成后的效果。

1.新建分类页文件types.html:

2.将头部标签代码复制到这里,生成头部标签:

3.中部分类标签部分:

  <div class="ui top attached 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">14</h2>
                        个
                    </div>
                </div>
            </div>

4.标签区:

5.博客文章列表:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../src/main/resources/static/css/me.css">
    <title>分类页面</title>
</head>

<body>
    <!--导航-->
    <nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small">
        <div class="ui container">
            <div class="ui inverted secondary stackable menu">
                <h2 class="ui teal header item">Blog</h2>
                <a href="#" class="m-item item m-mobile-hide"><i class="mini home icon "></i>&nbsp;首页</a>
                <a href="#" class="active m-item item m-mobile-hide"><i class="mini idea icon"></i> &nbsp;分类</a>
                <a hr