html/css简单的图片浏览
使用工具：webstorm2019.3.3
源码如下：
<html lang="en"><head><meta charset="UTF-8"><title>图片浏览</title><style type = "text/css">#pic{width: 800px;height: 600px;margin: 5px auto;padding: 0px;border: 1px blue;overflow: hidden;}#pic img{width: 800px;height: 600px;}#pic-choose{width: 400px;height: 200px;margin: 10px auto;border: 1px yellow;}#pic-choose img{width: 60px;height: 40px;}ul{list-style: none;}ul li{float: left;margin: 10px;}</style></head><body><!--图片浏览标题--><h1 align="center">请点击以查看图片</h1><!--图片区--><div id = pic><div><img src="image/Goat.jpg" id = "p1"></div><div><img src="image/Goose.jpg" id = "p2"></div><div><img src="image/Husky.jpg" id = "p3"></div><div><img src="image/Salmon.jpg" id = "p4"></div></div><!--图片控件区--><div id = pic-choose><ul><li><a href="#p1"><img src="image/Goat.jpg"></a></li><li><a href="#p2"><img src="image/Goose.jpg"></a></li><li><a href="#p3"><img src="image/Husky.jpg"></a></li><li><a href="#p4"><img src="image/Salmon.jpg"></a></li></ul></div></body></html>
首先建立了图片区，用一个大格子装下了4张图片，设置了overflow：hidden，超出部分隐藏。
接着创建了图片选择的控件，用ul无序列表来实现，并用list-style：none取消了“·”。
最后，给图片区的每一张图片设置一个id，将图片选择区的每一张图片关联上图片区中图片的id，用<ahref="？">来实现，点击控件区的图片，在屏幕上就会显示出所关联的图片。
效果展示：