项目11：豆瓣首页-页脚 完结撒花！

这次我们就来制作豆瓣首页的最后一部分页脚。

同样，页脚也在container中，页脚分为左区域和右区域，左区域里是多个p元素与a元素结合完成的，还要插入一些图片，右区域里里有几个横向菜单，以及一张图片。

左右区域各占一半

.footer .float-left,.footer .footer .right{
    /* 左浮动与右浮动各占一半 */
    width: 50%;
}

实例HTML代码

<footer class="footer">
        <div class="container clearfix">
            <div class="float-left">
                <p>© 2005-2023 douban.com, all rights reserved 北京豆网科技有限公司</p>
                <p>
                    <a href="">营业执照 </a>｜ <a href="">京ICP证090015号 </a>｜<a href="">京ICP备11027288号</a>  ｜ <a href="">网络视听许可证0110418号</a> ｜<a href="">食品经营许可证</a> 
                    
                <p><a href="">京网文[2021]2980-826号</a> ｜ <a href="">新出发京批字第直160029号</a> ｜ <a href="">（署）网出证（京）字第120号</a></p></p>
                <p>违法和不良信息/涉未成年人/生活服务类专项有害信息投诉：</p>
                <p>违法和不良信息投诉电话：4008353331-9 </p>
                <p>网络从业者不良行为举报：</p>
                <p><img src="./imgs/jubao.png" alt=""><a href="">中国互联网举报中心 </a>电话：12377 <img src="./imgs/biaoshi.gif" alt=""> <a href="">京公网安备11010502000728</a></p>
            </div>
            <div class="float-right">
                <nav class="menu">
                    <a href="">关于豆瓣</a>·
                    <a href="">在豆瓣工作</a>·
                    <a href="">联系我们</a>·
                    <a href="">法律声明</a>·
                    <a href="">帮助中心</a>`
                    <a href="">移动应用</a>·
                    <a href="">豆瓣广告</a>·
                </nav>
                <div class="adv">
                    <img src="" alt="">
                </div>
            </div>
        </div>
    </footer>

 

.footer{
    font-size: 12px;
    line-height: 1.5;
    color: #999;
}
.footer .container{
    border-top: 1px dashed #dcdcdc;
    padding-top: 14px;
    padding-bottom: 30px;
}
.footer .float-left img{
    width: 15px;
    vertical-align: middle;
}
.footer .float-left,.footer .footer .right{
    /* 左浮动与右浮动各占一半 */
    width: 50%;
}
.footer .float-right .menu a{
    display: inline-block;
    margin:0 4px;
}
/*注意第一个菜单margin-left为0*/
.footer .float-right .menu a:first-child{
    margin-left: 0;
}
.footer .float-right .adv{
    width: 150px;
    margin-top: 20px;
}

至此豆瓣首页就完成啦！