CSS可以非常方便地移動(dòng)多個(gè)圖片。以下是一些技巧和示例代碼:
/* 給所有圖片加上一個(gè)類名 */ img { margin: 0; padding: 0; border: none; } /* 移動(dòng)所有圖片到右側(cè) */ img.right { float: right; margin: 0 0 0 10px; } /* 移動(dòng)所有圖片到左側(cè) */ img.left { float: left; margin: 0 10px 0 0; } /* 居中所有圖片 */ img.center { display: block; margin: 0 auto; }
如您所見,我們可以通過添加類名,并使用浮動(dòng)和居中技巧,很容易地移動(dòng)一批圖片。要移動(dòng)圖片到左邊,我們給它們添加left
類名,并將float
屬性設(shè)置為left
,以及為了更好地排版設(shè)置左邊距和右邊距。同理,要移動(dòng)圖片到右邊,我們添加right
類名并設(shè)置float
屬性為right
,并設(shè)置右邊距和左邊距。要居中圖片,我們添加center
類名,并將display
屬性設(shè)置為block
,以便應(yīng)用居中技巧,然后將左右邊距都設(shè)置為auto
以達(dá)到居中效果。
在樣式表中,我們還重置了圖片的margin
、padding
和border
屬性,以確保不會(huì)出現(xiàn)多余的邊距或默認(rèn)的裝飾,從而增強(qiáng)了代碼的可讀性和效果。