“各项提示美化”css代码分享
1年前
超过518天
温馨提示
本文最后更新于2023年04月20日，已超过518天没有更新，若内容或图片失效，请留言反馈。
以上代码扒自“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>
演示
测试一下
测试一下
测试一下
测试一下
测试一下
本作品采用知识共享许可协议知识共享署名-非商业性使用-禁止演绎 3.0 中国大陆许可协议进行许可授权。即要求您在需要转载、引用本文全文或者部分时，请按照协议要求署名，并在保证不进行任何修改、续写等演绎形式，并不用于商业性项目的情况下使用。如果本文有侵犯到您的权益，请直接向我们留言反馈。
0 赞
or 打赏
喜欢就打赏一点
上一篇
下一篇
.png "往往免费的还不如收费的")
.png "走失两天的狗子终于找到它的家了")
.png "顶着三十几度的天气去钓鱼了")
.png "\"微博客\"一款自己开发自己用的垃圾源码（慢慢更新中）")
老Q
1年前 . LV.1
嘿嘿，这是一条私密评论。
寻梦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.1
@寻梦xunm
你怎么把你女朋友弄得这么小了，弄这
么小多少给个灯箱呗。