CSS 是網頁設計過程中不可或缺的一部分，能夠將網頁設計得更加美觀，豐富，生動。在網頁設計過程中添加圖片是一種常見的需求，下面我們來學習如何在頁面右側添加一張圖片。

.image-container {
float: right;  /* 圖片容器向右浮動 */
margin-left: 10px;  /* 圖片容器與其他元素之間的間距為 10px */
}
.image-container img {
max-width: 100%;  /* 圖片寬度最大為圖片容器的寬度 */
height: auto;  /* 高度隨寬度自適應 */
}

首先，我們需要為圖片添加一個容器，這個容器需要設置一個向右的浮動，具體代碼如下：

<div class="image-container">
<img src="your-image-url">
</div>

接著，我們需要設置這個容器與其他元素之間的間距，這里我們設置為 10px，具體代碼如下：

.image-container {
margin-left: 10px;
}

最后，我們需要為圖片設置一些樣式，使其能夠適應容器大小。這里我們設置圖片最大寬度為容器寬度，高度隨寬度自適應，具體代碼如下：

.image-container img {
max-width: 100%;
height: auto;
}

通過以上代碼，我們便可以在頁面右側添加一張圖片，并且與其他元素有一定的間距。