Spring boot开源项目之个人博客（2）—搭建页面首页（1）

最新推荐文章于 2024-05-21 09:43:47 发布

codeChenStu

最新推荐文章于 2024-05-21 09:43:47 发布

阅读量359

点赞数

分类专栏：个人博客项目学习笔记文章标签： java html5

本文链接：https://blog.csdn.net/qq369392973/article/details/108256881

版权

本文是Spring Boot开源项目个人博客系列的第二篇，主要介绍如何搭建页面首页。通过Webstorm创建H5页面，引入Semantic UI框架和jQuery的CDN资源。首页分为导航栏、主体和页脚三部分。作者建议有一定前端基础的读者跟随教程学习 Semantic UI 框架的使用，提高页面设计能力。

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

Spring boot开源项目之个人博客（2）—搭建页面首页（1）

上一篇把项目大体情况进行了说明，从这篇开始就慢慢跟着视频一步一步做下去，页面设计就跳过了，有兴趣的话可以试着自己设计一下，我是直接跟着视频，直接去做页面，H5页面是用Webstorm写的，我这边正好有这个软件，也就用这个，没有的用idea也完全可以实现。

首页布局

首先，新建项目，项目目录最好和springboot的目录保持一致，方便后面整合。

在这里插入图片描述

index.html文件就作为我们的首页页面，首先要把Semantic UI框架的css、js文件引入（引入方法可以去官网查看），此外和bootstrap一样，还需要引入jquery文件，我都是用CDN方式引入的。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

然后就开始进行页面的开发了，整个首页分成了三个部分：导航栏、主体、页脚，我们先做导航栏和页脚。

导航栏

<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> 首页