图片廊"/>
图片廊
html:
<div class="photo-box"><div class="photo"><img src="../images/index_list/7.png" alt=""><span>图片1</span></div><div class="photo"><img src="../images/index_list/6.png" alt=""><span>图片2</span></div><div class="photo"><img src="../images/index_list/8.png" alt=""><span>图片3</span></div><div class="photo"><img src="../images/index_list/9.png" alt=""><span>图片4</span></div></div>
css:
/* 图片廊 */
.photo-box {width: 95%;display: flex;justify-content: space-between;align-items: flex-start;flex-wrap: wrap;margin: 0 auto;box-sizing: border-box;
}.photo {width: 45%;height: 25%;display: flex;align-items: flex-start;flex-wrap: wrap;box-sizing: border-box;margin-top: 2rem;
}.photo img {width: 100%;height: 20%;
}.photo span {width: 100%;display: flex;align-items: center;justify-content: center;padding: 0.5rem 0;font-family: SourceHanSansCN-Medium;font-size: 0.9rem;box-shadow: 0rem 0.2rem 0.2rem 0rem rgba(81, 81, 81, 0.19);font-weight: normal;
}
代码效果:
更多推荐
图片廊
发布评论