day07

这就是今天要实现的效果图（颜色提取推荐使用snipaste）

代码（仅供参考，不喜勿喷， 可以在评论区展示作品）

<html>

<head>

    <script src="//at.alicdn.com/t/c/font_4930922_qnjgmb4frw.js"></script>

    <style>

        /* Write your CSS code here */

        body {

            background-color: rgb(240, 243, 251);

            display: flex;

        }

        .outer {

            width: 600px;

            height: 400px;

            margin: auto;

            display: flex;

            flex-direction: column;

            justify-content: space-around;

        }

        .first {

            background-color: white;

            height: 40px;

            display: flex;

            justify-content: space-between;

            box-shadow: 0px 5px 5px 0px #00000047;

        }

        .second {

            background-color: rgb(21, 22, 38);

            height: 40px;

            display: flex;

            justify-content: space-between;

            box-shadow: 0px 5px 5px 0px #00000047;

            color: white;

        }

        .third {

            background-color: white;

            height: 40px;

            display: flex;

            justify-content: space-between;

            box-shadow: 0px 5px 5px 0px #00000047;

            border-radius: 20px;

        }

        .four {

            background-color: rgb(21, 22, 38);

            height: 40px;

            display: flex;

            justify-content: space-between;

            box-shadow: 0px 5px 5px 0px #00000047;

            color: white;

            border-radius: 20px;

        }

        .five {

            background-color: white;

            height: 40px;

            display: flex;

            justify-content: center;

            box-shadow: 0px 5px 5px 0px #00000047;

        }

        .six {

            background-color: rgb(21, 22, 38);

            height: 40px;

            display: flex;

            justify-content: center;

            box-shadow: 0px 5px 5px 0px #00000047;

            color: white;

        }

        .svg1 {

            width: 30px;

            height: 30px;

            padding: 5px;

        }

        span {

            display: inline-block;

            line-height: 40px;

            margin-left: 10px;

        }

        .svg2 {

            width: 20px;

            margin-right: 10px;

        }

        .svg2:hover {

            cursor: pointer;

        }

    </style>

</head>

<body>

    <div class="outer">

        <div class="first">

            <div style="display: flex">

                <svg class="svg1" aria-hidden="true">

                    <use xlink:href="#icon-wancheng"></use>

                </svg>

                <span>File has been removed successfuly.</span>

            </div>

            <svg class="svg2" aria-hidden="true">

                <use xlink:href="#icon-guanbi"></use>

            </svg>

        </div>

        <div class="second">

            <div style="display: flex">

                <svg class="svg1" aria-hidden="true">

                    <use xlink:href="#icon-wancheng"></use>

                </svg>

                <span>File has been removed successfuly.</span>

            </div>

            <svg class="svg2" aria-hidden="true">

                <use xlink:href="#icon-guanbi"></use>

            </svg>

        </div>

        <div class="third">

            <div style="display: flex">

                <svg class="svg1" aria-hidden="true">

                    <use xlink:href="#icon-wancheng"></use>

                </svg>

                <span>File has been removed successfuly.</span>

            </div>

            <svg class="svg2" aria-hidden="true">

                <use xlink:href="#icon-guanbi"></use>

            </svg>

        </div>

        <div class="four">

            <div style="display: flex">

                <svg class="svg1" aria-hidden="true">

                    <use xlink:href="#icon-wancheng"></use>

                </svg>

                <span>File has been removed successfuly.</span>

            </div>

            <svg class="svg2" aria-hidden="true">

                <use xlink:href="#icon-guanbi"></use>

            </svg>

        </div>

        <div class="five">

            <div style="display: flex">

                <svg class="svg1" aria-hidden="true">

                    <use xlink:href="#icon-wancheng"></use>

                </svg>

                <span>File has been removed successfuly.</span>

            </div>

        </div>

        <div class="six">

            <div style="display: flex">

                <svg class="svg1" aria-hidden="true">

                    <use xlink:href="#icon-wancheng"></use>

                </svg>

                <span>File has been removed successfuly.</span>

            </div>

        </div>

    </div>

</body>

</html>