HTML如何在图片右上角添加关闭按钮
1、1.在电脑桌面新建一个记事本

2、打开记事本,编写一个基本的html结构,代码如下图所示:

3、在header 标签里面 设置好编码格式,以及基本元素

4、在body标签里面 放好图片 和关闭按钮

5、在header 中的 style 标签里面 设置图片 和 关闭按钮在图片右上方的样式

6、将文件另存为html格式文件,然后用google浏览器打开


7、附上源码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.imgDiv {
display: inline-block;
position: relative;
}
.imgDiv .delete {
position: absolute;
}
</style>
</head>
<body>
<div class="imgDiv">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575439840481&di=2d6dcab1fd0752e37a62263640e8f99b&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-04-18%2F5ad72fee4b17a.jpg"
width="400px" height="400px"/>
<a href="#" class="delete">
X
</a>
</div>
</body>
</html>
1、新建记事本
2、写好html基本结构
3、header 标签内容设置
4、body 内容 填写
5、header 中 style 样式填充
6、保存文件为html
7、用浏览器查看效果