演示图:

教程:
将下面代码复制到html文件中即可
<div class="single-gg">
<div class="single-gg-left">
<div class="single-gg-img">
<img src="https://www.nuoso.cn/img/icon/iconad.svg">
</div>
<div class="single-gg-desc">🎉 恭喜你发现了宝藏!</div>
</div>
<div class="single-gg-right">
<a href="https://.daixb.top/" target="_blank" class="single-gg-btn">立即去挖宝</a>
</div>
</div>
<style>
.single-gg,.single-gg-left{display:flex;align-items:center}
.single-gg{height:50px}
.single-gg-left{flex:1;padding:10px;background-color:#FE7573;border-radius:8px 0 0 8px}
.single-gg-img{height:30px;width:30px}
.single-gg-img img{height:100%;width:100%}
.single-gg-desc{margin-left:10px;color:#fff;font-size:16px;font-weight:600;letter-spacing: 1px;}
.single-gg-right{position:relative;display:flex;height:100%;width:100px;justify-content:center;align-items:center;background-color:#FE7573;border-radius:0 4px 4px 0;border-left:1px dashed #fff}
.single-gg-right::after,.single-gg-right::before{content:'';position:absolute;width:10px;height:5px;left:-5px;background-color:#fff}
.single-gg-right::before{top:0;border-radius:0 0 5px 5px}
.single-gg-right::after{bottom:0;border-radius:5px 5px 0 0}
.single-gg-btn{display:block;padding:2px 5px;font-size: 12px;background-color:#fff;color:#FE7573 !important;border-radius:4px}
</style> © 版权声明
THE END









![表情[tiaopi]客创社区-专注互联网轻资产资源整合与分享客创社区-专注互联网轻资产资源整合与分享](https://www.kcshe.com/wp-content/themes/zibll/img/smilies/tiaopi.gif)
![表情[qinqin]客创社区-专注互联网轻资产资源整合与分享客创社区-专注互联网轻资产资源整合与分享](https://www.kcshe.com/wp-content/themes/zibll/img/smilies/qinqin.gif)































暂无评论内容