给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>

你可能感兴趣的:(笔记,html,css,前端)