效果图:
制作思路：
[html]
1.大div.img_list，套ul>li*3，块元素好布局鸭~
2.li中套a标签，可以点击跳转，a标签中套img标签
[css]
3.布局好了之后，清除所有样式，从0开始吧~
4.引入外部样式，设置div固定的宽、高、背景颜色，溢出就隐藏呗~
5.图片宽度=li的宽度=ul宽度，高度会随宽度一起变化哒~
6.li设置外边距，最后一个图片的下外边距要与不要都可以哦~
代码：
img_list.html
<body>
<div class="img_list">
<ul>
<li>
<a href="javascript:;">
<img src="../img/1.jpg" >
</a>
</li>
<li>
<a href="javascript:;">
<img src="../img/2.jpg" >
</a>
</li>
<li>
<a href="javascript:;">
<img src="../img/3.jpg" >
</a>
</li>
</ul>
</div>
</body>
style.css
/* 实际开发中不要加，为了看清楚ul外面的布局 */
body {
background-color: burlywood;
}
.img_list {
width: 190px;
height: 470px;
background-color: #EDF3F0;
overflow: hidden;
}
.img_list li {
margin-bottom: 9px;
}
/* 溢出的内容可以不处理的，在ul外面 */
/* .img_list li:not(:last-child){
margin-bottom: 9px;
} */
.img_list img {
width: 100%;
}
原文：https://www.cnblogs.com/RenJ/p/13760566.html