个人博客---学习02

于 2021-06-02 16:06:24 发布
阅读量250 收藏
点赞数 1
分类专栏： spring
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/uoprewqsnh/article/details/117413354
版权

文章目录

一、思维导图

在这里插入图片描述

二、个人博客简介

1、前端开发

（1）、页面设计

  1. 首页
  2. 详情页
  3. 分类
  4. 标签
  5. 归档
  6. 关于我

2、后端开发

  • 增删改查

3、引入Spring Boot模块

  • web
  • Thymeleaf
  • JPA
  • MySQL
  • Aspects
  • DevTools

4、技术

后端：Spring Boot + JPA + thymeleaf模板
数据库：MySQL
前端UI：Semantic UI框架

三、个人博客

  • 接到上一个个人博客做

1、编写index.html里的中间部分

在这里插入图片描述

<!--中间内容-->
<div  class="m-container m-padded-tb-big">
  <div class="ui container">
    <div class="ui  grid">
      <!--左边博客列表-->
      <div class="eleven wide column">
        <!--header-->
        <div class="ui top attached segment">
          <div class="ui middle aligned two column grid">
            <div class="column">
              <h3 class="ui teal header">博客</h3>
            </div>
            <div class="right aligned column">
              共 <h2 class="ui orange header m-inline-block m-text-thin"> 14 </h2> 篇
            </div>
          </div>
        </div>

        <!--content-->
        <div class="ui attached  segment">

          <div class="ui padded vertical segment m-padded-tb-large">
            <div class="ui mobile reversed stackable grid">
              <div class="eleven wide column">
                <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                <div class="ui grid">
                  <div class="eleven wide column">
                    <div class="ui mini horizontal link list">
                      <div class="item">
                        <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui avatar image">
                        <div class="content"><a href="#" class="header">李仁密</a></div>
                      </div>
                      <div class="item">
                        <i class="calendar icon"></i> 2017-10-01
                      </div>
                      <div class="item">
                        <i class="eye icon"></i> 2342
                      </div>
                    </div>
                  </div>
                  <div class="right aligned five wide column">
                    <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                  </div>
                </div>
              </div>

              <div class="five wide column">
                <a href="#" target="_blank">
                  <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                </a>
              </div>

            </div>
          </div>
          <div class="ui padded vertical segment m-padded-tb-large">
            <div class="ui mobile reversed stackable grid">
              <div class="eleven wide column">
                <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                <div class="ui grid">
                  <div class="eleven wide column">
                    <div class="ui mini horizontal link list">
                      <div class="item">
                        <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui avatar image">
                        <div class="content"><a href="#" class="header">李仁密</a></div>
                      </div>
                      <div class="item">
                        <i class="calendar icon"></i> 2017-10-01
                      </div>
                      <div class="item">
                        <i class="eye icon"></i> 2342
                      </div>
                    </div>
                  </div>
                  <div class="right aligned five wide column">
                    <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                  </div>
                </div>
              </div>

              <div class="five wide column">
                <a href="#" target="_blank">
                  <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                </a>
              </div>

            </div>
          </div>
          <div class="ui padded vertical segment m-padded-tb-large">
            <div class="ui mobile reversed stackable grid">
              <div class="eleven wide column">
                <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                <div class="ui grid">
                  <div class="eleven wide column">
                    <div class="ui mini horizontal link list">
                      <div class="item">
                        <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                        <div class="content"><a href="#" class="header">李仁密</a></div>
                      </div>
                      <div class="item">
                        <i class="calendar icon"></i> 2017-10-01
                      </div>
                      <div class="item">
                        <i class="eye icon"></i> 2342
                      </div>
                    </div>
                  </div>
                  <div class="right aligned five wide column">
                    <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                  </div>
                </div>
              </div>

              <div class="five wide column">
                <a href="#" target="_blank">
                  <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                </a>
              </div>

            </div>
          </div>
          <div class="ui padded vertical segment m-padded-tb-large">
            <div class="ui mobile reversed stackable grid">
              <div class="eleven wide column">
                <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                <div class="ui grid">
                  <div class="eleven wide column">
                    <div class="ui mini horizontal link list">
                      <div class="item">
                        <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                        <div class="content"><a href="#" class="header">李仁密</a></div>
                      </div>
                      <div class="item">
                        <i class="calendar icon"></i> 2017-10-01
                      </div>
                      <div class="item">
                        <i class="eye icon"></i> 2342
                      </div>
                    </div>
                  </div>
                  <div class="right aligned five wide column">
                    <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                  </div>
                </div>
              </div>

              <div class="five wide column">
                <a href="#" target="_blank">
                  <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                </a>
              </div>

            </div>
          </div>
          <div class="ui padded vertical segment m-padded-tb-large">
            <div class="ui mobile reversed stackable grid">
              <div class="eleven wide column">
                <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                <div class="ui grid">
                  <div class="eleven wide column">
                    <div class="ui mini horizontal link list">
                      <div class="item">
                        <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                        <div class="content"><a href="#" class="header">李仁密</a></div>
                      </div>
                      <div class="item">
                        <i class="calendar icon"></i> 2017-10-01
                      </div>
                      <div class="item">
                        <i class="eye icon"></i> 2342
                      </div>
                    </div>
                  </div>
                  <div class="right aligned five wide column">
                    <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                  </div>
                </div>
              </div>

              <div class="five wide column">
                <a href="#" target="_blank">
                  <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                </a>
              </div>

            </div>
          </div>
          <div class="ui padded vertical segment m-padded-tb-large">
            <div class="ui mobile reversed stackable grid">
              <div class="eleven wide column">
                <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                <div class="ui grid">
                  <div class="eleven wide column">
                    <div class="ui mini horizontal link list">
                      <div class="item">
                        <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                        <div class="content"><a href="#" class="header">李仁密</a></div>
                      </div>
                      <div class="item">
                        <i class="calendar icon"></i> 2017-10-01
                      </div>
                      <div class="item">
                        <i class="eye icon"></i> 2342
                      </div>
                    </div>
                  </div>
                  <div class="right aligned five wide column">
                    <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                  </div>
                </div>
              </div>

              <div class="five wide column">
                <a href="#" target="_blank">
                  <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                </a>
              </div>

            </div>
          </div>
          <div class="ui padded vertical segment m-padded-tb-large">
            <div class="ui mobile reversed stackable grid">
              <div class="eleven wide column">
                <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                <div class="ui grid">
                  <div class="eleven wide column">
                    <div class="ui mini horizontal link list">
                      <div class="item">
                        <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                        <div class="content"><a href="#" class="header">李仁密</a></div>
                      </div>
                      <div class="item">
                        <i class="calendar icon"></i> 2017-10-01
                      </div>
                      <div class="item">
                        <i class="eye icon"></i> 2342
                      </div>
                    </div>
                  </div>
                  <div class="right aligned five wide column">
                    <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                  </div>
                </div>
              </div>

              <div class="five wide column">
                <a href="#" target="_blank">
                  <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                </a>
              </div>

            </div>
          </div>
          <div class="ui padded vertical segment m-padded-tb-large">
            <div class="ui mobile reversed stackable grid">
              <div class="eleven wide column">
                <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                <div class="ui grid">
                  <div class="eleven wide column">
                    <div class="ui mini horizontal link list">
                      <div class="item">
                        <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                        <div class="content"><a href="#" class="header">李仁密</a></div>
                      </div>
                      <div class="item">
                        <i class="calendar icon"></i> 2017-10-01
                      </div>
                      <div class="item">
                        <i class="eye icon"></i> 2342
                      </div>
                    </div>
                  </div>
                  <div class="right aligned five wide column">
                    <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                  </div>
                </div>
              </div>

              <div class="five wide column">
                <a href="#" target="_blank">
                  <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                </a>
              </div>

            </div>
          </div>
          <div class="ui padded vertical segment m-padded-tb-large">
            <div class="ui mobile reversed stackable grid">
              <div class="eleven wide column">
                <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                <div class="ui grid">
                  <div class="eleven wide column">
                    <div class="ui mini horizontal link list">
                      <div class="item">
                        <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                        <div class="content"><a href="#" class="header">李仁密</a></div>
                      </div>
                      <div class="item">
                        <i class="calendar icon"></i> 2017-10-01
                      </div>
                      <div class="item">
                        <i class="eye icon"></i> 2342
                      </div>
                    </div>
                  </div>
                  <div class="right aligned five wide column">
                    <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                  </div>
                </div>
              </div>

              <div class="five wide column">
                <a href="#" target="_blank">
                  <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                </a>
              </div>

            </div>
          </div>
          <div class="ui padded vertical segment m-padded-tb-large">
            <div class="ui mobile reversed stackable grid">
              <div class="eleven wide column">
                <h3 class="ui header">你真的理解什么是财富自由吗？</h3>
                <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是，我们很多人很多时候根本没有对目标正确的定义，甚至根本从来就没有想过，只是大家都那么做而已…...</p>
                <div class="ui grid">
                  <div class="eleven wide column">
                    <div class="ui mini horizontal link list">
                      <div class="item">
                        <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                        <div class="content"><a href="#" class="header">李仁密</a></div>
                      </div>
                      <div class="item">
                        <i class="calendar icon"></i> 2017-10-01
                      </div>
                      <div class="item">
                        <i class="eye icon"></i> 2342
                      </div>
                    </div>
                  </div>
                  <div class="right aligned five wide column">
                    <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                  </div>
                </div>
              </div>

              <div class="five wide column">
                <a href="#" target="_blank">
                  <img src="https://unsplash.it/800/450?image=1005"  alt="" class="ui rounded image">
                </a>
              </div>

            </div>
          </div>


        </div>

        <!--footer-->
        <div class="ui bottom attached segment">
          <div class="ui middle aligned two column grid">
            <div class="column">
              <a href="#" class="ui mini teal basic button">上一页</a>
            </div>
            <div class="right aligned column">
              <a href="#" class="ui mini teal basic button">下一页</a>
            </div>
          </div>
        </div>

      </div>

      <!--右边的top-->
      <div class="five wide column">

        <!--分类-->
        <div class="ui segments">
          <div class="ui secondary segment">
            <div class="ui two column grid">
              <div class="column">
                <i class="idea icon"></i>分类
              </div>
              <div class="right aligned column">
                <a href="#" target="_blank">more <i class="angle double right icon"></i></a>
              </div>
            </div>
          </div>
          <div class="ui teal segment">
            <div class="ui fluid vertical menu">
              <a href="#" class="item">
                学习日志
                <div class="ui teal basic left pointing label">13</div>
              </a>
              <a href="#" class="item">
                思考与感悟
                <div class="ui teal basic left pointing label">13</div>
              </a>
              <a href="#" class="item">
                学习日志
                <div class="ui teal basic left pointing label">13</div>
              </a>
              <a href="#" class="item">
                学习日志
                <div class="ui teal basic left pointing label">13</div>
              </a>
              <a href="#" class="item">
                学习日志
                <div class="ui teal basic left pointing label">13</div>
              </a>
              <a href="#" class="item">
                学习日志
                <div class="ui teal basic left pointing label">13</div>
              </a>
            </div>
          </div>
        </div>

        <!--标签-->
        <div class="ui segments m-margin-top-large">
          <div class="ui secondary segment">
            <div class="ui two column grid">
              <div class="column">
                <i class="tags icon"></i>标签
              </div>
              <div class="right aligned column">
                <a href="#" target="_blank">more <i class="angle double right icon"></i></a>
              </div>
            </div>
          </div>
          <div class="ui teal segment">
            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
              方法论 <div class="detail">23</div>
            </a>
            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
              方法论 <div class="detail">23</div>
            </a>
            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
              方法论 <div class="detail">23</div>
            </a>
            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
              方法论 <div class="detail">23</div>
            </a>
            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
              方法论 <div class="detail">23</div>
            </a>
            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
              方法论 <div class="detail">23</div>
            </a>
            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
              方法论 <div class="detail">23</div>
            </a>
            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
              方法论 <div class="detail">23</div>
            </a>
            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
              方法论 <div class="detail">23</div>
            </a>
            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
              方法论 <div class="detail">23</div>
            </a>
          </div>
        </div>

        <!--最新推荐-->
        <div class="ui segments m-margin-top-large">
          <div class="ui secondary segment ">
            <i class="bookmark icon"></i>最新推荐
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事（User Story）</a>
          </div>
          <div class="ui segment" >
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事（User Story）</a>
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事（User Story）</a>
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事（User Story）</a>
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事（User Story）</a>
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事（User Story）</a>
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事（User Story）</a>
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事（User Story）</a>
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事（User Story）</a>
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事（User Story）</a>
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事（User Story）</a>
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事（User Story）</a>
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事（User Story）</a>
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事（User Story）</a>
          </div>
        </div>

        <!--二维码-->
        <h4 class="ui horizontal divider header m-margin-top-large">扫码关注我</h4>
        <div class="ui centered card" style="width: 11em">
          <img src="../static/images/wechat.jpg" alt="" class="ui rounded image" >
        </div>
      </div>

    </div>
  </div>

</div>
  • attached 附加
  • stackable 可堆叠
  • mobile reversed 手机端

2、添加外部链接

在这里插入图片描述

3、编写css样式

.m-padded-mini{
    padding:0.2em !important;
}
.m-padded-tiny{
    padding:0.3em !important;
}
.m-padded-tb-mini{
    padding-top:0.2em !important;
    padding-bottom:0.2em !important;
}
.m-paddded-tb-tiny{
    padding-top: 0.3em !important;
    padding-bottom: 0.3em !important;
}
.m-paddded-tb-small{
    padding-top: 0.5em !important;
    padding-bottom: 0.5em !important;
}
.m-paddded-tb{
    padding-top: 1em !important;
    padding-bottom: 1em !important;
}
.m-paddded-tb-large{
    padding-top: 2em !important;
    padding-bottom: 2em !important;
}
.m-paddded-tb-big{
    padding-top: 3em !important;
    padding-bottom: 3em !important;
}
.m-paddded-tb-huge{
    padding-top: 4em !important;
    padding-bottom: 4em !important;
}
.m-paddded-tb-massive{
    padding-top: 5em !important;
    padding-bottom: 5em !important;
}
/*----text----*/
.m-text{
    font-weight: 300 !important;
    letter-spacing: 1px !important;
    line-height: 1.8;
}

.m-text-thin{
    font-weight: 300 !important;
}
.m-text-spaced{
    letter-spacing: 1px !important;
}
.m-twxt-lined{
    line-height: 1.8;
}


/*----margin------*/
.m-margin-top-small{
    margin-top: 0.5em !important;
}
.m-margin-top{
    margin-top: 1em !important;
}
.m-margin-top-large{
    margin-top: 2em !important;
}
.m-margin-tb-tiny{
    margin-top: 0.3em !important;
    maragin-bottom: 0.3em !important;
}
/*-----opactity------*/

.m-opacity-mini{
    opacity: 0.8 !important;
}

/*---display-----*/
.m-inline-block{
    display: inline-block !important;
}
/*-----container----*/
.m-container{
    max-width: 72em !important;
    margin:auto !important;
}
/*---color---*/
.m-block{
    color: #333 !important;
}
@media screen and (max-width:768px){
    .m-mobile-hide{
        display:none !important;
    }
}

4、运行效果

在这里插入图片描述

5、添加stackable 可堆叠

  • 缩小页面可堆叠

（1）、修改导航栏

在这里插入图片描述

（2）、修改中间部分

在这里插入图片描述

（3）、底部

在这里插入图片描述

6、运行效果

在这里插入图片描述

7、添加按钮图标

在这里插入图片描述

8、编写css样式

在这里插入图片描述

9、运行效果查看

在这里插入图片描述

10、在手机端隐藏导航栏

在这里插入图片描述

11、编写css样式

  • 在手机屏幕端，小于768隐藏导航栏
    在这里插入图片描述

12、查看运行效果

在这里插入图片描述

13、非手机端这个按钮不显示

在这里插入图片描述

14、编写css样式

在这里插入图片描述

15、运行查看效果

在这里插入图片描述

16、点击使按钮显示导航栏，再一次点击隐藏

在这里插入图片描述

在这里插入图片描述

17、运行查看效果

在这里插入图片描述

18、拷贝一张图片在images下

在这里插入图片描述

19、添加背景图片

在这里插入图片描述

20、运行查看效果

在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值