代码：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .photo{ width: 700px; height: 400px; margin: 20px auto; background-color: #f79090; } .maxPic{ width: 500px; height: 300px; border: 10px dotted #fff; background-color: #7eccf9; margin: 0 20px; overflow:hidden; float: left; } .maxPic img{ width: 500px; height: 300px; } .minPic{ width: 90px; height: 300px; border: 10px solid #fff; overflow-y: auto; float: left; } .minPic img{ width: 80px; height: 60px; } .maxPic,.minPic{ /*float: left;*/ } </style> </head> <body> <div class="photo"> <h1>电子相册</h1> <div class="maxPic"> <img src="img/pic01.jpg" id="img01" /> <img src="img/pic02.jpg" id="img02"/> <img src="img/pic03.jpg" id="img03"/> <img src="img/pic04.jpg" id="img04"/> <img src="img/pic05.jpg" id="img05"/> <img src="img/pic06.jpg" id="img06"/> <img src="img/pic07.jpg" id="img07"/> </div> <div class="minPic"> <a href="#img01"><img src="img/pic01.jpg" /></a> <a href="#img02"><img src="img/pic02.jpg" /></a> <a href="#img03"><img src="img/pic03.jpg" /></a> <a href="#img04"><img src="img/pic04.jpg" /></a> <a href="#img05"><img src="img/pic05.jpg" /></a> <a href="#img06"><img src="img/pic06.jpg" /></a> <a href="#img07"><img src="img/pic07.jpg" /></a> </div> </div> </body></html>
分析
重要元素：
overflow:hidden 隐藏
overflow-y：auto 纵向排列
<a href=#id值></a>设置锚点，要让所链接的id为id值
float 浮动，脱离文档流，一般让块级元素变为行内元素 使用后记得用clear清除
定位
相对定位 元素不会脱离文档流 元素原有的位置会保留 以自身的位置为目标做较小的偏移 适用场合：实现元素微调的时候 /*position: relative; top: 50px; left: 50px;*/
绝对定位 元素脱离文档流 不占据页面的空间 元素相对于它最近的已定位的祖先元素实现位置的初始化； 如果没有已经定位的祖先元素，那么元素会相对于body或者是html最大的祖先元素实现位置的初始化 已定位：position的属性值设置为：relative absolute fixed 绝对定位的一些影响 绝对定位的元素变成块级元素 绝对定位的元素可以使用margin，但是auto会失效
固定定位 作用；将元素固定在页面可视区的某个位置处，不会随着滚动条变化而移动 固定定位的元素会脱离文档流 固定定位的元素会变成块级元素 固定定位永远是相对于body实现定位
元素覆盖
z-index：值 值越大，越在上，设置负数则在最下面
转载于:https://www.cnblogs.com/awei313558147/p/11180959.html
相关资源：数据结构—成绩单生成器