警告
文章转载,请注明出处 H-ui前端框架,网址http://www.h-ui.net/
成功状态
成功状态提示
危险状态
危险状态提示
错误状态
错误状态提示
信息状态
信息状态提示
HTML
SCSS
CSS
<div class="hui-alert hui-alert-success"><i class="hui-iconfont"></i>成功状态提示</div>
.hui-alert { 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; color: #c09853; .hui-iconfont { position: absolute; top: 9px; right: 10px; line-height: 20px; cursor: pointer; color: #000; opacity: 0.2; _color: #666; &.hover { color: #000; opacity: 0.8; } } .hui-alert-message { color: #c09853; font-size: 16px; margin-bottom: 4px; } .hui-alert-description { font-size: 14px; line-height: 22px; } &.hui-alert-success { color: #468847; background-color: #dff0d8; border-color: #d6e9c6; .hui-alert-message { color: #468847; } } &.hui-alert-danger { color: #b94a48; background-color: #f2dede; border-color: #eed3d7; .hui-alert-message { color: #b94a48; } } &.hui-alert-error { color: #fff; background-color: #f37b1d; border-color: #e56c0c; .hui-alert-message { color: #fff; } } &.hui-alert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; .hui-alert-message { color: #31708f; } } &.hui-alert-block { padding-top: 14px; padding-bottom: 14px; >p, >ul { margin-bottom: 0; } p+p { margin-top: 5px; } } }
.hui-alert { 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; color: #c09853; } .hui-alert .hui-iconfont { position: absolute; top: 9px; right: 10px; line-height: 20px; cursor: pointer; color: #000; opacity: 0.2; _color: #666; } .hui-alert .hui-iconfont.hover { color: #000; opacity: 0.8; } .hui-alert .hui-alert-message { color: #c09853; font-size: 16px; margin-bottom: 4px; } .hui-alert .hui-alert-description { font-size: 14px; line-height: 22px; } .hui-alert.hui-alert-success { color: #468847; background-color: #dff0d8; border-color: #d6e9c6; } .hui-alert.hui-alert-success .hui-alert-message { color: #468847; } .hui-alert.hui-alert-danger { color: #b94a48; background-color: #f2dede; border-color: #eed3d7; } .hui-alert.hui-alert-danger .hui-alert-message { color: #b94a48; } .hui-alert.hui-alert-error { color: #fff; background-color: #f37b1d; border-color: #e56c0c; } .hui-alert.hui-alert-error .hui-alert-message { color: #fff; } .hui-alert.hui-alert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; } .hui-alert.hui-alert-info .hui-alert-message { color: #31708f; } .hui-alert.hui-alert-block { padding-top: 14px; padding-bottom: 14px; } .hui-alert.hui-alert-block > p, .hui-alert.hui-alert-block > ul { margin-bottom: 0; } .hui-alert.hui-alert-block p + p { margin-top: 5px; }