wordpress自适应footer代码

很多网站都有漂亮的底部footer,本人也自己整理了一个模板,可以根据设备宽度自适应。供大家使用!

一、介绍

实际效果就是本站底部,可自行查看。

二、html代码

将下面的html代码放在footer文件中的</body>之前,有的主题设置中可以直接添加footer代码。代码中的内容修改为自己的即可。

<div class="footer-text-01">
    <div class="footer-h3">本站介绍:</div>本站始于2017年,用于记录自己的学习、工作及爱好,将成长过程中的点点滴滴记录下来,不断地汲取知识、充实自己。</div>
<div class="footer-text-02">
    <div class="footer-h3">免责声明:</div>本站所有文章源于网络、仅限用于学习和研究目的,不得用于商业或者非法用途,否则,一切后果请用户自负。如有侵权请邮件与本站联系处理。</div>
<div class="footer-text-01">
    <div class="footer-h3">推荐栏目:</div>
    <div class="foot-ul">
        <div class="footer-li">
            <a href="https://www.eyuyun.com/network">网络技术</a></div>
        <div class="footer-li">
            <a href="https://www.eyuyun.com/program">编程语言</a></div>
        <div class="footer-li">
            <a href="https://www.eyuyun.com/stock">股票实战</a></div>
        <div class="footer-li">
            <a href="https://www.eyuyun.com/series/pythonnotes">Python笔记</a></div>
        <div class="footer-li">
            <a href="https://www.eyuyun.com/series/reversenotes">逆向笔记</a></div>
        <div class="footer-li">
            <a href="https://www.eyuyun.com/series/lawstudy">法考笔记</a></div>
        <div class="footer-li">
            <a href="https://www.eyuyun.com/date/2020">文章归档</a></div>
        <div class="footer-li">
            <a href="https://www.eyuyun.com/sitemap-1.xml">站点地图</a></div>
        <div class="footer-li">
            <a href="https://www.eyuyun.com/friendlinks">友情链接</a></div>
    </div>
</div>
<div class="footer-img">
    <a href="https://www.upyun.com/" rel="”external">
        <img src="https://file.eyuyun.com/%E5%8F%88%E6%8B%8D%E4%BA%91_logo5.png" width="70px"></a>
</div>
<div class="copyright">© Copyright 2020
    <a href="https://www.eyuyun.com/">@语云博客</a>· 鲁ICP备17051185号-1
</div>

三、CSS样式

将下面的css代码放在主题的样式表文件style.css

/*--------------------------------------------------------------
以下为自定义代码,用于footer文件
--------------------------------------------------------------*/
.footer-text-01,.footer-text-02{
    text-align: justify;
    float: left;
    width: 33.33333%;
    padding-right: 40px;
    color: #ccc;
}

.footer-h3 {
    font-size: 15px;
    margin: 5px 0;
    font-weight: 700;
}

.foot-ul {
    float: left;
}

.footer-li {
    float: left;
    width: 40%;
    margin: 0 0 0 1rem;
    display: list-item;
}

.copyright {
    font-size: 0.8rem;
    color: #ccc;
}

.page_speed {
    color: #ccc;
    font-size: 0.875rem;
    text-align: center;
}

.footer-img a img {
    margin: 0;
}
/*--------------------------------------------------------------
如果屏幕宽度小于768px,footer样式
--------------------------------------------------------------*/
@media (max-width: 768px) {
.footer-text-01 {
    display:none;
}

.footer-text-02{
    width: 100%;
    padding-right: 0;
}

}

评论

Your email address will not be published. Required fields are marked *

Scroll Up