求助：实现Mock设计的系统告警消息（调整图标、标题及正文偏移）

嘿，我懂你这种想做个像样的告警Mock却卡壳的滋味——非专业前端/UX搞UI细节确实容易没头绪。我帮你把代码补全并配上完整的样式，让这个警告消息看起来专业又符合Mock需求，直接就能用！

首先补全并优化你的HTML结构 #

先把你给出的不完整代码补全，加上必要的文本内容，让结构更完整：

<div class="apparent-message warning-message">
  <div class="message-container">
    <div class="apparent-message-icon fa fa-fw fa-2x fa-exclamation-triangle"></div>
    <div class="content-container">
      <div class="message-head">系统警告</div>
      <div class="message-body">检测到服务器磁盘使用率已超过85%，请及时清理冗余文件。</div>
    </div>
  </div>
</div>

然后加上核心CSS样式 #

这部分样式会帮你实现告警消息的视觉效果，包括颜色、布局、间距这些细节，完全是Mock所需的图形化效果：

/* 基础告警消息容器 */
.apparent-message {
  max-width: 480px;
  margin: 20px auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  overflow: hidden;
}

/* 警告类型的配色 */
.warning-message {
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
}

/* 内部布局容器，用flex实现图标和内容横向排列 */
.message-container {
  display: flex;
  align-items: flex-start;
  padding: 16px;
}

/* 图标样式 */
.apparent-message-icon {
  color: #ffc107;
  margin-right: 12px;
  margin-top: 2px; /* 让图标和文本顶部对齐更自然 */
}

/* 内容容器，占满剩余空间 */
.content-container {
  flex: 1;
}

/* 告警标题样式 */
.message-head {
  font-weight: 600;
  color: #856404;
  margin-bottom: 4px;
  font-size: 16px;
}

/* 告警内容样式 */
.message-body {
  color: #856404;
  font-size: 14px;
  line-height: 1.5;
}

小提示 #

记得确保你已经引入了Font Awesome（因为代码里用到了fa类的图标），如果还没引入，可以在HTML的<head>里加一行：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

把这些代码复制到你的项目里，就能得到一个视觉清晰、符合Mock需求的系统警告消息了！如果需要调整其他类型的告警（比如错误、提示），只需要修改对应的颜色类和图标就行~

内容的提问来源于stack exchange，提问作者blgrnboy