1、图片右边和下边均有6px的空隙
2、在图片和li之间,都有边框和不同的填充色
(一个元素只能有一个边框和背景色,所以可以分别给li和img添加边框和背景色)
3、滑过图片的时候,图片有放大效果
(如果只写滑过效果,部分图片会被掩盖在其他图片的下面,所以需要使用相对定位将图片的层次上提一层)
(相对定位的偏移量可以为负值)
/* 全局变量 */
*{margin: 0;padding: 0;}
li{list-style: none;}
a{text-decoration: none;}
img{vertical-align: middle;}
.list{
width: 620px;
height: 396px;
margin:50px auto;
}
.list li{
width: 116px;
height: 91px;
float: left;
background: #edefee;
border:1px solid #cdcdcd;
margin-right: 6px;
margin-bottom: 6px;
}
.list li img{
width: 100px;
height: 75px;
border: 1px solid #aaaaaa;
padding: 2px;
background-color: #fefff3;
margin:5px;
}
/* 滑过li的时候,图片变化 */
.list li:hover img{
border: solid 1px #000;
width: 200px;
height: 150px;
/* 相对定位 */
position: relative;
/* 定位偏移量 */
top: -38px;
left: -50px;
/* 也可以使用
bottom: 38px;
right: 50px;*/
}
</style>
<ul class="list">
<li>
<img src="./../img/photo01.jpg" alt="">
</li>
<li>
<img src="./../img/photo02.jpg" alt="">
</li>
<li>
<img src="./../img/photo03.jpg" alt="">
</li>
<li>
<img src="./../img/photo04.jpg" alt="">
</li>
<li>
<img src="./../img/photo05.jpg" alt="">
</li>
<li>
<img src="./../img/photo06.jpg" alt="">
</li>
<li>
<img src="./../img/photo07.jpg" alt="">
</li>
<li>
<img src="./../img/photo08.jpg" alt="">
</li>
<li>
<img src="./../img/photo09.jpg" alt="">
</li>
<li>
<img src="./../img/photo10.jpg" alt="">
</li>
<li>
<img src="./../img/photo11.jpg" alt="">
</li>
<li>
<img src="./../img/photo12.jpg" alt="">
</li>
<li>
<img src="./../img/photo13.jpg" alt="">
</li>
<li>
<img src="./../img/photo14.jpg" alt="">
</li>
<li>
<img src="./../img/photo15.jpg" alt="">
</li>
<li>
<img src="./../img/photo16.jpg" alt="">
</li>
<li>
<img src="./../img/photo17.jpg" alt="">
</li>
<li>
<img src="./../img/photo18.jpg" alt="">
</li>
<li>
<img src="./../img/photo19.jpg" alt="">
</li>
<li>
<img src="./../img/photo20.jpg" alt="">
</li>
</ul>