Zhang Yuexin

C# programmer. Know a bit of hardware knowledge. 3D model design novice.

张高兴 - 土味儿编程

高兴不高兴

分享 Microsoft Docs 的几个提示框框

本文约 942 字,包含 0 张图片,3 个代码段,阅读时间约 3 分钟
QR Code

在手机上查看此页面


自己仿的样式,前端就那样,没仿到灵魂,没考虑兼容,写 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>&nbsp;&nbsp;重要</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>&nbsp;&nbsp;备注</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>&nbsp;&nbsp;提示</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>&nbsp;&nbsp;注意</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>&nbsp;&nbsp;警告</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>&nbsp;&nbsp;重要</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>&nbsp;&nbsp;备注</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>&nbsp;&nbsp;提示</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>&nbsp;&nbsp;注意</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>&nbsp;&nbsp;警告</p>
    <p><span>不能在 macOS 上开发 Windows 应用。</span></p>
</div>
最后更新时间 : 2019/01/22 17:16 张高兴 阅读(221) 评论(0)
文章分类: 杂谈
文章标签: 杂谈 HTML Markdown
  发表评论
Click to Refresh