“各项提示美化”css代码分享
1年前
超过580天
温馨提示
本文最后更新于2023年04月20日，已超过580天没有更新，若内容或图片失效，请留言反馈。
以上代码扒自“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 打赏
喜欢就打赏一点
上一篇
下一篇
老Q
1年前 . LV.2
嘿嘿，这是一条私密评论。
寻梦xunm
1年前 . LV.0
@老Q
等有空吧
老Q
1年前 . LV.1
{img}https://www.ilaoq.com/usr/uploads/2023/04/4030743425.jpg{/img}送个女朋友给你。
寻梦xunm
1年前 . LV.0
@老Q
寻梦xunm
1年前 . LV.0
@寻梦xunm
小巧玲珑，小家碧玉
老Q
1年前 . LV.2
@寻梦xunm
你怎么把你女朋友弄得这么小了，弄这
么小多少给个灯箱呗。