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>
相关推荐
灵感__idea3 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴4 小时前
Mix
前端·webgl
代码续发5 小时前
前端组件梳理
前端
试图让你心动5 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码6 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记6 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏6 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数6 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante6 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam7 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript