完整的代码如下 - 在线编辑器

          <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>

        