照片墻是一個很受歡迎的網站元素,它能讓你展示你的照片或者其他圖像作品。在這篇文章里,我們會分享一個基于CSS的照片墻代碼,方便你在自己的網站中使用。
/* 第一步是將照片墻容器設置為相對定位 */ .photo-wall { position: relative; } /* 第二步是設置照片寬高,以及間距和背景顏色 */ .photo-wall img { width: 100px; height: 100px; margin: 10px; background-color: #fff; border: 1px solid #ddd; } /* 第三步是設置每個照片的位置 */ .photo-wall img:nth-child(1) { top: 0; left: 0; } .photo-wall img:nth-child(2) { top: 0; left: 120px; } .photo-wall img:nth-child(3) { top: 0; left: 240px; } /* 往下類推 */ /* 第四步是設置鼠標懸浮效果 */ .photo-wall img:hover { opacity: 0.7; } /* 第五步是設置照片墻容器的寬度,使其能夠適應不同大小的照片 */ .photo-wall { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; }
通過這些CSS代碼,你可以創建一個漂亮的照片墻。可以根據自己的需要修改照片的大小和間距,以及設置每個照片的位置。希望這篇文章能對你有所幫助!
上一篇css質感按鈕是什么
下一篇css賬單