适合小储和彩虹的弹窗精品装修UI

本内容由鱼涡整理而出,现在修复后发布出来免费给各位!


下面先放上一张效果图





下面放上代码

CSS代码

 CSS
    <style>
        .fishwo {box-sizing: border-box;-webkit-tap-highlight-color: transparent;margin: 0px;padding: 0px;outline: 0px;text-align: justify;color: rgb(156, 83, 64);text-indent: 2em;}
        .fishwo-foot{margin-top: 10px;}
        .fishwo-img {box-sizing: border-box;-webkit-tap-highlight-color: transparent;margin: 0px;padding: 0px;outline: 0px;border: 0px;vertical-align: middle;width: 25.1953px;display: block;}
        .fishwo-st {box-sizing: border-box;-webkit-tap-highlight-color: transparent;margin: 0px;padding: 0px;outline: 0px;}
        .fishwo-div-center {box-sizing: border-box;-webkit-tap-highlight-color: transparent;margin: 0px 10px;padding: 1px 1em;outline: 0px;display: block;font-size: 16px;border-right: 1px solid rgb(203, 24, 28);border-left: 1px solid rgb(203, 24, 28);border-image: initial;border-top: none;border-bottom: none;letter-spacing: 1.5px;color: rgb(203, 24, 28);text-align: center;}
        .fishwo-div-right {box-sizing: border-box;-webkit-tap-highlight-color: transparent;margin: 0px;padding: 0px; outline: 0px;display: inline-block;width: 1.8em;transform: scaleX(-1);        }
        .fishwo-div-left{box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; display: inline-block; width: 1.8em;}
        .fishwo-div-box{box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0.5em 0px 10px; padding: 0px; outline: 0px; display: flex; justify-content: center; align-items: center; text-align: center;}
        .fishwo-main{box-sizing: border-box;-webkit-tap-highlight-color: transparent;margin: 10px auto;padding: 0px;outline: 0px;display: block;width: 306.914px;}
        .fishwo-main .x1{box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 4px; outline: 0px; display: block; border: 1px solid rgb(232, 195, 95); border-radius: 8px; background: rgb(254, 254, 254);}
        .fishwo-main .x2{box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; display: block; border: 1px dashed rgb(232, 195, 95); border-radius: 8px;}
        .fishwo-main .x3{box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; display: block;}
        .fishwo-main .x4{box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 2em 1em 1em; outline: 0px; display: block; font-size: 14px; text-align: justify; letter-spacing: 1.5px; line-height: 1.75em; color: rgb(51, 51, 51);}
        .fishwo-main .x5{box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; display: block;}
    </style>


HTML代码

 Markup
<div class="fishwo-main">
    <div class="x1">
        <div class="x2">
            <div class="x3">
                <div class="x4">
                    <div class="x5">
                        <div class="fishwo-div-box">
                            <div class="fishwo-div-left">
                                <img class="fishwo-img" src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9naWYvN1FSVHZrSzJxQzR1QWtpYXZvcWliWUt0cDFJTzZKZGRHUFBDQXdYdGE2OWhpY3AxU2Zkb01vMXNBZFFwY2JhQW9pY1RaSWlhdzdXa1lMcmliMVBuTjlIQVU3VmcvMD93eF9mbXQ9Z2lm">
                            </div>
                            <div class="fishwo-div-center" data-brushtype="text">
                                <strong class="fishwo-st">此分类商品免责说明</strong>
                            </div>
                            <div class="fishwo-div-right">
                                <img class="fishwo-img"  src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9naWYvN1FSVHZrSzJxQzR1QWtpYXZvcWliWUt0cDFJTzZKZGRHUFBDQXdYdGE2OWhpY3AxU2Zkb01vMXNBZFFwY2JhQW9pY1RaSWlhdzdXa1lMcmliMVBuTjlIQVU3VmcvMD93eF9mbXQ9Z2lm">
                            </div>
                        </div>
                    </div>
                    <p class="fishwo">
                        1:本内容适用于各类弹窗!
                    </p>
                    <p class="fishwo">
                        2:这里写你的信息</p>
                    <p class="fishwo">3:不懂基础知识的下单者,下单前尽量先添加客服页面的客服咨询一下,然后在下单,避免不必要的售后麻烦</p>
                    <p class="fishwo">4:商品收集于网络互联网,如果侵犯了贵司权益,请联系我们的客服,核实后予以删除!敬请谅解!</p>
                    <p class="fishwo fishwo-foot">(商城祝您购物愉快)</p>
                </div>
            </div>
        </div>
    </div>
</div>

CTRL+D快速收藏,欢迎常来喔

未经允许不得转载:作者: 谪仙, 转载或复制请以 超链接形式 并注明出处 天影云博客-专注网络技术资源分享
原文地址: 《适合小储和彩虹的弹窗精品装修UI》 发布于2020年5月31日

本文链接:适合小储和彩虹的弹窗精品装修UI - http://mc269.com/?post=802

本文标签: 这篇文章木有标签

相关推荐
发表评论
0 评论
还没有评论,快来抢沙发吧!

大家都在搜

    暂无,待更新