文章目录

  • Spring Boot开发小而美的个人博客-李哥
    • 1、首页-2
    • 2、实现代码
      • （1）左边博客列表
      • （2）右边的top
    • 3、CSS
    • 4、遇到的问题
    • 5、效果

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

1、首页-2


2、实现代码

（1）左边博客列表

<!-- 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>

<!-- (2)右边的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"><i class="angle double right icon">more</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><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="idea icon"></i>标签</div><div class="right aligned column"><a href="#" target="_blank"><i class="angle double right icon">more</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="ui teal basic left pointing label">23</div></a><a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">方法论<div class="ui teal basic left pointing label">23</div></a><a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">方法论<div class="ui teal basic left pointing label">23</div></a><a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">方法论<div class="ui teal basic left pointing label">23</div></a><a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">方法论<div class="ui teal basic left pointing label">23</div></a><a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">方法论<div class="ui teal basic left pointing label">23</div></a><a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">方法论<div class="ui teal basic left pointing label">23</div></a><a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">方法论<div class="ui teal basic left pointing label">23</div></a><a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">方法论<div class="ui teal basic left pointing label">23</div></a><a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">方法论<div class="ui teal basic left pointing label">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><!--二维码--><h4 class="ui horizontal divider header m-margin-top-large">扫码关注我</h4><div class="ui centered card" style="width: 11em"><img src="./static/images/wechat.png" alt="" class="ui rounded image"></div></div>

<!--(3)content    ;attached,上下框连接--><div class="ui attached  segment"><div class="ui padded vertical segment m-padded-tb-large"><div class="ui 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=1006" alt="" class="ui avatar image"><div class="content"><div class="header">李哥</div></div></div><div class="item"><i class="calendar icon"></i>2021.6.1</div><div class="item"><i class="eye icon"></i>27</div></div></div><div class="right aligned five wide column"><a href="#" target="_blank" class="ui teal basic label m-padded-tb-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=1006"  alt="" class="ui rounded image"></a></div></div></div></div><!--复制多遍content-->

<!--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>

（2）右边的top

 <!--    分类--><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>标签内容 --></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="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"><a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">方法论<div class="ui teal basic left pointing label">23</div></a><!--  复制多个<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>标签内容 --></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.png" alt="" class="ui rounded image"></div>

3、CSS

.m-padded-tb-mini{/*导航栏的高度 ;!important,提高样式的等级*/padding-top: 0.2em !important;padding-bottom: 0.2em !important;
}
.m-text{font-weight: 300 !important;letter-spacing: 1px !important;line-height: 1.8;
}
.m-padded-tb-tiny{padding-top: 0.3em !important;padding-bottom: 0.3em !important;
}
.m-padded-tb-small{padding-top: 0.5em !important;padding-bottom: 0.5em !important;
}
.m-padded-tb{padding-top: 1em !important;padding-bottom: 1em !important;
}.m-padded-tb-large{padding-top: 2em !important;padding-bottom: 2em !important;
}
.m-padded-tb-big{padding-top: 3em !important;padding-bottom: 3em !important;
}
.m-padded-tb-huge{padding-top: 4em !important;padding-bottom: 4em !important;
}.m-inline-block{/*    display*/display: inline-block !important;
}
.m-container{max-width: 72em !important;margin: auto !important;
}
.m-margin-tb-tiny{/*    margin*/margin-top: 0.3em !important;margin-bottom: 0.3em !important;
}
.m-margin-top-small{margin-top: 0.5em !important;
}
.m-margin-top-top{margin-top: 1em !important;
}
.m-margin-top-large{margin-top: 2em !important;
}
.m-black{/*    颜色*/color: #333 !important;
}

4、遇到的问题

  • html中引入CSS或者图片的路径不对
<link rel="stylesheet" href="../static/css/me.css">

  • 在多层次的div中，注意逻辑结构

5、效果

SSM实训: 2、博客中间内容（首页2）相关推荐

  1. Java程序设计综合项目实训二——博客一

    职务 姓名 学号 组长 张广哲 16012007 组员 陈炳全 16012022 组员 葛晨延 16012010 组员 周楷柠 16012005 博客地址: 张广哲(组长):http://www.cn ...

  2. Spring实训 个人博客二 详情页

    1.在index导航栏中添加归档: 2.创建详情页文件blog.html: 3.添加文章头部: <div class="ui container"><div cl ...

  3. 自然语言交流系统 phxnet团队 创新实训 个人博客 （五）

    有关我们这个项目:智能自然语言交流系统,所借鉴的技术有: 第一:我们使用了科大讯飞的在线语音转换,涉及的有文本传给云端服务器的文字转换成语音和本地的语音上传给服务器转换成文字. 涉及的相关的代码有: ...

  4. 自然语言交流系统 phxnet团队 创新实训 项目博客 （十三）

    对我们项目中的关键技术实现进行总结: 一.3DMax关键技术实现 1.一下的关于3DMax中对于人物的设计和操作均需要在对3DMax基础知识熟练掌握的情况下进行的. 2. 骨骼架设:首先对导入到3DM ...

  5. 自然语言交流系统 phxnet团队 创新实训 个人博客 （二）

    因为项目用的到条件编译,遂专门记载: 众所周知在C和CPP中可以通过预处理语句来实现条件编译,但是在java中没有预处理语句,我们该如何实现条件编译呢? 这是一个简单的demo Java代码   pu ...

  6. 自然语言交流系统 phxnet团队 创新实训 项目博客 （五）

    3DMax方面所涉及的专业知识:                       (1)一下的关于3DMax中对于人物的设计和操作均需要在对3DMax基础知识熟练掌握的情况下进行的. (2)骨骼架设:首先 ...

  7. SSM 实训笔记 -10- 使用 sessionStorage 存储数据、js 图片验证码、登录加载动画

    SSM 实训笔记 -10- 使用 sessionStorage 存储数据.js 图片验证码.登录加载动画 本篇内容: (1)在登录成功时,使用 sessionStorage 存储用户的用户名,并在登录 ...

  8. java ssm框架论文,基于SSM框架的个人博客系统(源码+论文)

    需求分析 使用spring+springmvc+mybatis实现一个个人博客系统,可以记录个人生活日志, 进行技术分享, 并且浏览者可以对博客进行阅览与评论 本站提供了其他类型的 在线个人博客网站源 ...

  9. 【java毕业设计】基于javaEE+SSM+MySql的个人博客系统设计与实现（毕业论文+程序源码）——个人博客系统

    基于javaEE+SSM+MySql的个人博客系统设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于javaEE+SSM+MySql的个人博客系统设计与实现,文章末尾附有本毕业设计的论文和源 ...

  10. 作业二：个人博客作业内容：需求分析

    作业二:个人博客作业内容:需求分析 怎样与用户有效沟通获取用户的真实需求? 访谈,正式访谈系统分析员将提出一些事先准备好的具体问题:非正式访谈中,分析人员将提出一些用户可以自由回答的开放性问题,一鼓励 ...

最新文章

  1. php 静态类内存,php面向对象中static静态属性与方法的内存位置分析
  2. 卧槽！华为大佬整理的Linux学习笔记和资料不小心流落到了外网.……
  3. android之lint警告This Handler class should be static or leaks might occur
  4. php实现人员权限管理（用户界面）
  5. 《深入浅出Nodejs》笔记——模块机制(2)
  6. pandas nan inf
  7. 虚拟主机TOMCAT配置
  8. __asm__ __volatile__ 嵌入式内嵌汇编语法解构
  9. 机器学习基础（三十二） —— 使用 Apriori 算法进行关联分析
  10. element-UI：el-table 表格排序
  11. [教程] 康盛创想 Windows （server 2003） 服务器部署标准 白丁简明版
  12. PAIP.如何选择安全的即时通讯IM工具.txt
  13. 超级硬盘数据恢复软件 4.6.5.0注冊码破解版
  14. JAVA之所得税计算器
  15. php微信问卷调查,We_Questionnaire: ！！停止维护！！基于Thinkphp3.2.3 + jqueryMobile1.4.4的微信公众号应用 -- 移动端问卷调查...
  16. Python学习之字典练习(重复数字统计)
  17. 企业级BOM系统与外部系统集成的几种方案
  18. 微信 小程序 python 商城_微信小程序——商城篇
  19. stm32+esp8266 通过MQTT发送到thingsboard平台
  20. XML中大于号小于号的转义字符

热门文章

  1. 解决AndroidStudio中使用.9图片不生效的问题
  2. c2s三国志java,c2s三国志1.0.0下载_c2s三国志app下载
  3. C++继承中的构造函数—计算圆柱体的表面积（函数名隐藏）
  4. CAD制图技巧，如何旋转图形？
  5. 服务器vga接显示器无信号,显示器用HDMI转VGA接口后,无信号怎么解决
  6. 利用docker制作Java程序镜像
  7. istio系列：第六章-Telemetry遥测配置
  8. 基于HAL库的stm32F7串口通信
  9. 青岛大学2020计算机考研录取名单,青岛大学复试录取名单 青岛大学2020年复试名单...
  10. 想成为年薪30W+的运营，你必须具备这4个“运营思维”