Html 如何使页眉和页脚与我发送的图像相似。。？

我上传一张图片在这里我想让我的页眉和页脚像我发送的图片任何人都可以帮我

在页脚我有5个按钮在项目的中间，其中一个有背景和图标看起来像图片，我怎么能使它

我有一个标题，我想让它看起来像一个图片

任何人都能给我一个密码或是什么

谢谢

---

这是我的图像

您必须使用两个背景作为标题。父类具有相对位置的心脏图像背景，子类具有绝对位置的白色曲线形状背景

对于页脚，绿色图标向上，相对于其他图标，将有1个不同的类，在此类的基础上，您将对其进行样式设置

Html和css的页脚图标写在下面，我使用的字体真棒图标为例，现在，你可以使用图标或图像根据你的要求

/*Html*/

<a href=""><span class="bg-color"><i class="fa fa-arrow-up" aria-hidden="true"></i></span></a>

---

下面是一个你可以做到这一点的想法

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style type="text/css">

    .header {
        background-color: black;
        width: 500px;
        height: 70px;
        border-bottom-left-radius: 60%;
        border-bottom-right-radius: 60%;
    }

    .footer {
        width: 500px;
        display: flex;
        justify-content: space-around;
        background-color: #dbd0d0;
        padding: 10px;
        position: relative;
        margin-top: 100px;
    }

    .fa.fa-home {
        padding: 15px;
        position: absolute;
        background-color: #60b75f;
        border-radius: 100%;
        color: white;
        top: -18px;
    }

    .fa.fa-volume-up {
        margin-right: 30px;
    }

    .fa.fa-map-o {
        margin-left: 30px;
    }

</style>

<div class="header">

</div>



<div class="footer">

    <i class="fa fa-user-o" aria-hidden="true"></i>
    <i class="fa fa-volume-up" aria-hidden="true"></i>
    <i class="fa fa-home" aria-hidden="true"></i>
    <i class="fa fa-map-o" aria-hidden="true"></i>
    <i class="fa fa-bars" aria-hidden="true"></i>

</div>

.标题{
背景色：黑色；
宽度：500px；
高度：70像素；
边界左下半径：60%；
边框右下半径：60%；
}
.页脚{
宽度：500px；
显示器：flex；
证明内容：周围的空间；
背景色：#dbd0d0；
填充：10px；
位置：相对位置；
边缘顶部：100px；
}
.fa.fa-home{
填充：15px；
位置：绝对位置；
背景色：#60b75f；
边界半径：100%；
颜色：白色；
顶部：-18px；
}
.fa.fa-volume-up{
右边距：30px；
}
.fa.fa-map-o{
左边距：30px；
}

您尝试了什么？您应该从学习HTML和CSS开始。首先，学习如何询问stackoverflow。谢谢，我尝试了你的代码，现在我明白我必须做什么了

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style type="text/css">

    .header {
        background-color: black;
        width: 500px;
        height: 70px;
        border-bottom-left-radius: 60%;
        border-bottom-right-radius: 60%;
    }

    .footer {
        width: 500px;
        display: flex;
        justify-content: space-around;
        background-color: #dbd0d0;
        padding: 10px;
        position: relative;
        margin-top: 100px;
    }

    .fa.fa-home {
        padding: 15px;
        position: absolute;
        background-color: #60b75f;
        border-radius: 100%;
        color: white;
        top: -18px;
    }

    .fa.fa-volume-up {
        margin-right: 30px;
    }

    .fa.fa-map-o {
        margin-left: 30px;
    }

</style>

<div class="header">

</div>



<div class="footer">

    <i class="fa fa-user-o" aria-hidden="true"></i>
    <i class="fa fa-volume-up" aria-hidden="true"></i>
    <i class="fa fa-home" aria-hidden="true"></i>
    <i class="fa fa-map-o" aria-hidden="true"></i>
    <i class="fa fa-bars" aria-hidden="true"></i>

</div>