在網(wǎng)頁設(shè)計中,經(jīng)常需要使用背景色或背景圖來美化頁面。當(dāng)我們需要使用兩個背景框并且要求右對齊時,我們可以利用css中的background屬性和float屬性。
首先,我們需要給兩個背景框的容器設(shè)置一個寬度,并設(shè)置float屬性為right,這樣容器就會向右浮動,而背景框的內(nèi)容就會緊貼著容器的右側(cè)。接著,我們分別給兩個背景框設(shè)置不同的寬度,并分別設(shè)置對應(yīng)的背景色或背景圖。
.container { width: 500px; float: right; } .background-1 { width: 300px; background-color: #ccc; } .background-2 { width: 200px; background-image: url('bg2.png'); }
在代碼中,我們先設(shè)置容器的寬度為500px,float屬性為right。接著,分別定義兩個背景框,其中background-1的寬度為300px,背景色為#ccc,background-2的寬度為200px,背景圖片為bg2.png。這樣,我們就可以實現(xiàn)兩個背景框的右對齊了。
下一篇鐘擺css3動畫