小工具引导卡片 - wordpress 区块

这款用于 wordpress 美化引导卡片继承前者优秀的配色，依然是自适应展示，按钮由两枚减少为一枚，文字的排版布局也进行了精简

最后更新于 2025-06-07

本页目录2 节

这款引导卡片继承前者优秀的配色，依然是自适应展示，按钮由两枚减少为一枚，文字的排版布局也进行了精简，相比前者，这次带来的 WordPress 美化教程更适合在一些狭窄的地方展示引导内容，比如小工具，当然，还有更多有趣的玩法带你发现。

代码依然由 HTML 和 CSS 写成，方便引入。代码在保持简洁的同时充分考虑了浏览器兼容和自适应等问题，让您的内容以最为优雅舒适的方式展现在您的客户面前。

代码效果如下：

1
<div class="widget widget-ssr">
2
        <a class="asr" href="http://www.emerinfo.cn/2020-02/04/c_1210460856.htm" target="_blank" rel="noopener noreferrer">
3
            <h4>预防新冠肺炎</h4><h5>戴口罩、勤洗手、保通风、听指挥</h5>
4
            <span class="btn btn-outline">了解更多</span></a>
5
        </div>
6
<style type="text/css">
7
.widget-ssr {
8
    overflow: hidden;
9
    padding: 0;
10
}
11
.widget-ssr {
12
    font-size: 14px;
13
    background-color: #fff;
14
}
15
.asr {
16
  border-radius: 10px;
17
  display: block;
18
  padding: 40px 15px;
19
  text-align: center;
20
  color: #fff !important;
21
  background: #fe3d7d;
22
  background-image: linear-gradient(to right,#fe3d7d 0,#fe5b34 50%,#fe3d7d 100%);
23
}
24
.asr .btn {
25
    margin-top: 20px;
26
    font-weight: 700;
27
}
28
.asr h4 {
29
    margin: 0;
30
    font-size: 22px;
31
}
32
.asr h5 {
33
    margin: 10px 0 0;
34
    font-size: 14px;
35
}
36
.asr .btn:hover {
37
    color: #fe3d7d;
38
}
39
.btn-outline:hover {
40
    background-color: #fff;
41
}
42
.btn-outline {
43
    line-height: 36px;
44
    color: #fff;
45
    background-color: transparent;
46
    border: 1px solid #fff;
47
    display: inline-block;
48
    font-weight: 400;
49
    text-align: center;
50
    vertical-align: top;
51
    user-select: none;
52
    padding: 0 36px;
53
    font-size: 14px;
54
    border-radius: 100px;
55
    outline: 0;
56
    -webkit-transition: all .3s ease-in-out;
57
    -moz-transition: all .3s ease-in-out;
58
    transition: all .3s ease-in-out;
59
}
60
</style>