仿写一个抖音footer的底部 html

css代码:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #fff
}

#footers .footer {
    background: #171725;
    min-height: 188px;
    font-size: 14px;
    color: #fff;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    padding: 30px 0 0 0;
}

#footers {
    min-width: 960px;
    padding-top: 40px;
    background: #f7f8f9;
}

#footers .top>a {
    color: #fff;
    padding: 0 15px;
    border-left: 1px solid;
}

#footers .top>a:last-child {
    border-right: 1px solid;
}

#footers .bottom {
    padding: 15px 0;
}

#footers .bottom>div {
    padding: 6px 0;
}

#footers .bottom>div a,
#footers .bottom>div span {
    padding: 0 5px;
    border-right: 1px solid;
}

#footers .bottom>div a:last-child,
#footers .bottom>div span:last-child {
    border-right: none;
}

html代码:

<footer id="footers">
    <div class="footer">
        <div class="top">
            <a href="//creator.douyin.com/agreement/">帐号授权协议</a>
            <a href=" //www.douyin.com/agreement/">用户服务协议</a>
            <a href=" //www.douyin.com/privacy/">隐私政策</a>
            <a href=" //www.douyin.com/recovery_account/">帐号找回</a>
            <a href=" //www.douyin.com/aboutus/">联系我们</a>
        </div>
        <div class="bottom">
            <div>
                <span>2022 © 抖音</span>
                <a
                    href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002002046">京公网安备11000002002046号</a>
                <span>北京微播视界科技有限公司</span>
            </div>
            <div>
                <a href="http://www.12377.cn/">中国互联网举报中心</a>
                <span>网络文化许可证-京网文-(2016)2282-264号</span>
                <span>违法和不良信息举报:400-140-2108</span>
                <span>举报邮箱:feedback@douyin.com</span>
            </div>
            <div>
                <img src="//p3.douyinpic.com/aweme-server-static-resource/gongan_d0289dc.png~tplv-obj.image"
                    alt="pic">
                <a
                    href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002002046">京公网安备11000002002046号</a>
                <span>地址:
                    北京市海淀区知春路51号4层408</span>
            </div>
        </div>
    </div>
</footer>

© 版权声明
THE END
喜欢就支持一下吧
点赞10
相关推荐
评论 抢沙发

请登录后发表评论

    暂无评论内容