后台页面-制作铃铛带数字消息提示样式

最新推荐文章于 2024-05-15 14:53:29 发布

转载最新推荐文章于 2024-05-15 14:53:29 发布 · 3.9k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ButterflyEffect/p/9436778.html

文章标签：

#javascript #前端 #java #ViewUI

本文介绍了一种使用HTML和CSS实现的消息提示效果样式，包括图标、提示数字等元素，并附带了具体的代码示例。

效果样式图

代码:

<li class="display">
     <a href="@Url.Action("Index","Contract",new { })" data-toggle="tooltip" data-placement="top" title="消息提示">
           <span class="glyphicon glyphicon-bell" aria-hidden="true" style="font-size:25px;position:relative;"></span>
                 <span style="font-size:11px;position:absolute;left:33px;top:10px;border-radius: 50%;height: 20px;width: 20px;display: inline-block;background: #f20c55;vertical-align: top;">
                 <span style="display: block;color: #FFFFFF;height: 20px;line-height: 20px;text-align: center"> 12</span>
            </span>
     </a>
</li>

转载于:https://www.cnblogs.com/ButterflyEffect/p/9436778.html