然后我们在网页中新建一个div，并新建一个
无序列表并创建4个然后使用浏览器直接打开html文件，查看效果，可以看到我们创建的标签自带有一定的格式，
接下来我们使用下面的代码去除标签的格式，其中：list-style:none表示去除标签的格式width:160px表示设置标签的宽height:240px表示设置标签的高background:#666666表示设置标签的背景色float:left表示设置标签浮动显示，并且为左浮动margin-right:20px表示设置标签右外边距
刷新浏览器中html文件查看效果，
这里我们开始添加动画：
给
标签添加：
transition:transform 0.1s
transform表示变换的属性，0.1上表示表换所需要的时间另外给标签添加鼠标滑动属性
li:hover{cursor:pointertransform:translate(0,-10px)}
cursor:pointer表示鼠标滑过显示为小手形状
transform:translate(0,-10px)translate表示移动，第一个参数为水平移动值，第二个参数为垂直移动值，
进入浏览器直接查看效果，如下图实现了鼠标滑过块，块上移的动画特效，如下图：
外层div 绝对定位postion:relative有文字的div相对定位position:absolutetop值设置好
然后鼠标移动上外层div 的时候
有文字的div ,把top值设置为0px 具体值你自己调节 然后再来个过渡效果 transition：all 2s ease
1、将对应的大图小图存放在同一个li标签中（鼠标悬浮到小图时，方便定位到大图）。
2、内部样式中利用"display:none"隐藏大图所在div。
3、鼠标悬浮到相应区域时，修改同li标签下大图所在div的display属性("display:block")。
小结：1、最上层的div必须定位，否则无法约束子元素。
2、li标签设置浮动时，图片会重叠，无法排成一列。浮动必须落实到图片。
3、小照片放在span标签中，变成了内联元素。需为其添加"display: block"转换为块级元素，才能设置图片外边距.
以下是代码：
[html] view plain copy
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px
padding: 0px }
/*相框背景*/
#all{
width: 800px
height: 800px
background: greenyellow
position: relative
/*父元素必须定位，否则无法约束子元素*/
}
/*相册大图*/
#all ul li .big img{
width: 500px
height: 400px
}
#all ul li .big{
position: absolute
left: 70px
top: 130px
display: none/*内部样式中隐藏大图所在div*/
}
/*小图设置*/
#all ul li .smallhover img{
width: 70px
height: 50px
position: absolute
right: 100px
float: left/*设置浮动，可使图片排成一列*/
}
#all ul li .smallhover{
/*因为小照片放在span标签中，变成内联元素。设置display: block将其转换为块级元素，才能设置图片外边距*/
display: block
margin-top: 40px
overflow: hidden
}
/*实现效果，鼠标悬浮在小图片时，相应的大图片显示*/
#all ul li:hover .big{
display: block
}
</style>
</head>
<body>
<div id="all">
<ul>
<li>
<!--小图-->
<span class="smallhover"><img src="img/lotus1.jpg" /></span>
<!--大图-->
<div class="big" style="display: block" >
<!--设置初始图片-->
<img src="img/lotus1.jpg" />
</div>
</li>
<li>
<span class="smallhover"><img src="img/lotus2.jpg" /></span>
<div class="big"><img src="img/lotus2.jpg" /></div>
</li>
<li>
<span class="smallhover"><img src="img/lotus3.jpg" /></span>
<div class="big"><img src="img/lotus3.jpg" /></div>
</li>
</ul>
</div>
</body>
</html>
