在網(wǎng)頁上顯示4個圖片，可以使用CSS的網(wǎng)格布局（Grid Layout）或者Flexbox布局來實現(xiàn)。

我們可以在HTML中創(chuàng)建4個圖片元素，然后給它們添加CSS樣式，下面是一個使用網(wǎng)格布局的例子：

<div class="grid-container">
  <img class="grid-item" src="image1.jpg" alt="Image 1">
  <img class="grid-item" src="image2.jpg" alt="Image 2">
  <img class="grid-item" src="image3.jpg" alt="Image 3">
  <img class="grid-item" src="image4.jpg" alt="Image 4">
</div>

在CSS中定義網(wǎng)格布局：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
}
.grid-item {
  width: 100%;
  height: auto;
}

在這個例子中，我們創(chuàng)建了一個4列的網(wǎng)格，每個圖片元素占據(jù)一個列。grid-template-columns: 1fr 1fr 1fr 1fr; 表示每個列占據(jù)相同的空間，gap: 10px; 設置了每個圖片之間的間隔為10像素。

我們還可以使用Flexbox布局來實現(xiàn)：

<div class="flex-container">
  <img class="flex-item" src="image1.jpg" alt="Image 1">
  <img class="flex-item" src="image2.jpg" alt="Image 2">
  <img class="flex-item" src="image3.jpg" alt="Image 3">
  <img class="flex-item" src="image4.jpg" alt="Image 4">
</div>

在CSS中定義Flexbox布局：

.flex-container {
  display: flex;
  justify-content: space-between;
}
.flex-item {
  flex: 1;
  max-width: 25%;
}

在這個例子中，我們創(chuàng)建了一個Flex容器，每個圖片元素作為Flex項目。justify-content: space-between; 確保圖片之間有間隔。flex: 1; 表示每個圖片元素占據(jù)相同的空間，max-width: 25%; 限制了圖片的***大寬度為容器寬度的25%。

無論是使用網(wǎng)格布局還是Flexbox布局，都可以輕松地在網(wǎng)頁上顯示4個圖片，選擇哪種布局取決于具體的需求和場景。