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

同样，页脚也在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;
}

至此豆瓣首页就完成啦！