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

[复制链接]
查看62 | 回复0 | 2020-7-28 00:00:54 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本内容由大鸡毛整理而出,现在修复后发布出来免费给各位!
下面先放上一张效果图

适合小储和彩虹的弹窗精品装修UI2530彩虹代表什么,真正的彩虹,彩虹轻骑队,彩虹多多,
下面放上代码
CSS代码
  1.     <style>
  2.         .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;}
  3.         .fishwo-foot{margin-top: 10px;}
  4.         .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;}
  5.         .fishwo-st {box-sizing: border-box;-webkit-tap-highlight-color: transparent;margin: 0px;padding: 0px;outline: 0px;}
  6.         .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;}
  7.         .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);        }
  8.         .fishwo-div-left{box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; display: inline-block; width: 1.8em;}
  9.         .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;}
  10.         .fishwo-main{box-sizing: border-box;-webkit-tap-highlight-color: transparent;margin: 10px auto;padding: 0px;outline: 0px;display: block;width: 306.914px;}
  11.         .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);}
  12.         .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;}
  13.         .fishwo-main .x3{box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; display: block;}
  14.         .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);}
  15.         .fishwo-main .x5{box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0px; padding: 0px; outline: 0px; display: block;}
  16.     </style>
复制代码
HTML代码
  1. <div class="fishwo-main">
  2.     <div class="x1">
  3.         <div class="x2">
  4.             <div class="x3">
  5.                 <div class="x4">
  6.                     <div class="x5">
  7.                         <div class="fishwo-div-box">
  8.                             <div class="fishwo-div-left">
  9.                                 <img class="fishwo-img" src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9naWYvN1FSVHZrSzJxQzR1QWtpYXZvcWliWUt0cDFJTzZKZGRHUFBDQXdYdGE2OWhpY3AxU2Zkb01vMXNBZFFwY2JhQW9pY1RaSWlhdzdXa1lMcmliMVBuTjlIQVU3VmcvMD93eF9mbXQ9Z2lm">
  10.                             </div>
  11.                             <div class="fishwo-div-center" data-brushtype="text">
  12.                                 <strong class="fishwo-st">此分类商品免责说明</strong>
  13.                             </div>
  14.                             <div class="fishwo-div-right">
  15.                                 <img class="fishwo-img"  src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9naWYvN1FSVHZrSzJxQzR1QWtpYXZvcWliWUt0cDFJTzZKZGRHUFBDQXdYdGE2OWhpY3AxU2Zkb01vMXNBZFFwY2JhQW9pY1RaSWlhdzdXa1lMcmliMVBuTjlIQVU3VmcvMD93eF9mbXQ9Z2lm">
  16.                             </div>
  17.                         </div>
  18.                     </div>
  19.                     <p class="fishwo">
  20.                         1:本内容适用于各类弹窗!
  21.                     </p>
  22.                     <p class="fishwo">
  23.                         2:这里写你的信息</p>
  24.                     <p class="fishwo">3:不懂基础知识的下单者,下单前尽量先添加客服页面的客服咨询一下,然后在下单,避免不必要的售后麻烦</p>
  25.                     <p class="fishwo">4:商品收集于网络互联网,如果侵犯了贵司权益,请联系我们的客服,核实后予以删除!敬请谅解!</p>
  26.                     <p class="fishwo fishwo-foot">(商城祝您购物愉快)</p>
  27.                 </div>
  28.             </div>
  29.         </div>
  30.     </div>
  31. </div>
复制代码

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

灌水成绩
394
主题
398
帖子
1482
积分
等级头衔
积分成就
  • 威望: 0
  • 贡献: 1084
  • 金钱: 0
  • 违规:
  • 在线时间:145 小时
  • 注册时间:2020-2-11
  • 最后登录:2020-8-5
个人勋章

最佳新人活跃会员热心会员突出贡献优秀版主论坛元老精贴王灌水之王荣誉管理

联系方式