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.com</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>

运行效果: