Ripro v2美化折腾记九之表格式弹窗

代码扒自油条的日主题官网弹窗,自行修改了颜色布局,加载速度快,逼格满满。

效果:

代码:

样式1:改字体颜色,如上图示
<font style="font-size: 16px;"><p class="m-0 text-center text-white"><i class="fa fa-bell mr-1"></i>我们希望您认真阅读以下提示,帮助您快速了解本站情况<sup class="spinner-grow spinner-grow-sm ml-1 small" role="status" aria-hidden="true" style=" width: .6rem; height: .6rem; "></sup></p></font><br>
<font color="#007bff"><ul class="list-group">
<li class="list-group-item">◉ 用QQ一键登录,进入会员中心,开通赞助VIP,方便快捷</li>
<li class="list-group-item">◉ 赞助开通本站包月/包年/终身VIP,所有资源免费使用</li>
<li class="list-group-item">◉ 会员账户仅限会员本人使用,切勿共享,望知悉</li>
<li class="list-group-item">◉ 本站虚拟资源均为Windows及安卓适用,苹果Mac用户切勿赞助</li>
<li class="list-group-item">◉ 最新优惠,赞助VIP限时立减优惠券发放中,前往活动页领取</li>
<li class="list-group-item">◉ 资源均经过站长亲测,无问题才会上架。虚拟资源具有可复制性,您赞助后不支持换货及退款。</li>
</ul></font>
<br>
<center><font style="font-size: 19px;"><a class="badge badge-warning" href="https://mmsto.com/winmac/vipinfo" rel="nofollow noopener noreferrer" target="_blank"><i class="fa fa-diamond mr-1"></i>赞助VIP会员</a></font> 享全站资源免费下载特权
<font style="font-size: 19px;"><a class="badge badge-success" href="https://mmsto.com/winmac/coupon" rel="nofollow noopener noreferrer" target="_blank"> 
	<i class="fa fa-gift mr-1"></i>现在去领券</a></font> 即享立减特惠!</center>
样式二:改字体大小及颜色
<font style="font-size: 15px;"><p class="m-0 text-center text-white"><i class="fa fa-bell mr-1"></i>我们希望您认真阅读以下提示,帮助您快速了解本站情况<sup class="spinner-grow spinner-grow-sm ml-1 small" role="status" aria-hidden="true" style=" width: .6rem; height: .6rem; "></sup></p></font><br>
<font style="font-size:15px;color:#007bff"><ul class="list-group">
<li class="list-group-item">◉ 用QQ一键登录,进入会员中心,开通赞助VIP,方便快捷</li>
<li class="list-group-item">◉ 赞助开通本站包月/包年/终身VIP,享全站资源免费下载特权</li>
<li class="list-group-item">◉ 会员账户仅限会员本人使用,切勿共享,望知悉</li>
<li class="list-group-item">◉ 本站虚拟资源均为Windows及安卓适用,苹果Mac用户切勿赞助</li>
<li class="list-group-item">◉ 最新优惠,赞助VIP限时立减优惠券发放中,前往活动页领取</li>
<li class="list-group-item">◉ 您也可通过签到获取站内币钢镚,累计钢镚可购买自己需要的资源</li>
<li class="list-group-item">◉ 资源均经过站长亲测,无问题才会上架。虚拟资源具有可复制性,您赞助后不支持换货及退款。</li>
</ul></font>
<br>
<center><font style="font-size: 19px;"><a class="badge badge-warning" href="https://mmsto.com/winmac/vipinfo" rel="nofollow noopener noreferrer" target="_blank"><i class="fa fa-diamond mr-1"></i>赞助VIP会员</a></font> 享全站资源免费下载特权
<font style="font-size: 19px;"><a class="badge badge-success" href="https://mmsto.com/winmac/coupon" rel="nofollow noopener noreferrer" target="_blank"> 
	<i class="fa fa-gift mr-1"></i>现在去领券</a></font> 即享立减特惠!</center>
 样式3:列表组规则下的背景及颜色更改
<font style="font-size: 15px;"><p class="m-0 text-center text-white"><i class="fa fa-bell mr-1"></i>我们希望您认真阅读以下提示,帮助您快速了解本站情况<sup class="spinner-grow spinner-grow-sm ml-1 small" role="status" aria-hidden="true" style=" width: .6rem; height: .6rem; "></sup></p></font><br>
<ul class="list-group">
<li class="list-group-item list-group-item-success">◉ 用QQ一键登录,进入会员中心,开通赞助VIP,方便快捷</li>
<li class="list-group-item list-group-item-success">◉ 赞助开通本站包月/包年/终身VIP,享全站资源免费下载特权</li>
<li class="list-group-item list-group-item-success">◉ 会员账户仅限会员本人使用,切勿共享,望知悉</li>
<li class="list-group-item list-group-item-success">◉ 本站虚拟资源均为Windows及安卓适用,苹果Mac用户切勿赞助</li>
<li class="list-group-item list-group-item-success">◉ 最新优惠,赞助VIP限时立减优惠券发放中,前往活动页领取</li>
<li class="list-group-item list-group-item-success">◉ 您也可通过签到获取站内币钢镚,累计钢镚可购买自己需要的资源</li>
<li class="list-group-item list-group-item-success">◉ 资源均经过站长亲测,无问题才会上架。虚拟资源具有可复制性,您赞助后不支持换货及退款。</li>
</ul>
<br>
<center><font style="font-size: 19px;"><a class="badge badge-warning" href="https://mmsto.com/winmac/vipinfo" rel="nofollow noopener noreferrer" target="_blank"><i class="fa fa-diamond mr-1"></i>赞助VIP</a></font> 享全站资源免费下载特权
<font style="font-size: 19px;"><a class="badge badge-success" href="https://mmsto.com/winmac/coupon" rel="nofollow noopener noreferrer" target="_blank"> 
	<i class="fa fa-gift mr-1"></i>现在去领券<sup class="spinner-grow spinner-grow-sm ml-1 small" role="status" aria-hidden="true" style=" width: .6rem; height: .6rem; "></sup></a></font> 即享立减特惠!</center>

列表组可选颜色:

<ul class="list-group">
  <li class="list-group-item">A simple default list group item</li>
  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

对应颜色组:

参考链接:https://v4.bootcss.com/docs/components/list-group/

版权声明:
作者:老刘
链接:https://winmac.cn/ripro-v2-mh9.html
来源:老刘的部落格
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>
文章目录
关闭
目 录