CSS是網(wǎng)頁設(shè)計中必不可少的一環(huán),它不僅可以改變文字的樣式、排版,還可以使圖片圍繞文字。如何讓圖片圍繞文字?我們需要借助到CSS中的float屬性。
img { float: left; /* 圖片向左浮動 */ margin: 10px 20px 10px 0; /* 為圖片添加上右和下的外邊距,使文字不會緊貼著圖片 */ }
以上代碼表示圖片浮動到左側(cè),并在圖片右側(cè)添加一定的外邊距,使得文字不會緊貼著圖片,而是圍繞圖片排列。如果需要讓圖片向右浮動,只需將float屬性的值改為right即可。
另外,如果要讓文字圍繞在圖片的外側(cè),而不是圖片周圍,可以使用CSS中的shape-outside屬性。這個屬性通常需要在浮動布局中才能生效。
img { float: left; margin: 10px 20px 10px 0; shape-outside: url('image-path.png'); }
以上代碼表示圖片向左浮動,并在圖片周圍形成一個非矩形區(qū)域,文字會自動圍繞在這個區(qū)域外。需要注意的是,shape-outside屬性只兼容Chrome和Firefox瀏覽器。
總之,在網(wǎng)頁設(shè)計中,使用CSS讓圖片圍繞文字排版,可以使頁面更有趣味性和可讀性。