【网页底部】网页底部通用布局

【网页底部】网页底部通用布局

html

  <footer id="footer">
        <div class="wp footer_center fx">
            <div class="footer_item footer_item_left">
                <p><img src="images/logo2.png" class="logo2" alt=""></p>
                <p>© 2012-2024 字节跳动</p>
                <p>
                    <img src="images/icp.png" alt="">
                    <a href="">京公网安备11000002002068号</a>
                    <a href="">京ICP备12025439号-7</a>
                </p>
            </div>
            <div class="footer_item">
                <dl>
                    <dt>联系我们</dt>
                    <dd><a href="">反馈建议</a></dd>
                </dl>
            </div>
            <div class="footer_item">
                <dl>
                    <dt>相关网站</dt>
                    <dd><a href="">字节跳动</a></dd>
                    <dd><a href="">海外招聘</a></dd>
                    <dd><a href="">豆包大模型团队</a></dd>
                </dl>
            </div>
            <div class="footer_item footer_item_right">
               <p class="dt">实时动态与招聘信息，关注我们</p>
               <div>
                <img src="images/f1.png" alt="">
                <img src="images/f2.png" alt="">
                <img src="images/f3.png" alt="">
                <img src="images/f4.png" alt="">
                <img src="images/f5.png" alt="">
                <img src="images/f6.png" alt="">
                <img src="images/f7.png" alt="">
                <img src="images/f8.png" alt="">
               </div>
            </div>
        </div>
    </footer>

css

#footer{
    background-color: #1f2329;
}

.footer_center{
    padding-top: 60px;
    padding-bottom: 60px;
    align-items: start;
}
.footer_item{
    height: 144px;
}
.footer_item dt{
    color: #7b7e81;
    margin-bottom: 20px;
}
.footer_item dd a{
    font-size: 14px;
    color: #fff;
    line-height: 30px;
}
.footer_item_left{
    border-right: 1px solid #7b7e81;
    padding-right: 30px;
}
.footer_item_left p,.footer_item_left a{
    color: #7b7e81;
    font-size: 14px;
}
.footer_item_left p{
    margin-bottom: 10px;
}
.footer_item_left p img{
    width:20px;
}
.footer_item_left p .logo2{
    width: 230px;
}
.footer_item .dt{
    color: #fff;
    font-size: 14px;
    margin-bottom:20px;
    color: #7b7e81;
}
.footer_item_right{
    border-left: 1px solid #7b7e81;
    padding-left: 30px;
}