css 好看的消息提示框

CSS 好看的消息提示框让网站更加美观和用户友好。下面介绍几个实用的 CSS样式，帮助你制作漂亮的消息提示框。

/*基础样式*/.alert{
        padding: 15px;
        border-radius:8px;
        color: #fff;
        font-size: 16px;
        margin-bottom: 15px;
        text-align: center;
}
/*成功样式*/.alert-success{
        background-color: #1bbc9d;
}
.alert-success:hover{
        background-color: #16a085;
}
/*警告样式*/.alert-warning{
        background-color: #f39c12;
}
.alert-warning:hover{
        background-color: #e67e22;
}
/*错误样式*/.alert-danger{
        background-color: #e74c3c;
}
.alert-danger:hover{
        background-color: #c0392b;
}
/*信息样式*/.alert-info{
        background-color: #2980b9;
}
.alert-info:hover{
        background-color: #2471a3;
}
    

上述代码简单易懂，基础样式的alert类是每种样式的公共部分，其中包括了文本颜色、内边距、字号、圆角、边距和文本对齐等基本属性。这样可以简化其他样式，并且基础样式可以自行扩展或者修改。成功样式的alert-success类是在基础样式的基础上进行了颜色、鼠标移上去的颜色等细节的修改；同理，警告、错误、信息样式也是在基础样式的基础上进行了差异化的修改。总之，这些样式可以根据需要自由组合，例如可以给按钮添加提示框样式，让用户在操作时更加顿悟。很明显，有了好看的消息提示框，用户访问你的网站时会多感受到一份贴心。所以，赶紧尝试一下吧！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！