1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title></title>
    6.     </head>
    7.     <style>
    8.         div{
    9.             position: relative;
    10.             width: 80px;
    11.             height: 90px;
    12.             margin: 0 auto;
    13.         }
    14.         img{
    15.             width: 80px;
    16.             height:90px;
    17.         }
    18.         i{
    19.             position: absolute;
    20.             color: red;
    21.             top: 0px;
    22.             left: -10px;
    23.             width: 12px;
    24.             height: 12px;
    25.             line-height: 12px;
    26.             background-color: #e1e1e1;
    27.         }
    28.         i:hover{
    29.             cursor: pointer;
    30.         }
    31.     </style>
    32.     <body>
    35.         <div>
    36.             <img src="img/tao.jpg">
    37.             <i>×</i>            
    38.         </div>
    40.         <script>
    42.       //获取事件源
    43.             var div=document.querySelector("div");
    44.             var close=document.querySelector("i");
    46.       //注册事件(鼠标点击)，处理程序(盒子隐藏)
    47.             close.onclick=function(){
    48.                 div.style.display="none";
    49.             }
    51.         </script>
    52.     </body>
    53. </html>