实现代码如下：
<divclass="wrap">
<divclass="img"></div>
<divclass="notice">1</div>
</div>
<divclass="wrap">
<divclass="img"></div>
<divclass="notice">12</div>
</div>
<divclass="wrap">
<divclass="img"></div>
<divclass="notice">13</div>
</div>
<style>
.wrap{
width:50px
margin-bottom:10px
position:relative
}
.img{
width:50px
height:50px
border:1pxsolid#000
}
.notice{
width:20px
height:20px
line-height:20px
font-size:10px
color:#fff
text-align:center
background-color:#f00
border-radius:50%
position:absolute
right:-10px
top:-10px
}
</style>
扩展资料：注意事项
主要用到position定位，CSSposition属性用于指定一个元素在文档中的定位方式。top、right、bottom、left 属性则决定了该元素的最终位置。
static是position的默认值。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>CSS-position-static</title>
<linkrel="stylesheet"href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css">
<style>
.container{
background-color:#868686
width:100%
height:300px
}
.content{
background-color:yellow
width:100px
height:100px
position:static
left:10px/*这个left没有起作用*/
}
</style>
</head>
<body>
<divclass="container">
<divclass="content">
</div>
</div>
</body>
</html>
方法一、可以加载js插件（网上有很多这类验证表单的插件）方法二、自己手动写，比如：
<form method="post" action="" onsubmit="return check_form(this)">
<div class="item">
<input type="text" name="name" oninput="clear_error(this)"/>
</div>
<button type="submit">提交</button>
</form>
<script type="text/javascript" src="引用jquery.js"></script>
<script type="text/javascript">
function check_form(f){
if(f.name.value == ''){
$('input[name="name"]').after('<span style="color:red">请填写姓名</span>')
return false
}
return true
}
function clear_error(o){
$(o).siblings('span').remove()
}
</script>
<html><head><meta http-equiv=content-type content="text/htmlcharset=GBK"></head><body><form action="" method="post" onsubmit="return check(this)"><label id="msg" style="color:redfont-size:12pt"></label><br/> 用户名:<input name="username"/><br/>密 码:<input type="password" name="username"/><br/><input type="submit" value="提交"/></form></body><script>function check(form){return (function(node){// 如果已经没有需要校验的子节点，则推出递归if(!node) return true// 判断子节点类型，这里我们只需要校验text和password类型文本if(/((text)|(password))/i.test(node.type)){var isEmpty = node.value.length == 0// 校验文本是否为空if(isEmpty){caution(node)return false}}// 使用递归来遍历下一个节点return arguments.callee(node.nextSibling)})(form.firstChild)}function caution(node){document.getElementById("msg").innerHTML = "请填写账号"node.focus()}</script></html>欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）