怎么实现这种图片的角标呢?要能动态改变角标的值。。。
就加一个结构上去嘛~css3 可以使用:after
<div data-num='22' id="a1">33333</div>
#a1 {
width: 200px;
height: 200px;
background-color: #333;
color: #fff;
position: relative;
margin-top: 50px;
}
#a1:after {
content: attr(data-num);
line-height: 50px;
text-align: center;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: red;
position: absolute;
top: -20px;
right: -20px;
}
$('#a1').click(function() {
var n = $("#a1").attr('data-num');
$("#a1").attr('data-num', ++n);
});
// $('#a1').click(function() {
// console.log($("#a1").data('num'));
// $("#a1").data('num', '3333');
// console.log($("#a1").data('num'));
// });
伪类做的,动态赋值也顺手写了
使用伪类应该是不错的
如楼上几位所说,使用::after ::before
伪元素可以的。当然了不使用伪元素也可以比如设置定位,例如我们所用的网站通知一样
看你项目需要支持到ie多少
考虑低级别ie的话,建议增加一个<em></em>
通过定位啥的,固定到右上角
如果不需要,建议使用::after ::before
等伪元素,还能使用border-radius
实现圆角
移动端的话,直接伪元素吧