CSS3分欄布局插入圖片
在網頁設計中,我們經常會用到分欄布局,當然還有插入圖片的需要。CSS3為我們提供了一些有趣的方法,使我們能夠輕松地實現分欄布局和插入圖片。具體方法如下:
分欄布局:
/* 將容器分為兩個欄 */
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.left-column {
flex-basis: 60%; /* 左側欄占據60%的寬度 */
}
.right-column {
flex-basis: 40%;/* 右側欄占據40%的寬度 */
}
上述代碼將容器(.container)分為兩個欄(.left-column和.right-column),左側欄占據60%的寬度,右側欄占據40%的寬度。
插入圖片:
/* 在容器中插入圖片 */
.container {
background: url("圖片鏈接地址") no-repeat center center;
background-size: cover; /* 圖片自適應容器大小 */
}
上述代碼將一張圖片插入到容器中(.container),并且將圖片自適應容器大小,保證圖片始終填滿整個容器。
使用CSS3分欄布局和插入圖片,可以使網頁更加美觀和有吸引力。您可以根據自己的需要進行優化和調整,使自己的網頁設計更加出色。
上一篇css3凹陷邊框
下一篇CSS3列車行駛動畫代碼