洛丽糖(luolt.cn),致力于互联网资源的共享, 分享各类技术教程,typecho主题模板,zblog主题模板,网站源码等各种资源。
首页 » 休闲 » 正文内容
“各项提示美化”css代码分享
寻梦xunm| 875| 休闲
1年前
超过593天 温馨提示
本文最后更新于2023年04月20日,已超过593天没有更新,若内容或图片失效,请留言反馈。

以上代码扒自“handsome主题”,仅供学习参考,如果用于商业请自行承担相关后果。
请输入图片描述

css代码

.xm-wx-tip{
  display: inline-block;
  width: calc(100% - 40px);
  background: #eef6fd;
  padding: 8px 20px;
  border-radius: 4px;
  margin-bottom: 5px;
  margin-top: 5px;
  color: #777;
}
.xm-wx-tip:before {
  background: #38a3fd;
  border-radius: 50%;
  color: #fff;
  content: "i";
  font-size: 15px;
  height: 21px;
  line-height: 21px;
  margin-left: -32px;
  margin-top: 5px;
  position: absolute;
  text-align: center;
  width: 21px;
}

.xm-wx-tip-info{
  border-left: 3px solid #38a3fd;
}
.xm-wx-tip-info:before {
  background: #38a3fd;
  color: #fff;
  content: "i";
}

.xm-wx-tip-success{
  border-left: 3px solid #2e9f0f;
}
.xm-wx-tip-success:before {
  background: #2e9f0f;
  color: #fff;
  content: "\221a";
}

.xm-wx-tip-share{
  border-left: 3px solid #404040;
}
.xm-wx-tip-share:before {
  color: #fff;
 background:#404040;
 content:"\0040"
}

.xm-wx-tip-warning{
  border-left: 3px solid #ff7800;
}
.xm-wx-tip-warning:before {
  color: #fff;
 background:#ff7800;
 content:"\0021"
}

.xm-wx-tip-error{
  border-left: 3px solid #ed0000;
}
.xm-wx-tip-error:before {
  color: #fff;
 background:#ed0000;
 content:"\00D7"
}

html代码

<div class="xm-wx-tip xm-wx-tip-info">
购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买
</div>
<div class="xm-wx-tip xm-wx-tip-success">
购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买
</div>
<div class="xm-wx-tip xm-wx-tip-share">
购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买
</div>
<div class="xm-wx-tip xm-wx-tip-warning">
购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买
</div>
<div class="xm-wx-tip xm-wx-tip-error">
购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买
</div>

演示

测试一下

测试一下

测试一下

测试一下

测试一下

0 赞 or 打赏
喜欢就打赏一点
微信 支付宝
20240430140454171445709417079.png
  1. 老Q的头像
    老Q

    1年前 . LV.2

    嘿嘿,这是一条私密评论。

    Windows Chrome 浙江省温州市
    1. 寻梦xunm的头像
      寻梦xunm

      1年前 . LV.0

      @老Q

      等有空吧

      Android 夸克浏览器 重庆市
  2. 老Q的头像
    老Q

    1年前 . LV.1

    {img}https://www.ilaoq.com/usr/uploads/2023/04/4030743425.jpg{/img}送个女朋友给你。

    Windows Chrome 浙江省温州市
    1. 寻梦xunm的头像
      寻梦xunm

      1年前 . LV.0

      @老Q

      E6B197

      Android 夸克浏览器 重庆市
      1. 寻梦xunm的头像
        寻梦xunm

        1年前 . LV.0

        @寻梦xunm

        小巧玲珑,小家碧玉E59090E8888C

        Android 夸克浏览器 重庆市
      2. 老Q的头像
        老Q

        1年前 . LV.2

        @寻梦xunm

        你怎么把你女朋友弄得这么小了,弄这E5B08FE4B996么小多少给个灯箱呗。

        Windows Chrome 浙江省温州市
20240430140454171445709417079.png
隐私
Q Q:1340326824
邮箱:vipshiyi@qq.com
QQ群:422720328

我的音乐