学习目标

学会制作常见的网页页脚

目标效果

参考网页：https://force-sh.cn/pro.php

关键要点

    正确的分解页面结构，合理使用弹性布局实现。

结构代码

CSS代码

footer {

padding-top: 50px;

background: #484848;

color:#fff;

}

footer a{

color:rgba(255,255,255,.6)

}

footer .box1{

display: flex;

justify-content: space-between;

width: 1200px;

margin: 0 auto;

padding-bottom: 30px;

}

footer .box1 .list1{

width: 35%;

display: flex;

justify-content: space-between;

}

footer .box1 .list2{

display: flex;

justify-content: space-evenly;

flex: 1;

}

footer .box1 .list1 h2{

color:rgba(255,255,255,.8);

margin-bottom: 30px;

}

footer .box1 .list1 img{

width: 132px;

height: 132px;

}

footer .box1 ul li:first-child a{

font-weight: bold;

display: block;

margin-bottom: 30px;

color:#fff;

position: relative;

}

footer .box1 ul li:first-child a::after{

content: "";

width: 30px;

height: 2px;

background: #fff;

position: absolute;

left: 0;

bottom: -15px;

}

footer .box2{

text-align: center;

padding: 20px ;

border-top: 1px solid rgba(255,255,255,0.6);

}