首頁(yè)技術(shù)文章正文

什么是兩列布局？使用兩列布局有哪些優(yōu)點(diǎn)？

更新時(shí)間:2021-04-27 來(lái)源:黑馬程序員 瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif


單列布局雖然統(tǒng)一、有序，但常常會(huì)讓人覺得呆板。所以在實(shí)際網(wǎng)頁(yè)制作過(guò)程中，通常使用另一種布局方式——兩列布局。兩列布局和單列布局類似，只是網(wǎng)頁(yè)內(nèi)容被分為了左右兩部分，通過(guò)這樣的分割，打破了統(tǒng)一布局的呆板，讓頁(yè)面看起來(lái)更加活躍。如圖1所示，就是一個(gè)“兩列布局”頁(yè)面的結(jié)構(gòu)示意圖。

兩列布局

圖1 兩列布局

在圖1中，內(nèi)容模塊被分為了左右兩部分，實(shí)現(xiàn)這一效果的關(guān)鍵是在內(nèi)容模塊所在的大盒子中嵌套兩個(gè)小盒子，然后對(duì)兩個(gè)小盒子分別設(shè)置浮動(dòng)。


猜你喜歡：

什么是網(wǎng)頁(yè)布局？DIV+CSS技術(shù)的布局流程是怎樣的？

頁(yè)面布局的排列規(guī)則是什么？怎樣清除浮動(dòng)標(biāo)簽？

什么是流式布局?什么情況下用？[web前端培訓(xùn)]    

彈性盒布局的4種常用屬性演示【前端技術(shù)文章】

黑馬程序員web前端培訓(xùn)

分享到：
在線咨詢 我要報(bào)名
和我們?cè)诰€交談！