k3写的Komari消息通知模板,QQ邮箱通知可使用，还挺好看的
咸鱼干脆脆的
2026-07-18 14:01
1
k3写的Komari消息通知模板大家可以看一下还能怎么样优化
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>消息通知</title>
</head>
<body style="margin:0;padding:0;background-color:#f4f3f9;font-family:'Helvetica Neue',Arial,'PingFang SC','Microsoft YaHei',sans-serif;-webkit-text-size-adjust:100%;">
<!-- 收件箱预览摘要：显示在邮件列表中，正文内不可见 -->
<div style="display:none;max-height:0;overflow:hidden;mso-hide:all;">{{event}} · {{time}}</div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f4f3f9;padding:32px 12px;">
<tr>
<td align="center">
<!-- 卡片：描边代替投影，扁平化处理 -->
<table width="520" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:520px;background-color:#ffffff;border:1px solid #e7e4f2;border-radius:10px;overflow:hidden;">
<!-- 头部：纯紫色块 -->
<tr>
<td style="background-color:#9180c8;padding:22px 28px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="color:#ffffff;font-size:17px;font-weight:bold;letter-spacing:1px;vertical-align:middle;">🔔 消息通知</td>
<td align="right" style="vertical-align:middle;">
<span style="display:inline-block;background-color:#ffffff;border-radius:20px;padding:4px 14px;color:#9180c8;font-size:12px;font-weight:bold;letter-spacing:1px;">新消息</span>
</td>
</tr>
</table>
</td>
</tr>
<!-- 粉色拼接条：扁平色块撞色 -->
<tr>
<td style="height:4px;line-height:4px;font-size:0;background-color:#f0a6d8;"> </td>
</tr>
<!-- 事件标题：纯色竖条 -->
<tr>
<td style="padding:26px 28px 6px 28px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="4" style="background-color:#9180c8;border-radius:2px;font-size:0;line-height:0;"> </td>
<td style="padding-left:12px;font-size:19px;font-weight:bold;color:#4a4560;line-height:1.4;">{{event}}</td>
</tr>
</table>
</td>
</tr>
<!-- 详情：浅紫底 + 粉色左边条 -->
<tr>
<td style="padding:14px 28px 6px 28px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f7f5fc;border-radius:6px;">
<tr>
<td width="4" style="background-color:#f0a6d8;font-size:0;line-height:0;"> </td>
<td style="padding:14px 16px;color:#5d5875;font-size:14px;line-height:1.8;word-break:break-all;">{{message}}</td>
</tr>
</table>
</td>
</tr>
<!-- 元信息：双列布局 -->
<tr>
<td style="padding:18px 28px 24px 28px;border-top:1px solid #f0edf7;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="50%" style="padding:6px 0;vertical-align:top;">
<div style="color:#9b95b3;font-size:12px;letter-spacing:2px;padding-bottom:5px;">💻 客户端</div>
<div style="color:#4a4560;font-size:14px;font-weight:bold;">{{client}}</div>
</td>
<td width="50%" style="padding:6px 0;vertical-align:top;">
<div style="color:#9b95b3;font-size:12px;letter-spacing:2px;padding-bottom:5px;">🕑 时间</div>
<div style="color:#4a4560;font-size:14px;">{{time}}</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- 底部 -->
<tr>
<td style="background-color:#faf9fd;padding:16px 28px;text-align:center;border-top:1px solid #f0edf7;">
<span style="color:#b9b4cc;font-size:12px;line-height:1.6;">📮 此邮件由系统自动发送，请勿直接回复</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
最新回复 (5)
-
咸鱼干脆脆的 楼主 07-18 14:051楼
-
nulll 07-18 14:082楼 -
咸鱼干脆脆的 楼主 07-18 14:123楼
-
nulll 07-18 14:134楼
-
咸鱼干脆脆的 楼主 07-18 14:145楼
* 帖子来源NodeSeek
附近帖子