图片廊

编程入门行业动态更新时间:2024-10-27 04:30:20

图片廊

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;
}