SSM实训：1、导航栏和博客底部内容（首页1）

最新推荐文章于 2023-01-03 22:39:42 发布

铁锅炖咸鱼.

最新推荐文章于 2023-01-03 22:39:42 发布

阅读量721

点赞数

分类专栏：个人博客实训

本文链接：https://blog.csdn.net/qq_46300856/article/details/117409127

版权

本文是李哥分享的Spring Boot开发小而美的个人博客系列第一部分，主要介绍了博客的设计思路和技术选型，如Spring Boot、JPA、Thymeleaf等。内容包括页面前端设计，如首页、详情页、分类和标签等，并详细讲解了如何完成导航栏和博客底部内容的实现，以及相关CSS样式。

摘要由CSDN通过智能技术生成

文章目录

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

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

1、设计

技术：Spring Boot +JPA +thymeleaf模板；
MySQL;
UI
工具：IDEA、Maven、JDK8、
PC端、移动端

2、页面-前端

index.html ：
：详情页
：分类
：标签
：归档
：关于我
：博客管理-发布
：博客管理-列表

3、后端

4、创建Spring 项目

在这里插入图片描述

添加依赖
热部署、网页、百里香叶模板、JPA、数据库

5、首页-1

在这里插入图片描述

6、实现代码

index.html;me.css

（1）完成导航栏

在这里插入图片描述

<!--    1.移动端浏览，缩放比例-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>首页</title>
<!--    2.启动UI；引入css-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="./static/css/me.css">

<!--3.导航栏-->
<!--segment,片段； inverted,颜色反转；attached ,没有圆角-->
    <nav class="ui inverted attached segment m-padded-tb-mini">
<!-- container ,调整Logo左侧位置-->
        <div class="ui container">
        <!-- 导航主键 ；secondary，样式；-->
            <div class="ui inverted secondary stackable menu" style="background-color:cadetblue">
        <!--标题，Logo; teal,颜色; -->
            <h2 class="ui teal header item">Blog</h2>
            <a href="#