HTML如何在图片右上角添加关闭按钮

2025-10-19 15:43:14

1、1.在电脑桌面新建一个记事本

HTML如何在图片右上角添加关闭按钮

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

HTML如何在图片右上角添加关闭按钮

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

HTML如何在图片右上角添加关闭按钮

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

HTML如何在图片右上角添加关闭按钮

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

HTML如何在图片右上角添加关闭按钮

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

HTML如何在图片右上角添加关闭按钮

HTML如何在图片右上角添加关闭按钮

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、用浏览器查看效果

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢