今天正式开始做期末实训——给予springboot的实训作业，学习视频链接，中文文档

文章目录

• 前期工作:
• • 功能分析
• 页面制作
• • 页面分析
  • 页面制作
  • • 1.首页

前期工作:

功能分析

主要是前端实现展示：首页，详情页，分类，关于等页面。后端实现博客管理，分类管理等。

页面制作

页面分析

因为是初学，所以页面设计完全根据李仁密老师的做，在添加一些个人元素
其中使用到的是semantic-ui前端技术

页面制作

1.首页

https://www.jsdelivr.com/

引入:

<!-- header部分 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
<link rel="stylesheet" href="./static/css/me.css">
<!-- body部分 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js">

导航实现

    <!-- 导航 -->
    <nav class="ui inverted attached segment m-padded-tb-mini">
        <div class="ui container">
            <div class="ui inverted secondary menu">
                <h2 class="ui teal header item">Blog</h2>
                <a href="#" class="item"><i class="home icon"></i>首页</a>
                <a href="#" class="item"><i class="idea icon"></i>分类</a>
                <a href="#" class="item"><i class="tags icon"></i>标签</a>
                <a href="#" class="item"><i class="info icon"></i>关于</a>
                <div class="right item">
                    <div class="ui icon input">
                        <input type="text" placeholder="Search...."></input>
                        <i class="search icon"></i>
                    </div>
                </div>
            </div>
        </div>

底部实现

<!-- 底部 -->
    <footer class="ui inverted vertical segment m-padded-tb-massive">
        <div class="ui center aligned container">
            <div class="ui inverted divided grid">
                <div class="three wide column">
                    <div class="ui inverted link list">
                        <img src="./static/images/QR_csdn.png" class="ui rounded image" alt="" style="width: 110px">
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header">最新博客</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="three wide column">
                    <h4 class="ui inverted header">联系我</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">Email：tyaojoy@foxmail.com</a>
                        <a href="#" class="item">QQ：211163529</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header">Blog</h4>
                    <div class="ui inverted link list">
                        <p class="m-text-thin m-text-spaced m-opacity-mini">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>
                    </div>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p class="m-text-thin m-text-spaced m-opacity-mini">Copyright © 2021 Blog Designed by 观山奇</p>
        </div>
    </footer>