分享 Microsoft Docs 的几个提示框框
本文约 942 字，包含 0 张图片，3 个代码段，阅读时间约 3 分钟
在手机上查看此页面
自己仿的样式，前端就那样，没仿到灵魂，没考虑兼容，写 markdown 的博客时能用用。
字符图标：Font Awesome
效果
重要
不能在 macOS 上开发 Windows 应用。
备注
不能在 macOS 上开发 Windows 应用。
提示
不能在 macOS 上开发 Windows 应用。
注意
不能在 macOS 上开发 Windows 应用。
警告
不能在 macOS 上开发 Windows 应用。
代码
不带 css 类的
<div style="display: block;position: relative;border-radius: 8px;padding: 1rem;background-color: #e0f2ff;color: #002b4d;margin: 10px">
<p style="margin-top:0;font-weight: bold"><i class="fa fa-info-circle" aria-hidden="true"></i> 重要</p>
<p><span>不能在 macOS 上开发 Windows 应用。</span></p>
</div>
<div style="display: block;position: relative;border-radius: 8px;padding: 1rem;background-color: #e2daf1;color: #38225d;margin: 10px">
<p style="margin-top:0;font-weight: bold"><i class="fa fa-info-circle" aria-hidden="true"></i> 备注</p>
<p><span>不能在 macOS 上开发 Windows 应用。</span></p>
</div>
<div style="display: block;position: relative;border-radius: 8px;padding: 1rem;background-color: #d2f9d2;color: #094409;margin: 10px">
<p style="margin-top:0;font-weight: bold"><i class="fa fa-lightbulb-o" aria-hidden="true"></i> 提示</p>
<p><span>不能在 macOS 上开发 Windows 应用。</span></p>
</div>
<div style="display: block;position: relative;border-radius: 8px;padding: 1rem;background-color: #fff1cc;color: #664b00;margin: 10px">
<p style="margin-top:0;font-weight: bold"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> 注意</p>
<p><span>不能在 macOS 上开发 Windows 应用。</span></p>
</div>
<div style="display: block;position: relative;border-radius: 8px;padding: 1rem;background-color: #ffdacc;color: #651b01;margin: 10px">
<p style="margin-top:0;font-weight: bold"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> 警告</p>
<p><span>不能在 macOS 上开发 Windows 应用。</span></p>
</div>
带 css 类的
.alert-title {
margin-top: 0;
font-weight: bold
}
.alert-info {
display: block;
position: relative;
border-radius: 8px;
padding: 1rem;
background-color: #e2daf1;
color: #38225d;
margin: 10px
}
.alert-success {
display: block;
position: relative;
border-radius: 8px;
padding: 1rem;
background-color: #d2f9d2;
color: #094409;
margin: 10px
}
.alert-primary {
display: block;
position: relative;
border-radius: 8px;
padding: 1rem;
background-color: #e0f2ff;
color: #002b4d;
margin: 10px
}
.alert-warning {
display: block;
position: relative;
border-radius: 8px;
padding: 1rem;
background-color: #fff1cc;
color: #664b00;
margin: 10px
}
.alert-danger {
display: block;
position: relative;
border-radius: 8px;
padding: 1rem;
background-color: #ffdacc;
color: #651b01;
margin: 10px
}
<div class="alert-primary">
<p class="alert-title"><i class="fa fa-info-circle" aria-hidden="true"></i> 重要</p>
<p><span>不能在 macOS 上开发 Windows 应用。</span></p>
</div>
<div class="alert-info">
<p class="alert-title"><i class="fa fa-info-circle" aria-hidden="true"></i> 备注</p>
<p><span>不能在 macOS 上开发 Windows 应用。</span></p>
</div>
<div class="alert-success">
<p class="alert-title"><i class="fa fa-lightbulb-o" aria-hidden="true"></i> 提示</p>
<p><span>不能在 macOS 上开发 Windows 应用。</span></p>
</div>
<div class="alert-warning">
<p class="alert-title"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> 注意</p>
<p><span>不能在 macOS 上开发 Windows 应用。</span></p>
</div>
<div class="alert-danger">
<p class="alert-title"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> 警告</p>
<p><span>不能在 macOS 上开发 Windows 应用。</span></p>
</div>