圖片墻是一種常見的網頁布局方式,通過將多張圖片以瀑布流的方式呈現,達到美觀的效果。而 CSS 則是實現這種效果的重要工具之一。以下是圖片墻 CSS 實現的關鍵代碼:
/* 圖片墻容器 */ .pic-container { column-count: 4; /* 列數 */ column-gap: 20px; /* 列間距 */ } /* 單個圖片 */ .pic-item { display: inline-block; /* 變成行內塊級元素 */ width: 100%; /* 寬度占滿容器 */ margin-bottom: 20px; /* 圖片之間的間距 */ } /* 點擊效果 */ .pic-item:hover { transform: scale(1.05); /* 放大 5% */ transition: all 0.3s ease-in-out; /* 過渡效果 */ } /* 圖片描述 */ .pic-desc { font-size: 14px; /* 字體大小 */ color: #666; /* 字體顏色 */ margin-top: 10px; /* 與圖片之間的距離 */ }
其中,column-count
屬性指定了圖片墻的列數,column-gap
屬性用于設置列間距。而每個圖片元素的 CSS 樣式則包括了寬度、間距、以及鼠標懸停效果等。同時,為了在圖片下方顯示描述,我們需要添加一個額外的元素,樣式中指定其字體大小、顏色等。
值得一提的是,CSS 實現圖片墻的方法并不止于此,還可以使用 JavaScript 插件來簡化操作,或者利用 CSS Grid 或 Flexbox 等新技術,實現更加細致的布局和效果。