為了使網站頁面具有更好的層次和美觀,我們經常會使用CSS樣式制作底部左右分布的效果。使用CSS樣式可以很方便地實現這個效果,下面我們來看一下具體實現方法。
/* CSS代碼 */ .footer { display: flex; justify-content: space-between; /* 左右分布 */ align-items: center; padding: 20px 30px; background-color: #f5f5f5; } .footer .left { font-size: 14px; color: #666; } .footer .right { font-size: 14px; color: #333; text-align: right; }
以上代碼是我們所需要的CSS樣式,我們可以將其直接應用到HTML頁面的底部容器中。其中,我們使用了flex布局,設置了左右對齊和居中對齊。左側內容樣式應用了類名為“left”,右側內容樣式應用了類名為“right”。
在實際使用時,我們只需根據實際情況編寫相關內容,并將其放到左側和右側容器中即可。如下所示:
通過以上步驟,我們就可以在網站中實現底部左右分布的效果了。使用CSS樣式,可以讓我們更加靈活地控制頁面布局,為網站的美觀性和易用性帶來更多可能。
下一篇css底部不固定