Java教程

实训-个人博客01(静态首页)

本文主要是介绍实训-个人博客01(静态首页),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

文章目录

  • 零、功能规划
  • 一、页面开发
    • 1、在WebStorm中新建一个项目
    • 2、新建静态目录
    • 3、在blog中新建一个html页面-index.html
    • 4、移动端预览设置
    • 5、引入相关内容并写出大概的框架
    • 6、导航
      • (1)导航栏基础设置
      • (2)新建css-me.css
      • (3)me.css
      • (4)效果
      • (5)添加图标
      • (6)搜索框
    • 7、底部内容
      • (1)将所需图片拷贝到images文件夹中
      • (2)底部footer
      • (3)效果
    • 8,中间内容
      • (1)中间左边的内容
      • (2)中间右边的内容
        • 分类
        • 标签
        • 最新推荐
        • 二维码
      • (3)中间的全部代码
    • 9,响应手机
    • 10,导航栏的适应手机的菜单
    • 11,首页当前的效果
    • 12,完整的代码

零、功能规划

在这里插入图片描述
前端展示:首页、详情页、分类、标签、归档、关于我
后台管理:模板页

一、页面开发

在下面的代码中将用到其中的内容。
https://semantic-ui.com/
在这里插入图片描述

1、在WebStorm中新建一个项目

在这里插入图片描述
在这里插入图片描述

2、新建静态目录

在这里插入图片描述

3、在blog中新建一个html页面-index.html

在这里插入图片描述

4、移动端预览设置

在这里插入图片描述

5、引入相关内容并写出大概的框架

在这里插入图片描述

6、导航

其中将大量用到ui

(1)导航栏基础设置

在这里插入图片描述
在这里插入图片描述
attached-没有圆角
在这里插入图片描述

(2)新建css-me.css

在这里插入图片描述
在index.html中引入css
在这里插入图片描述

(3)me.css

一个em是14个像素,让导航条的高度没有那么的高
在这里插入图片描述
在这里插入图片描述

(4)效果

与原来相比它的上下边距没有那么的宽了。
在这里插入图片描述
原来的
在这里插入图片描述

(5)添加图标

在semantic-ui中可以去找到自己想要的图标。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

(6)搜索框

在这里插入图片描述
在这里插入图片描述

7、底部内容

(1)将所需图片拷贝到images文件夹中

在这里插入图片描述

(2)底部footer

在这里插入图片描述

    <!--底部footer-->
    <footer class="ui inverted  vertical segment m-padded-tb-massive">
        <div class="ui center aligned container">
            <div class="ui inverted divided grid">
                <div class="three wide column">
                    <div class="ui inverted link list">
                    </div>
                    <div class="item">
                        <img src="./static/images/wechat.jpg" class="ui rounded image" style="width: 100px;height: 100px" alt="">
                    </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">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</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">Email:2392347073@qq.com</a>
                        <a href="#" class="item">QQ:2392347073</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">Lirenmi</h4>
                    <p class="">这是我的个人博客,会分享关于编程、写作、思考相关的任何内容,希望可以给来到这里的人有所帮助...</p>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p class="m-text-thin m-text-spaced m-opacity-mini">Copyright  2016-2017 Lirenmi DESIGNED BYlIRENMI </p>
        </div>

    </footer>

相关的css
在这里插入图片描述

.m-padded-tb-massive{
    padding-top: 5em !important;
    padding-bottom: 5em !important;
}

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

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

(3)效果

在这里插入图片描述

8,中间内容

注意:相关的css请看最后。

(1)中间左边的内容

左边的所有代码

                <div class="eleven wide column">
                    <!--header-->
                    <div class="ui top attached segment">
                        <!--middle aligned:垂直方向居中-->
                        <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>
                    <!--中间的中间内容-->
                    <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=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 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 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 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 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 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 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 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 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 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 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">
                        <!--middle aligned:垂直方向居中-->
                        <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>

左边顶部的内容
在这里插入图片描述
效果
在这里插入图片描述
左边的内容部分
相同的部分进行复制

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

左边的底部的内容
上一页,下一页

<!--footer-->
                    <div class="ui bottom attached segment">
                        <!--middle aligned:垂直方向居中-->
                        <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)中间右边的内容

右边的所有代码

 <five 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">
                                    JavaScript
                                    <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>
                    <!--二维码-->
                    <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>
                </five>

分类

 <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">
                                    JavaScript
                                    <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>

二维码

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

(3)中间的全部代码

<div class="m-container m-padded-tb-large">
        <div class="ui container"><!--container:自适应改变大小-->
            <div class="ui stackable grid">
                <!--左边博客列表的内容-->
                <div class="eleven wide column">
                    <!--header-->
                    <div class="ui top attached segment">
                        <!--middle aligned:垂直方向居中-->
                        <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>
                    <!--中间的中间内容-->
                    <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/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">
                        <!--middle aligned:垂直方向居中-->
                        <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>
                <!--右边标签的内容-->
                <five 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">
                                    JavaScript
                                    <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>
                    <!--二维码-->
                    <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>
                </five>
            </div>
        </div>
    </div>

9,响应手机

在每个版块的相应位置添加上stackable
导航
在这里插入图片描述
中间的内容
在这里插入图片描述
底部footer
在这里插入图片描述

10,导航栏的适应手机的菜单

在这里插入图片描述
当单击出现的菜单图标时,我们的导航栏上的原有的东西(如首页这些,小于768px就隐藏了)出现。
在这里插入图片描述
当页面的宽度小于768时,做的菜单就会显示出来,反之不显示。
在这里插入图片描述

11,首页当前的效果

在这里插入图片描述
小于768px时
可以看到这个时候原来导航内的东西被我们的菜单图标把替代了。
当单击菜单图标时,又显示原来导航内的内容,如下:
在这里插入图片描述

在这里插入图片描述

12,完整的代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./static/css/me.css">
    <title>首页</title>
</head>
<body>
    <!--导航-->
    <nav class="ui inverted attached segment m-padded-tb-mini">
        <div class="ui container">
            <div class="ui inverted secondary stackable menu">
                <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="info icon"></i>关于我</a>
                <div class="right m-item 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>
        <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show"  >
            <i class="sidebar icon"></i>
        </a>
    </nav>
    <!--中间内容-->
    <div class="m-container m-padded-tb-large">
        <div class="ui container"><!--container:自适应改变大小-->
            <div class="ui stackable grid">
                <!--左边博客列表的内容-->
                <div class="eleven wide column">
                    <!--header-->
                    <div class="ui top attached segment">
                        <!--middle aligned:垂直方向居中-->
                        <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>
                    <!--中间的中间内容-->
                    <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/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">
                        <!--middle aligned:垂直方向居中-->
                        <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>
                <!--右边标签的内容-->
                <five 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">
                                    JavaScript
                                    <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>
                    <!--二维码-->
                    <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>
                </five>
            </div>
        </div>
    </div>
    <!--底部footer-->
    <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="./static/images/wechat.jpg" class="ui rounded image" 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">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</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">Email:2392347073@qq.com</a>
                        <a href="#" class="item">QQ:2392347073</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">Lirenmi</h4>
                    <p class="">这是我的个人博客,会分享关于编程、写作、思考相关的任何内容,希望可以给来到这里的人有所帮助...</p>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p class="m-text-thin m-text-spaced m-opacity-mini">Copyright  2016-2017 Lirenmi DESIGNED BYlIRENMI </p>
        </div>

    </footer>
<script src="./static/js/jquery-3.4.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script>
        $('.menu.toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-hide');
        });
    </script>
</body>
</html>

me.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-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-padded-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-text-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;
    margin-bottom: 0.3em !important;
}

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

/*----position----*/
.m-right-top{
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
}
/*----display----*/
.m-inline-block{
    display: inline-block !important;
}

/*----color----*/
.m-black {
    color: #333 !important;
}
/*----container----*/
.m-container {
    max-width: 70em !important;
    margin: auto !important;
}

.m-mobile-show {
    display: none !important;
}
@media screen and (max-width: 768px){
    .m-mobile-hide {
        display: none !important;
    }
    .m-mobile-show {
        display: block !important;
    }
}

这篇关于实训-个人博客01(静态首页)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!