我在一些网站上看到他们有一个菜单,他们是一个小徽章,在菜单上显示数字。有谁知道这是如何显示的。我正在使用 mvc 和 razor 语法开发一个 Web 应用程序。例如,现在我有一个菜单“电子邮件”,如果收到任何新电子邮件,则菜单项应显示“电子邮件 1”。这里“1”应该在电子邮件菜单的右上角。我很想知道是否有人这样做并且可以分享一些想法。
问问题
1114 次
2 回答
2
我个人使用data
HTML 元素的属性,然后使用content:attr(data)
它生成一个纯 CSS 的徽章,如下所示:
这是一个例子:
.badged::after{
content:attr(data-count); /* Important part */
position:relative;
top:-10px;
right:0px;
display:inline-block;
min-width:16px;
height:16px;
text-align:center;
color: white;
border:1px solid darkred;
border-radius:10px;
background: red;
}
<span class="badged" data-count="1">I'm badged!</span>
于 2013-11-13T01:27:01.863 回答
1
你的意思是这样的:
演示:http: //jsfiddle.net/87FE9/1/
.e {
width: 90px; height: 40px; background-color: rgb(50, 121, 128); line-height: 40px; text-align: center; color: white;
margin: auto; position: absolute; top: 0;bottom: 0;left: 0;right: 0;
}
.alert {
position: absolute; background-color: rgb(0, 204, 255); border-radius: 1000px; width: 30px; height: 30px; text-align: center; line-height: 30px; top: 28px; left: 65px;
display: none;
}
body,html {
font-family: 'Open Sans';
height: 100%; background-color: rgb(45, 38, 61);
}
它基本上是一个具有巨大边框半径但宽度和高度很小的 div,这使它看起来像一个圆圈,并且在我的情况下它是绝对定位的,但通常参考父元素并通过 javascript 显示或隐藏。
于 2013-11-13T01:27:49.913 回答