警告

成功状态

成功状态提示

危险状态

危险状态提示

错误状态

错误状态提示

信息状态

信息状态提示

HTML代码

<div class="Huialert Huialert-success"><i class="Hui-iconfont">&#xe6a6;</i>成功状态提示</div>
<div class="Huialert Huialert-danger"><i class="Hui-iconfont">&#xe6a6;</i>危险状态提示</div>
<div class="Huialert Huialert-error"><i class="Hui-iconfont">&#xe6a6;</i>错误状态提示</div>
<div class="Huialert Huialert-info"><i class="Hui-iconfont">&#xe6a6;</i>信息状态提示</div>

CSS代码

.Huialert{ position:relative;padding:8px 35px 8px 14px;margin-bottom: 20px;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);background-color: #fcf8e3;border: 1px solid #fbeed5;border-radius: 4px}
.Huialert, .Huialert h4{color: #c09853}
.Huialert h4{margin: 0}
.Huialert .Hui-iconfont{position:absolute;top:9px;right:10px;line-height: 20px;cursor:pointer; color:#000; opacity:0.2;_color:#666}
.Huialert .Hui-iconfont.hover{ color:#000;opacity:0.8}
.Huialert-success{color: #468847;background-color: #dff0d8;border-color: #d6e9c6}
.Huialert-success h4{color: #468847}
.Huialert-danger, .Huialert-error{color: #b94a48;background-color: #f2dede;border-color: #eed3d7}
.Huialert-danger h4, .Huialert-error h4{color: #b94a48}
.Huialert-info{color: #3a87ad;background-color: #d9edf7;border-color: #bce8f1}
.Huialert-info h4{color: #3a87ad}
.Huialert-block{padding-top: 14px;padding-bottom: 14px}
.Huialert-block > p, .Huialert-block > ul{margin-bottom: 0}
.Huialert-block p + p{margin-top: 5px}

Copyright ©2013-2022 H-ui.net All Rights Reserved.
豫ICP备19019279号-1
H-ui只是一个纯web前端的程序,没有后台和数据库,也不提供任何系统代运营服务。所有使用H-ui开发的任何系统版权都归开发者所有,造成的任何损失、不良影响,H-ui均不承担任何法律责任。
未经允许,禁止转载、抄袭、镜像
用心做站,做不一样的站