基于SpringBoot开发个人博客 ---首页搭建index.html

最新推荐文章于 2024-02-21 08:30:22 发布

BunnyCoffer

最新推荐文章于 2024-02-21 08:30:22 发布

阅读量569

点赞数

分类专栏：项目 java 前端开发

本文链接：https://blog.csdn.net/BunnyCoffer/article/details/103108007

版权

java 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

前端开发

3 篇文章 0 订阅

订阅专栏

项目

1 篇文章 0 订阅

订阅专栏

前端开发环境：
ide工具：WebStorm
ui插件：Semantic UI

基于SpringBoot开发个人博客
第一步：下载前端开发工具
WebStorm : http://www.jetbrains.com/webstorm/download/download-thanks.html

第二步：开发首页
集成Semantic UI插件到项目

<!--SemanticUI引入-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">


<!--jQuary引入-->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!--SemanticUI引入-->
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>

第三步：源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>首页</title>
    <!--SemanticUI引入-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
    <link rel="stylesheet" href="./static/css/me.css"/>

</head>
<body>

    <!--导航-->
    <nav class="ui inverted attached segment 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>home</a>
                <a href="#" class="item"><i class="idea icon"></i>type</a>
                <a href="#" class="item"><i class="tags icon"></i>label</a>
                <a href="#" class="item"><i class="info icon"></i>about us</a>

                <!--搜索框-->
                <div class="right item">
                    <div class="ui icon input">
                        <input type="text" placeholder="Search...">
                        <i class="search link icon"></i>
                    </div>
                </div>

            </div>
        </div>
    </nav>

    <!--中间内容-->
    <div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </div>

    <!--底部footer-->
    <footer class="ui inverted attached segment padded-tb-massive">
        <div class="ui center aligned container">
            <div class="ui inverted divided grid">

                <!--二维码-->
                <div class="three wide column">
                    <img src="static/images/erweima.jpg" class="ui rounded image"
                         alt="" style="width: 100px"/>
                </div>

                <!--二维码-->
                <div class="three wide column">
                    <h4 class="ui inverted header">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">about us</a>
                        <a href="#" class="item">about us</a>
                        <a href="#" class="item">about us</a>
                    </div>
                </div>

                <!--二维码-->
                <div class="three wide column">
                    <h4 class="ui inverted header">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">xxx</a>
                        <a href="#" class="item">xxx</a>
                        <a href="#" class="item">xxx</a>
                    </div>
                </div>

                <!--二维码-->
                <div class="seven wide column">
                    <h4 class="ui inverted header">最新博客</h4>
                    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
                </div>
            </div>

            <!---分割线-->
            <div class="ui inverted section divider">
            </div>

            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>

    </footer>

<!--jQuary引入-->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!--SemanticUI引入-->
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
</body>
</html>