本文目錄導(dǎo)讀：

1. 使用img標(biāo)簽
2. 使用CSS來美化圖片
3. 圖片鏈接與導(dǎo)航
4. 響應(yīng)式圖片設(shè)計(jì)

網(wǎng)頁圖片添加方法

在網(wǎng)頁設(shè)計(jì)中，圖片是不可或缺的元素，它能夠豐富網(wǎng)頁內(nèi)容，提升用戶體驗(yàn)，如何使用CSS來添加網(wǎng)頁圖片呢？

使用img標(biāo)簽

在HTML中，我們可以使用img標(biāo)簽來添加圖片，

<img src="image.jpg" alt="圖片描述">

src屬性表示圖片的路徑，可以是相對(duì)路徑或***路徑；alt屬性表示圖片的描述，用于在圖片無法加載時(shí)顯示。

使用CSS來美化圖片

雖然CSS本身不直接添加圖片，但我們可以使用CSS來美化圖片，

img {
  width: 200px;  /* 圖片寬度 */
  height: 300px; /* 圖片高度 */
  border: 1px solid #000; /* 圖片邊框 */
}

上述代碼將圖片寬度設(shè)置為200像素，高度設(shè)置為300像素，并添加1像素的黑色邊框。

圖片鏈接與導(dǎo)航

在網(wǎng)頁設(shè)計(jì)中，我們可能需要將圖片作為鏈接或?qū)Ш剑?/p>

<a href="http://html4.cn">
  <img src="image.jpg" alt="圖片描述">
</a>

上述代碼將圖片作為鏈接，點(diǎn)擊圖片將跳轉(zhuǎn)到指定的URL。

響應(yīng)式圖片設(shè)計(jì)

為了讓圖片在不同設(shè)備上都能良好顯示，我們可以使用CSS的媒體查詢來實(shí)現(xiàn)響應(yīng)式圖片設(shè)計(jì)，

img {
  width: 100%; /* 圖片寬度為容器寬度 */
  height: auto; /* 圖片高度自動(dòng)調(diào)整 */
}

上述代碼將圖片寬度設(shè)置為容器寬度，高度自動(dòng)調(diào)整，以適應(yīng)不同設(shè)備屏幕大小。

雖然CSS本身不直接添加圖片，但我們可以結(jié)合HTML和CSS來實(shí)現(xiàn)網(wǎng)頁圖片的添加和美化。