[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

介绍下制作的几个重点：

1. 图片横排

1) 将li左浮动（float:left），可以使图片横排。

2) 利用li的负右边距（margin-right的负值），使后面的向左移动叠加在前面的li之上。

.recomm li {
float:left;
margin-right:-179px;
overflow:hidden;
white-space:nowrap;
text-align:center;
}

当鼠标指向图片时（li:hover），设定li的右边距为0，则将后面的图片挤向右边。

.recomm li:hover, .recomm .lay-on {
width:249px;
margin-right:0;
}

2. 边框

图片有1px的白色边框，但是需要注意的是，左右相邻的2个图片之间的边框只有1px，右边框是后面图片的左边框。因此实现的思路是：上/下/右边框用ul的边框来实现，而左边框由图片的边框实现。

.recomm ul {
border:1px solid #fff;
border-left:none;
}
.recomm li img {
display:block;
border-left:1px solid #fff;
}

3. 尺寸的计算

此处最容易糊涂的地方是边框与宽度。

图片包括边框，如果设计的宽度为250px，那么图片的实际宽度应为248px（250px-2px）。（高度同理）
由于ul有1px的右边框，因此ul的CSS设定宽度为设计宽度-1px，本例中为599px（600px-1px）。

.recomm ul {
……
height:168px;
width:599px;
}
.recomm li img {
……
width:248px;
height:168px;
}

4. IE内的问题

在IE内，虽然对ul设定了overflow:hidden，但是会出现如图5所示的情况。因此，需要对ul设定position:absolute，以使其能正确隐藏溢出的内容。

5. h5的显示与隐藏

h5内是图片的简要说明，默认状态不显示，当鼠标指向图片的时候会显示出来。

h5是叠加在图片上的，因此使用绝对定位来控制其位置，同时，为了使其相对于li绝对定位，因此给li设定相对定位以产生包含块。

.recomm li h5 {
position:absolute;
bottom:0;
left:0;
……
}
.recomm li:hover h5, .recomm .lay-on h5 {
display:block;
}