警告

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}