我怎样才能使 header 和页脚像我发送的图像一样......？

Question

我在这里上传了一张图片我想让我的 header 和页脚像我发送的图片一样任何人都可以帮助我..？

在页脚中，我在项目中间有 5 个按钮，其中一个有背景，图标看起来像图片我该如何制作它..？

我有一个 header 我想把它做成像 .

任何人都可以给我一个代码或其他东西..?

谢谢

enter image description here 这是我的头像

Answer 1

您必须为页眉使用两个背景。父 Class 具有相对位置的心形图像背景，子具有绝对位置的白色曲线形状背景。

对于页脚，向上的绿色图标将与其他图标有 1 个不同 class，在此基础上 class 您将为其设置样式。

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

/* Html */

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

/* Css 图标样式。根据您的要求调整 css 中的顶部 */

span.bg-color {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #09d0bf;
    text-align: center;
    line-height: 2;
    border-radius: 100%;
    position: relative;
    top: -10px;
}

Answer 2

以下是您可以执行此操作的想法。

<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>

我怎样才能使 header 和页脚像我发送的图像一样......？

How can i make header and footer like the image i send..?

html

css

header

footer