index.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="description" content="京东-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"><meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>京东()-正品低价、品质保障、配送及时、轻松购物！</title><link rel="Shortcut icon" href="./images/favicon.ico"><link rel="stylesheet" href="./css/base.css" type="text/css"><link rel="stylesheet" href="./css/style.css" type="text/css"><script type="text/javascript" src="./js/style.js"></script></head><body><!-- 顶部图片 --><div id="header"><div class="top-center"><!-- 顶部图片 --><a href="" id="t-c-z"></a><!-- 关闭按钮 --><img src="./image/qwe.png" id="close"></div></div></body></html>
style.js
window.onload = function(){//顶部图像隐藏var close = document.getElementById("close");var header = document.getElementById("header");close.onclick = function(){header.style.display = "none";}}
style.css
#header{width: 100%;height: 80px;background:#FFBC01;}.top-center{width: 1190px;height: 80px;margin: 0 auto;background: blue;position: relative;}#t-c-z{width: 1190px;height: 80px;display: block;background: url(../image/5919208fN56f65f84.jpg);}#close{/* 若不设置父级元素的定位属性，只设置关闭按钮的，会随着窗口的放大而放大，缩小而缩小 */position: absolute;top: 5px;right: 5px;/* 指镇悬浮上去为手指型 */cursor: pointer; }
效果：
点击“x”号，可关闭图片
