从零开始一步步带你开发自己的博客系列教程四 底部公共部分及响应式适应

底部区域非常简单，只展示一些版权信息，备案信息，系统介绍而已，单纯的文字居中展示即可。

新建footer.html文件

<footer>
    <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">赣ICP备2020014175号-1</a>
    <p>系统由 Vue3+Ant Design Vue + ThinkPHP5驱动</p>
    <p><a style="color:#888888;" href="https://www.vuereact.com">VueReact.com</a></p>
</footer>

common.css 文件加入以下css代码

footer{
    text-align: center;
    width: 100%;
    padding: 10px 0;
    color: #888;
    line-height: 22px;
}

footer a{
    color:#1e80ff;
}

底部就完成了，看下效果吧!

QQ截图20220117114652.png

css添加媒体查询代码，来适应多终端访问，当手机访问时，隐藏导航菜单，隐藏右侧区域，只显示头部和主要列表内容。 common.css 文件加入以下css代码

@media screen and (max-width:980px ) {
    .aside{
        display: none;
    }
    .main{
        width: 100% !important;
    }
    .header-nav{
        height: 50px !important;
        line-height: 50px !important;
    }
    article{
        padding-top: 60px !important;
    }
}

@media screen and (max-width:560px ) {
    .header-nav{
        height: 40px !important;
        line-height: 40px !important;
    }
    .header-list{
        display: none;
    }
    .header-logo{
        float: none !important;
        text-align: center !important;
    }
    article{
        padding-top: 50px !important;
    }
}

再看下实际效果吧!

QQ截图20220117115014.png

到此从零开始一步步带你开发自己的博客系列教程第一部分全部完成了，代码会后续更新到github 和gitee 平台，大家如何需求，请自行去下载。