网页设计图片大全 html页面里面如何实现点击小图放大查看大图？

2021-04-08

1634

html页面里面如何实现点击小图放大查看大图？需要准备的材料分别有：电脑、浏览器、html编辑器。 1、首先，打开html编辑器，新建html文件，例如：index.html。 2、在index

html页面里面如何实现点击小图放大查看大图？

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码： div{width:72pxheight:72pxbackground:url(small3.png)no-repeatoverflow:hidden}

3、浏览器运行index.html页面，此时成功将矩形图片只显示了正方形部分。

4、点击小图后，成功显示了大图。