css消息提示图标 |css font 标签属性

/* CSS消息提示图标 */
.warning {
background-color: #fcf8e3;
color: #8a6d3b;
border: 1px solid #faebcc;
padding: 15px;
border-radius: 4px;
display: inline-block;
}
.info {
background-color: #d9edf7;
color: #31708f;
border: 1px solid #bce8f1;
padding: 15px;
border-radius: 4px;
display: inline-block;
}
.error {
background-color: #f2dede;
color: #a94442;
border: 1px solid #ebccd1;
padding: 15px;
border-radius: 4px;
display: inline-block;
}

如上所示的CSS代码包含了三种常用的消息提示图标：警告、信息、和错误。警告的背景颜色为黄色，信息的背景颜色为浅蓝色，错误的背景颜色为浅红色。每个图标都有自己的颜色和样式，但是它们都具有一个类名，以便在应用程序中使用。

要将这些图标应用到网站或者应用程序中，只需在HTML代码中添加相应的HTML标记，并将图标的类名应用到标记中。例如：

<div class="warning">
<p>这是一个警告信息。</p>
</div>
<div class="info">
<p>这是一个信息。</p>
</div>
<div class="error">
<p>这是一个错误。</p>
</div>

如上所示的HTML代码将在网站或者应用程序中创建三个不同的消息提示图标，分别为警告、信息和错误。每个图标都包含一个段落元素，用于显示消息文本。添加这些标记后，您可以将样式应用到每个标记，并定制它们的外观和感觉。

总之，CSS消息提示图标是网站和应用程序中非常有用的组件。它们可以提供有用的反馈信息，并帮助用户更好地理解发生的情况。通过在应用程序中添加这些图标，您可以提高用户的使用体验，并使您的应用程序更加易于使用。