CSS 圖片下沉是一種讓圖片在文本的下方浮動顯示的效果。這種效果可以讓頁面內容更加優美,同時也可以引人注目。下面讓我們來一起學習如何實現 CSS 圖片下沉。
要實現 CSS 圖片下沉,需要使用 CSS 中的浮動屬性。下面的 CSS 代碼可以讓圖片向左浮動,并且跟隨文本下移:
/* 設置圖片樣式 */ img { float: left; margin-right: 10px; } /* 設置段落樣式 */ p { clear: left; }在這段代碼中,我們使用了 float 屬性來讓圖片向左浮動,并使用了 margin-right 屬性來設置圖片與文本之間的距離。同時,我們還在 p 標簽中使用了 clear: left 屬性來保證文本不會出現在圖片的左側。 接下來,我們可以在 HTML 代碼中使用上述 CSS 樣式來讓圖片下沉:
這樣,我們就完成了 CSS 圖片下沉的效果。希望這個簡單的示例代碼能夠幫助大家更好地理解和應用 CSS 圖片下沉效果。這是一段文本,其中包含了一個圖像在其下方浮動顯示。
上一篇css3延遲過渡效果
下一篇css 圖文在一行顯示