CSS有許多強大的功能,其中一個是能夠圍繞圖片寫文字。這個功能在設(shè)計網(wǎng)站時非常有用。我們可以利用CSS來設(shè)置文字在圖片周圍環(huán)繞的效果,從而創(chuàng)建出令人印象深刻的頁面。
.wrapper{ text-align: justify; } .wrapper img { float: left; margin: 0 20px 20px 0; }
如上所示,這個CSS代碼塊用來實現(xiàn)圖片周圍環(huán)繞文字的效果。我們將文本框中文字的對齊方式設(shè)置為“justify”,這樣這些文字就會環(huán)繞在圖片的周圍。然后我們使用“float: left”來設(shè)置圖片在文本框中的位置。這會使圖片浮動到文本框左側(cè),而且接下來所添加的文字將會環(huán)繞在圖片周圍。
我們接下來需要設(shè)置圖片周圍的margin,這樣,文字就不會出現(xiàn)在圖片的正下方了。在這個例子中,我們設(shè)置了一個20像素的margin。這樣一來,文本框中的文字就會距離圖片20像素遠(yuǎn)。如果你想要更小的邊距,就需要調(diào)整這個數(shù)值。
這段CSS代碼僅僅是一個簡單的例子,它可以用來實現(xiàn)基本的圖片環(huán)繞文字效果。有關(guān)CSS的更高級用法,可以多學(xué)習(xí)一些關(guān)于CSS布局的知識。無論你想要創(chuàng)造怎么樣的效果,都可以使用CSS來實現(xiàn)。