代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.photo{
700px;
height: 400px;
margin: 20px auto;
background-color: #f79090;
}
.maxPic{
500px;
height: 300px;
border: 10px dotted #fff;
background-color: #7eccf9;
margin: 0 20px;
overflow:hidden;
float: left;
}
.maxPic img{
500px;
height: 300px;
}
.minPic{
90px;
height: 300px;
border: 10px solid #fff;
overflow-y: auto;
float: left;
}
.minPic img{
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：值 值越大，越在上，设置负数则在最下面