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、点击小图后，成功显示了大图。

点进去没看到图片

我这里给你提供一个思路，（js）

一排显示8个图可以用浮动；

鼠标经过每一张小图显示大图，就是鼠标悬浮事件。有api可以改变图片的大小。悬浮时图片变大，离开时变小。

显示大图，小图隐藏。没有图片，不知道是什么效果。总之在对应事件时修改图片的样式就可以。

1、单独静态html网页，无论加什么内容都需要手动一个一个写的，哪怕一个标点也得手动加上。

2、不想一个一个写，那只能通过程序+数据库。把数据存到数据库中，用程序代码批量读出数据库中的数据。比如百度知道，有成几百万上千万个页面，不可能都手工一个一个修改页面的，都是程序。

3、关于<li>标签问题：这个需要些css样式。在页面加上下面代码

<style>

*{margin:0padding:0}

li{float:leftlist-style:nonetext-align:leftdisplay:inlineoverflow:hidden}

</style>

4、图片问题：页面图片多，最好使用小图（缩略图）。大图影响显示慢，影响用户体验。

5、程序也好，html/css也好，都需要慢慢学习的。只要学就能会。

---