Spring boot实训开发个人博客（六）关于我页

实训开发个人博客（六）关于我页"/>

Spring boot实训开发个人博客（六）关于我页

Spring boot实训开发个人博客（六）关于我页

1.新建about.html文件

2.分布好div界面(左放图片,右方文字介绍):

1.左边图片部分:

2.右边文字部分:

  </div><div class="five wide column"><div class="ui top attached segment"><div class="ui header">关于我</div></div><div class="ui attached segment"><p class="m-text">1906年5月15日，《华字汇报》：“鼠疫之毒焰，闽省最甚，迩来吸带（注：原文如此）而东奉省亦多闻之，向传用熊胆、蚺蛇胆可治，唯此两种药料价贵而货少真，以致患病者投之十不一效，药石无灵，时医束手，每恨岐黄之不留妙方于医界。兹有普济子邮寄一方，谓用猫胆一个，暖酒冲服立愈，盖胆能散郁去毒，猫鼠相克，而人以生方亦奇矣”。作者普济子，辗转到《大公报》，猫胆变猫尿，这就是20世纪初猫尿治鼠疫事件。瘟疫期间民间流传偏方是常见现象，生命受到疫病烕胁，一些简易却奇特的方法能使人心存希望。</p><p class="m-text">1910年12月，东北鼠疫爆发，伍连德率领防疫人员在哈尔滨第一次平疫统计，防疫人员2943人，死于鼠疫297人；救护车司机150人，死亡69人；当地中医9人，死亡4人，医学堂学生29人，死亡1人。</p></div><div class="ui attached segment"><div class="ui red basic label">随笔</div></div><div class="ui attached segment"><div class="ui teal basic label">随笔</div></div><div class="ui bottom attached segment"><a href="" class="ui circular icon button"><i class="weixin icon"></i></a><a href="" class="ui circular icon button"><i class="weibo icon"></i></a></div></div></div></div></div>

3.css部分:

body{background: url("./static/images/bg.jpg");
}
/*----padding----*/
.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-padded {padding: 1em !important;
}.m-padded-small{padding-top: 0.5em !important;padding-bottom: 0.5em !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-tiny{padding-top: 0.2em !important;padding-bottom: 0.2em !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-padded-tb-massive{padding-top: 5em !important;padding-bottom: 5em !important;
}.m-padded-lr-responsive{padding-left: 4em !important;padding-right: 4em !important;
}/*--text--*/.m-text{font-weight: 300 !important;letter-spacing: 1px !important;line-height: 1.8 !important;font-family: "宋体";
}
.m-text-thin{font-weight: 300 !important;
}
.m-text-spaced{letter-spacing: 1px !important;
}.m-text-lined{line-height: 1.8 !important;
}.m-black{color: #333;
}/* 字体透明度 */
.m-opacity-mini{opacity: 0.8 !important;
}
.m-opacity-tiny{opacity: 0.6 !important;
}
/*导航栏阴影 */
.m-shadow-small{-webkit-box-shadow:0 4px 8px rgba(0, 0, 0, 0.2) !important;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}/*display */
.m-inline-block{display: inline-block !important;
}
.m-container{max-width: 72em !important;margin: auto !important;
}
.m-container-small{max-width: 60em !important;margin: auto !important;
}/*--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;margin-bottom: 0.3em !important;
}.m-margin-bottom-small {margin-bottom: 0.5em !important;}/*---opacity---*/
.m-opacity-mini{opacity: 0.8 !important;
}/*---position---*/
.m-right-top{position: absolute;top: 0;right: 0;
}.m-mobile-show{display: none !important;
}/*---container---*/
.m-container{max-width: 72em !important;margin: auto !important;
}
.m-container{max-width: 72em !important;margin: auto !important;
}
.m-container-small{max-width: 60em !important;margin: auto !important;
}/*--color--*/
.m-black{color: #333 !important;
}@media screen and (max-width:800px){.m-mobile-hide{display: none !important;}.m-mobile-show{display: block !important;}.m-padded-lr-responsive{padding-left: 0 !important;padding-right: 0 !important;}.m-mobile-lr-clear{padding-left: 0 !important;padding-right: 0 !important;}.m-mobile-wide{width: 100% !important;}}

4.底部效果:

 <footer class="ui inverted vertical segment m-padded-tb-massive"><div class="ui center aligned container"><div class="ui inverted divided stackable grid"><div class="three wide column"><div class="ui inverted link list"><div class="item"><img src="./images/wechat.png" class="ui rounded image" alt="" style="width: 110px"></div></div></div><div class="three wide column"><h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4><div class="ui inverted link list"><a href="#" class="item m-text-thin">用户故事{User}</a><a href="#" class="item m-text-thin">用户故事{User}</a></div></div><div class="three wide column"><h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4><div class="ui inverted link list"><a href="#" class="item m-text-thin">Email：1316565748@qq</a><a href="#" class="item m-text-thin">QQ：1316565748</a></div></div><div class="seven wide column"><h4 class="ui inverted header m-text-thin m-text-spaced">Blog</h4><p class="m-text-thin m-text-spaced m-opacity-mini ">这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p></div></div><div class="ui inverted section divider"></div><p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2021 Lirenmi Designed by Lirenmi</p></div></footer>

运行效果: