夜光带你走进我擅长的领域：SpringBOOT（10）

最新推荐文章于 2022-10-15 12:07:14 发布
最新推荐文章于 2022-10-15 12:07:14 发布
阅读量343 收藏 1
点赞数
分类专栏： My thoughts Genius-SpringBoot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41987706/article/details/99877633
版权

夜光序言：

 

有时候我们有些近视，忽略了离我们最真的情感；有时候我们有些远视，模糊了离我们最近的幸福。一辈子真的很短，远没有我们想象的那么长，永远真的没有多远。所以,对爱你的人好一点，对自己好一点，今天是你的枕畔人，明天可能成了陌路人，如果这辈子来不及好好相爱，就更不要指望下一辈子还能遇见。

 

 

 

 

正文：采用Semantic UI前端框架，和jquery，css，js技术

 

前端框架Semantic UI，么么哒，很帅哦

 

 

<!--<!DOCTYPE html>-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,inital-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <!--不知道为什么外部的css，我没引入的进来-->
    <link rel="stylesheet" type="text/css" href="/static/css/me.css">

    <title>分类</title>

    <style type="text/css">

        body{
            background: url("../static/images/02.png");
        }

        .m-padded-tb-massive{
            padding-top: 5em !important;
            padding-bottom: 5em  !important;
        }
        .m-padded-tb-huge{
            padding-top: 4em !important;
            padding-bottom: 4em  !important;
        }
        .m-padded-tb-big{
            padding-top: 3em !important;
            padding-bottom: 3em  !important;
        }
        .m-padded-tb-large{
            padding-top: 2em !important;
            padding-bottom: 2em  !important;
        }
        .m-padded-tb{
            padding-top: 1em !important;
            padding-bottom: 1em  !important;
        }
        .m-padded-small{
            padding-top: 0.5em !important;
            padding-bottom: 0.5em  !important;
        }
        .m-padded-tiny{
            padding-top: 0.3em !important;
            padding-bottom: 0.3em  !important;
        }
        .m-padded-tb-mini{

            padding-top: 0.2em !important;
            padding-bottom: 0.2em !important;
        }

        .m-padded-lr{
            padding-left: 4em!important;
            padding-right: 4em!important;
        }

        /*text*/
        .m-text{
            font-weight:300 !important;
            letter-spacing: 1px;
            line-height: 1.8;
        }
        .m-text-thin{
            font-weight:300 !important;
        }
        .m-text-spaced{
            letter-spacing: 1px;
        }
        .m-text-lined{
            line-height: 1.8;
        }
        .m-opacity-mini{
            opacity: 0.8;
        }

        .m-inline-block{
            display: inline-block !important;
        }


        .m-container{
            max-width: 60em !important;
            margin: auto !important;
        }



        /*position*/
        .m-top-right{
            position: absolute;
            top: 0;
            right: 0;
        }

        .m-mobile-show{
            display: none !important;
        }

        /*下面做个移动端隐藏按钮的功能，宽度小于800px*/
        @media screen and (max-width: 800px){
            .m-mobile-hide{
                display: none !important;
            }
            .m-mobile-show{
                 display: block !important;
            }
        }


    </style>
</head>
<body>

<!--导航-->
<nav class="ui inverted stackable attached segment m-padded-tb-mini ">
<!--    有的时候也需要我们自己去定义一下css-->
    <div class="ui container">
        <div class="ui inverted secondary stackable menu m-padded-tb-mini m-text-spaced" >
            <h2 class="ui teal header item">Blog</h2>
            <a href="#" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>

            <div class="m-item right item m-mobile-hide">
                <div class="ui icon inverted transparent input">
                    <input type="text" placeholder="Search......">
                    <i class="search link icon"></i>
                </div>
            </div>


        </div>
    </div>
    <!--menu toggle没有显示的意义，为了用jquery获取这个元素-->
    <a href="#" class="ui menu toggle black icon button m-top-right m-mobile-show">
        <i class="sidebar icon"></i>
    </a>

</nav>

<!--中间内容，换个部分-->
<div class="m-container m-padded-tb-large stackable">
    <div class="ui container">
        <!--header-->
        <div class="ui top attached segment">
            <div class="ui middle aligned two column grid">
                <div class="column">
                    <div class="ui teal header">分类</div>
                </div>
                <div class="right aligned column">
                    <div class="">
                        共<h3 class="ui orange header m-inline-block">14</h3>个
                    </div>
                </div>
            </div>





        </div>
        <div class="ui attached segment">
            <div class="ui labeled button m-margin-">
                <a href="#" class="ui basic teal button">思考与感悟</a>
                <div class="ui basic teal left pointing label">24</div>
            </div>
            <div class="ui labeled button">
                <a href="#" class="ui basic  button">觉悟</a>
                <div class="ui basic  left pointing label">24</div>
            </div>
            <div class="ui labeled button">
                <a href="#" class="ui basic  button">冷静</a>
                <div class="ui basic  left pointing label">24</div>
            </div>
            <div class="ui labeled button">
                <a href="#" class="ui basic  button">觉悟</a>
                <div class="ui basic  left pointing label">24</div>
            </div>
            <div class="ui labeled button">
                <a href="#" class="ui basic  button">冷静</a>
                <div class="ui basic  left pointing label">24</div>
            </div>
            <div class="ui labeled button">
                <a href="#" class="ui basic  button">觉悟</a>
                <div class="ui basic  left pointing label">24</div>
            </div>
            <div class="ui labeled button">
                <a href="#" class="ui basic  button">冷静</a>
                <div class="ui basic  left pointing label">24</div>
            </div>
            <div class="ui labeled button">
                <a href="#" class="ui basic  button">觉悟</a>
                <div class="ui basic  left pointing label">24</div>
            </div>
            <div class="ui labeled button">
                <a href="#" class="ui basic  button">冷静</a>
                <div class="ui basic  left pointing label">24</div>
            </div>
            <div class="ui labeled button">
                <a href="#" class="ui basic  button">觉悟</a>
                <div class="ui basic  left pointing label">24</div>
            </div>
            <div class="ui labeled button">
                <a href="#" class="ui basic  button">冷静</a>
                <div class="ui basic  left pointing label">24</div>
            </div>
        </div>
        <div class="ui  teal segment">
            <div class="ui padded vertical segment">
                <div class="ui mobile reversed stackable grid">
                    <!--11份和5份-->
                    <div class="eleven wide column">
                        <h3 class="ui header">一生所爱之不负如来不负卿</h3>
                        <p class="m-text">没有人能够感同身受，即使你描述的多么动人。我可以陪你疯，陪你闹，陪你哭，陪你笑，什么都可以，只是你什么都不要。想你的时候有些幸福，幸福得有些难过。</p>
                        <div class="ui grid">
                            <div class="eleven wide column">
                                <!--                                            horizontal横着的意思-->
                                <div class="ui horizontal link list">
                                    <div class="item">
                                        <img src="../static/images/kenan.jpg" alt="" class="ui avatar image">
                                        <div class="content"><a href="#" class="header">工藤新一</a></div>


                                    </div>
                                    <div class="item">
                                        <i class="calendar icon"></i>2019-8-19
                                    </div>
                                    <div class="item">
                                        <i class="eye icon"></i>1111
                                    </div>


                                </div>
                            </div>
                            <div class="five wide column">
                                <a href="#" target="_blank" class="ui teal basic label m-text-thin">认知进化</a>
                            </div>
                        </div>
                    </div>

                    <div class="five wide column">
                        <a href="#" target="_blank">
                            <img src="../static/images/01.png" alt="" class="ui rounded image" >
                        </a>
                    </div>
                </div>
            </div>
            <div class="ui padded vertical segment">
                <div class="ui mobile reversed stackable grid">
                    <!--11份和5份-->
                    <div class="eleven wide column">
                        <h3 class="ui header">一生所爱之不负如来不负卿</h3>
                        <p class="m-text">没有人能够感同身受，即使你描述的多么动人。我可以陪你疯，陪你闹，陪你哭，陪你笑，什么都可以，只是你什么都不要。想你的时候有些幸福，幸福得有些难过。</p>
                        <div class="ui grid">
                            <div class="eleven wide column">
                                <!--                                            horizontal横着的意思-->
                                <div class="ui horizontal link list">
                                    <div class="item">
                                        <img src="../static/images/kenan.jpg" alt="" class="ui avatar image">
                                        <div class="content"><a href="#" class="header">工藤新一</a></div>


                                    </div>
                                    <div class="item">
                                        <i class="calendar icon"></i>2019-8-19
                                    </div>
                                    <div class="item">
                                        <i class="eye icon"></i>1111
                                    </div>


                                </div>
                            </div>
                            <div class="five wide column">
                                <a href="#" target="_blank" class="ui teal basic label m-text-thin">认知进化</a>
                            </div>
                        </div>
                    </div>

                    <div class="five wide column">
                        <a href="#" target="_blank">
                            <img src="../static/images/01.png" alt="" class="ui rounded image" >
                        </a>
                    </div>
                </div>
            </div>
            <div class="ui padded vertical segment">
                <div class="ui mobile reversed stackable grid">
                    <!--11份和5份-->
                    <div class="eleven wide column">
                        <h3 class="ui header">一生所爱之不负如来不负卿</h3>
                        <p class="m-text">没有人能够感同身受，即使你描述的多么动人。我可以陪你疯，陪你闹，陪你哭，陪你笑，什么都可以，只是你什么都不要。想你的时候有些幸福，幸福得有些难过。</p>
                        <div class="ui grid">
                            <div class="eleven wide column">
                                <!--                                            horizontal横着的意思-->
                                <div class="ui horizontal link list">
                                    <div class="item">
                                        <img src="../static/images/kenan.jpg" alt="" class="ui avatar image">
                                        <div class="content"><a href="#" class="header">工藤新一</a></div>


                                    </div>
                                    <div class="item">
                                        <i class="calendar icon"></i>2019-8-19
                                    </div>
                                    <div class="item">
                                        <i class="eye icon"></i>1111
                                    </div>


                                </div>
                            </div>
                            <div class="five wide column">
                                <a href="#" target="_blank" class="ui teal basic label m-text-thin">认知进化</a>
                            </div>
                        </div>
                    </div>

                    <div class="five wide column">
                        <a href="#" target="_blank">
                            <img src="../static/images/01.png" alt="" class="ui rounded image" >
                        </a>
                    </div>
                </div>
            </div>
            <div class="ui padded vertical segment">
                <div class="ui mobile reversed stackable grid">
                    <!--11份和5份-->
                    <div class="eleven wide column">
                        <h3 class="ui header">一生所爱之不负如来不负卿</h3>
                        <p class="m-text">没有人能够感同身受，即使你描述的多么动人。我可以陪你疯，陪你闹，陪你哭，陪你笑，什么都可以，只是你什么都不要。想你的时候有些幸福，幸福得有些难过。</p>
                        <div class="ui grid">
                            <div class="eleven wide column">
                                <!--                                            horizontal横着的意思-->
                                <div class="ui horizontal link list">
                                    <div class="item">
                                        <img src="../static/images/kenan.jpg" alt="" class="ui avatar image">
                                        <div class="content"><a href="#" class="header">工藤新一</a></div>


                                    </div>
                                    <div class="item">
                                        <i class="calendar icon"></i>2019-8-19
                                    </div>
                                    <div class="item">
                                        <i class="eye icon"></i>1111
                                    </div>


                                </div>
                            </div>
                            <div class="five wide column">
                                <a href="#" target="_blank" class="ui teal basic label m-text-thin">认知进化</a>
                            </div>
                        </div>
                    </div>

                    <div class="five wide column">
                        <a href="#" target="_blank">
                            <img src="../static/images/01.png" alt="" class="ui rounded image" >
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>



<!--底部footer-->
<!--vertical充满-->
<footer class="ui stackable inverted vertical segment m-padded-tb-massive">

    <div class="ui center aligned container">

        <!--grid,分隔成16份，和web不一样-->
        <div class="ui inverted divided stackable grid">
            <div class="three wide column">
<!--                图片需要这样的格式-->
                <img src="../static/images/kenan.jpg" class="ui rounded image" alt="" style="width: 300px">
            </div>
            <div class="three wide column">
<!--                加个标题，也需要样式-->
                <h4 class="ui inverted header m-opacity-mini">最新博客</h4>
<!--                竖着的列表，嗯-->
                <div class="ui inverted link list">

                    <a href="" class="item">Springboot一站式开发</a>
                    <a href="" class="item">Java高级开发</a>
                    <a href="" class="item">Python高级开发</a>
                </div>
            </div>
            <div class="three wide column">
                <!--                加个标题，也需要样式-->
                <h4 class="ui inverted header m-opacity-mini" > 联系我</h4>
                <!--                竖着的列表，嗯-->
                <div class="ui inverted link list">

                    <a href="" class="item">微信：</a>
                    <a href="" class="item">扣扣：</a>

                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header m-opacity-mini" >成长历程</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini">每次你看我的时候我都假装在看别处，而每次你看别处的时候我都在看着你。冬日的晴天，不及你的温柔，星罗棋布的夜幕，像你眼中的闪烁，世间美好的一切，感觉都体现在你身上了。</p>
            </div>
        </div>
        <!--输入：ui inverted section divider，按tap即可快捷补全-->
        <div class="ui inverted section divider"></div>

        <p class="m-text-thin m-text-spaced m-opacity-mini">Copyright:@2018-2019 苏网</p>
    </div>

</footer>


<!--引入下面这两个资源-->
<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>


<!--我们用jquery实现获取嗯-->
<script>

    /*列表中的值：m-item*/
    $('.menu.toggle').click(function () {
        /*如果有就去除掉，没有就加上*/
        $('.m-item').toggleClass('m-mobile-hide');
    });


</script>


</body>
</html>

 

 

 

GeniusTeam-夜光
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
夜光带你走进springboot必备知识点（1）擅长的领域
夜光的博客
08-29 221
夜光序言： 大多数时候，消耗你能量的都不是工作，而是工作中遇到的人。干活本身是不累的，平衡情绪最累。 正文： SpringBoot 区别 Springboot是springMVC的升级版,两者没有必然联系,可直接学习springBoot,springBoot是伴随着Spring4.0诞生的 SpringBoot的特点 化繁...
基于Springboot的个人博客系统(个人开发)
08-12
文章编辑使用的是markdown编辑器，支持分页功能， 个人主页显示，赞赏显示二维码，添加标签，归档， 用户评论，评论管理等功能(博客该有的功能都有)
SpringBoot-DDD领域驱动设计的概念
weixin_45203607的博客
09-23 5817
SpringBoot-DDD领域驱动设计的概念 大家都知道软件开发不是一蹴而就的事情，我们不可能在不了解产品(或行业领域)的前提下进行软件开发，在开发前通常需要进行大量的业务知识梳理，然后才能到软件设计的层面，最后才是开发。而在业务知识梳理的过程中，必然会形成某个领域知识，根据领域知识来一步步驱动软件设计，就是领域驱动设计(DDD,Domain-Driven Design)的基本概念 。 为什么需要 DDD 在业务初期，功能大都非常简单，普通的 CRUD 就基本能满足要求，此时系统是清晰的。但随着产品的不断
MyBlog前端开发2
silence的博客
06-21 350
昨天我们介绍了个人博客开发的背景、系统叙述、功能介绍以及首页的开发，我们主要说了如何做，至于具体的代码 部分并没有说，今天我们就来讲一讲。
Android UI使用HorizontalListView实现水平滑动
08-26
主要为大家详细介绍了Android UI使用HorizontalListView实现水平滑动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
夜光带你走进 微信小程序开发（五）擅长的领域
01-03
不管与你的路有多苦擦干眼泪告诉自己不能哭不怕谁说我是个错误只要你我不放弃永不认输。   正文：  以道御术 / 以术识道 有些东西，如果我们自定义的话，就会和其他小程序风格不一致了~ 如果想要不一样 ...
行业资料-交通装置-一种带夜光和刹车警示功能的电动车.zip
08-24
行业资料-交通装置-一种带夜光和刹车警示功能的电动车.zip
夜光数据.pptx
09-18
DMSP/OLS夜光数据，SNPP/VIIRS夜光数据及其应用领域，包括两个数据的下载地址，卫星及传感器基本参数，时间序列产品基本介绍（空间和时间分辨率，覆盖范围，投影坐标，子产品介绍，如DMSP的平均灯光强度、稳定灯光...
行业资料-建筑装置-带镜子及钟表的夜光笔.zip
08-18
总的来说，"带镜子及钟表的夜光笔"是一个将实用性和创新性相结合的建筑装置，它的出现反映了建筑设计领域对工具功能多样化和用户体验提升的追求。这样的产品不仅提升了工作效率，也增强了使用者的工作体验，是现代...
统计某年夜光总量、夜光增长率等夜光数据
06-17
夜光遥感是一种利用卫星遥感技术来监测地球表面夜间照明情况的方法，它为我们提供了对全球夜间活动的宏观视角。IDL（Interactive Data Language）是一种强大的编程语言，特别适合处理和分析遥感数据，包括夜光数据。...
Spring boot实训开发个人博客（六）关于我页
欢迎您
07-04 157
Spring boot实训开发个人博客（六）关于我页 1.新建about.html文件 2.分布好div界面(左放图片,右方文字介绍): 1.左边图片部分: 2.右边文字部分: </div> <div class="five wide column"> <div class="ui top attached segment"> <div
当样式中存在!important时无法使用show()或hide() ...
weixin_30446613的博客
06-11 357
如果使用!important在你的样式中，比如display: none !important，此时就不能用show()了 但是我在查阅资料时发现有这样的解释, If using!importantin your styles, such asdisplay: none !important, it is necessary to override the style...
前端开发框架Semantic UI（一）
潜行100的博客
03-25 3万+
文章转载自：http://blog.csdn.net/a464057216/article/details/52493469文章转载自：http://blog.csdn.net/a464057216/article/details/52493469文章转载自：http://blog.csdn.net/a464057216/article/details/52493469简介安装Semantic U...
Android UI开发: 横向ListView(HorizontalListView)及一个简单相册的完整实现 (附源码下载)
热门推荐
yanzi1225627的专栏
03-15 20万+
本文内容：1、横向ListView的所有实现思路; 2、其中一个最通用的思路HorizontalListView，并基于横向ListView开发一个简单的相册； 3、实现的横向ListView在点击、浏览时item背景会变色，并解决了listview里setSelected造成item的选择状态混乱的问题。
【个人实习日志】Springboot新闻管理系统（四）
wPrimer的博客
08-01 932
基于Springboot实现新闻的删除、前台页面的展示一、新闻的删除二、前台页面主页的显示 一、新闻的删除 通过从前端页面传来新闻id删除新闻,删除新闻后重定向到新闻显示页面 //controller @RequestMapping("delete/{id}") public String delete(@PathVariable Long id){ newsService.deleteById(id); return "redirect:/admin/news";
Spring Boot- 个人博客 - 博客详情页
Forlogenの解忧杂货铺
07-15 731
文章目录1. 需求分析2. 前端处理3. 后端处理3.1 博客详情3.2 评论4. footer5. 总结 __ 1. 需求分析 完整的博客详情页如上述所示，页面中包含的部分主要分为三大块： 博客详情：详情信息中包含如下的内容： 作者 更新时间 浏览次数 标签 正文 赞赏 转载声明 评论：评论部分首先设定为两级的层次结构，原始评论为父级，它下面相应的评论都归为子级评论。此外，评论还需要区分是博主还是访客发表，如果是博主需要显示博主标签和头像；如果是访客，显示的是同一的访客头像 侧边栏：侧
首页模块设计（个人博客）
datou0_0的博客
02-28 560
首页模块设计（个人博客） 一、编写dao层 二、绑定mapper配置文件 三、编写service层 四、编写controller层 @RequestMapping("/") public String index(@RequestParam(value = "pageNum",defaultValue = "1") Integer pageNum, Model model) { PageHelper.startPage(pageNum,4); List<Article> ar
领域驱动设计DDD如何在SpringBoot下落地？
最新发布
null的专栏
10-15 1628
springboot领域驱动设计落地过程分享
项目实训1-导航栏与底部
qianyikang的博客
06-23 125
一。项目功能 1.创建空白项目【blog】 2。开始编写页面 （1）导航栏 <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 ite

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值