<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*清除默认样式*/
*{
margin: 0;
padding: 0;
}
#qecode{
width: 200px;
height: 160px;
/*子元素绝对定位 父元素相对定位*/
position: relative;
/*background-color: red;*/
margin: 200px auto;
}
#qecode img{
width: 180px;
height: 160px;
position: absolute;
right: 0;
}
#qecode #close{
position: absolute;
width: 18px;
height: 18px;
border: 1px solid #e0e0e0;
text-align: center;
line-height: 18px;
/*鼠标箭头*/
cursor: pointer;
color: #666666;
}
</style>
</head>
<body>
<div id="qecode">
<img src="img/79d353ccd7d7d65fd3b8c72f2cb1b94.jpg" id="code" />
<span id="close">x</span>
</div>
<script type="text/javascript">
var closebtn = document.getElementById(‘close‘);
var qecode = document.getElementById(‘qecode‘);
closebtn.onclick = function(){
qecode.style.display=‘none‘;
}
</script>
</body>
</html>
原文：https://www.cnblogs.com/weixin2623670713/p/12960892.html