Добавьте логотип в правом верхнем углу изображения HTML-страницы.

Часть CSS (ii отрегулируйте положение)

/*徽标*/
.labelBadge {
    
    
    position: relative;
}

.ii {
    
    
    background: #f00;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    top: -10px;
    right: -15px;
    position: absolute;
    text-align: center;
    color: #FFF;
    z-index: 99999;
    font-size: 14px;
}

HTML-раздел (ссылка)

<div class="col-md-12 col-lg-8 mrbt">
<div style="box-shadow: 0px 0px 5px #ccc;margin-top:20px;padding-bottom:20px;">
        <table style="width: 100%; margin: 0 auto;" class="xz-kjfs">
            <tr>
                <td><a onclick="openToDo()">
                    <div style="width: 90px; margin: 0 auto;">
                        <span class="nav-label labelBadge">
                            <span class="ii" th:if="${todoNum > 0}">[[${todoNum}]]</span>
                            <img src="../img/daiban.svg" style="width:75%;margin-top: 20px;"/>
                        </span>
                    </div>
                    <p>我的待办</p>
                </a></td>
                <td><a onclick="openReceiveTelegram()">
                    <div style="width: 90px; margin: 0 auto;">
                        <span class="nav-label labelBadge">
                            <span class="ii" th:if="${receiveNum > 0}">[[${receiveNum}]]</span>
                            <img src="../img/shouwen.svg" style="width:75%;margin-top: 20px;"/>
                        </span>
                    </div>
                    <p>我的收文</p>
                </a></td>
                <td><a onclick="tzTz()">
                    <div style="width: 90px; margin: 0 auto;">
                         <span class="nav-label labelBadge">
                            <span class="ii" th:if="${noticeNum > 0}">[[${noticeNum}]]</span>
                            <img src="../img/gonggao.svg" style="width:75%;margin-top: 20px;"/>
                        </span>
                    </div>
                    <p>通知公告</p>
                </a></td>
                <td><a onclick="bmtxTz(1)">
                    <div style="width: 90px; margin: 0 auto;">
                        <span class="nav-label labelBadge">
                            <span class="ii" th:if="${bmtxNum > 0}">[[${bmtxNum}]]</span>
                            <img src="../img/tixing.svg" style="width:75%;margin-top: 20px;"/>
                        </span>
                    </div>
                    <p>保密提醒</p>
                </a></td>
                <td><a onclick="bmtxTz(2)">
                    <div style="width: 90px; margin: 0 auto;">
                         <span class="nav-label labelBadge">
                            <span class="ii" th:if="${ylsgNum > 0}">[[${ylsgNum}]]</span>
                            <img src="../img/shigui.svg" style="width:75%;margin-top: 20px;"/>
                        </span>
                    </div>
                    <p>以例释规</p>
                </a></td>
                <td><a onclick="bmtxTz(3)">
                    <div style="width: 90px; margin: 0 auto;">
                         <span class="nav-label labelBadge">
                            <span class="ii" th:if="${xxydNum > 0}">[[${xxydNum}]]</span>
                            <img src="../img/xuexi.svg" style="width:75%;margin-top: 20px;"/>
                        </span>
                    </div>
                    <p>学习园地</p>
                </a></td>
                <td><a onclick="bmtxTz(4)">
                    <div style="width: 90px; margin: 0 auto;">
                         <span class="nav-label labelBadge">
                            <span class="ii" th:if="${jypxNum > 0}">[[${jypxNum}]]</span>
                            <img src="../img/jiaoyu.svg" style="width:75%;margin-top: 20px;"/>
                        </span>
                    </div>
                    <p>教育培训</p>
                </a></td>
            </tr>
        </table>
    </div>
</div>

Guess you like

Origin blog.csdn.net/hexianfan/article/details/131162754