这就是今天要实现的效果图（颜色提取推荐使用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>