CSS在網頁設計中起到了至關重要的作用，特別是在制作網頁時，它的使用更是不可或缺。當然，我們也可以使用CSS實現簡單的交互效果，如點擊換圖的效果，下面就來介紹具體實現方式。

HTML結構：

<div class="imageBox">
<img src="image01.jpg" alt="圖片01">
</div>
<div class="btnBox">
<button>更換圖片</button>
</div>

以上是HTML結構樣例：一張圖片和一個按鈕。我們需要用CSS實現點擊按鈕去更換圖片的功能。

CSS樣式：

.imageBox {
width: 400px;
height: 300px;
text-align: center;
}
.btnBox {
margin-top: 20px;
text-align: center;
}
button {
font-size: 18px;
padding: 8px 16px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
img + img {
display: none;
}

CSS代碼中，我們定義了兩個類，“imageBox”和“btnBox”，其中“imageBox”設置圖片展示區的寬度、高度中心展示。 "btnBox" 指定按鈕位置。"button" 設置按鈕樣式。"img+img" 選擇器用以切換隱藏和顯示圖片。

JavaScript代碼：

var btn = document.querySelector('button');
var images = document.querySelectorAll('.imageBox img');
btn.addEventListener('click', function () {
var showImage = document.querySelector('.imageBox img:not([style*="display: none"])');
var nextIndex = (Array.from(images).indexOf(showImage) + 1) % images.length;
showImage.style.display = 'none';
images[nextIndex].style.display = 'block';
});

JS代碼中，我們首先獲取按鈕和所有圖片元素。接著，我們給按鈕添加點擊事件，使用“querySelector”方法獲取當前顯示的圖片元素，以及下一張圖片需要顯示的“nextIndex”值。然后，我們使用“style”方法把當前顯示的圖片隱藏，把下一張圖片顯示出來。

實現點擊換圖就是這樣，只需要加入以上HTML、CSS、JS代碼，就能在你的網頁中實現交互效果。注意，CSS和JavaScript代碼可以分別寫在CSS和JS文件里，再引入到HTML文檔中，或者在HTML的head或body部分分別用style和script標簽內寫入。