实现CSS提示框

本教程将学习如何实现的CSS提示框。

---

提示框

提示框常用于提示用户一些特别的信息，例如成功，失败的信息，错误的警告等。

---

如何创建提示框

步骤1，增加 HTML

提示框外层为 note note-* 类，通过外层的类来表示重要（danger）、成功（success）、提示（info）和注意（warning）。

内层为一段文本，也可以展示加粗的内容。

<div class="note note-danger">
  <p><strong>重要!</strong> 一些重要的文本...</p>
</div>

步骤2，增加CSS

为外层增加间距，设置不同提示类型的边框颜色和背景色。

.note {
  margin-bottom: 15px;
  padding: 4px 12px;
}

.note-danger {
  background-color: #ffdddd;
  border-left: 6px solid #f44336;
}

完整的代码如下

<style>
  .note {
    margin-bottom: 15px;
    padding: 4px 12px;
  }

  .note-danger {
    background-color: #ffdddd;
    border-left: 6px solid #f44336;
  }

  .note-success {
    background-color: #ddffdd;
    border-left: 6px solid #4caf50;
  }

  .note-info {
    background-color: #e7f3fe;
    border-left: 6px solid #0c86de;
  }

  .note-warning {
    background-color: #ffffcc;
    border-left: 6px solid #ffeb3b;
  }
</style>

<h2>一些提示框</h2>

<div class="note note-danger">
  <p><strong>重要!</strong> 一些重要的说明文本...</p>
</div>

<div class="note note-success">
  <p><strong>成功!</strong> 一些成功的说明文本...</p>
</div>

<div class="note note-info">
  <p><strong>提示!</strong> 一些提示的说明文本...</p>
</div>

<div class="note note-warning">
  <p><strong>注意!</strong> 一些注意的说明文本...</p>
</div>

尝试一下 »

浏览器兼容性

所有主流浏览器都支持。