任務三 三欄布局

2022-03-06 14:34:00 字數 1161 閱讀 3830

描述左右兩欄寬度固定,中間一欄根據父元素寬度填充滿,最外面的框應理解為瀏覽器。背景色為 #eee 區域的高度取決於三個子元素中最高的高度。

實現

課程多數題目的解決方案都不是唯一的,這和我們在實際工作中的情況也是一致的。因此,我們的要求不僅僅是實現設計稿的效果,更是要多去思考不同的解決方案,評估不同方案的優劣,然後使用在該場景下最優雅的方式去實現。那些最終沒有被我們採納的方案,同樣也可以幫助我們學到很多知識。所以,我們列出的參考資料未必是實現需求所必須的。有的時候,實現題目的要求很簡單,甚至參考資料裡就有,但是背後的思考和親手去實踐卻是任務最關鍵的一部分。在學習這些資料時,要多思考,多提問,多質疑。相信通過和小夥伴們的交流,能讓你的學習事半功倍。

html, body 

html

.team-logo, .main-content, .members-logo

.team-logo

.team-logo img

.team-logo h2

.members-logo

.members-logo ul

.members-logo ul li

.main-content

課程多數題目的解決方案都不是唯一的,這和我們在實際工作中的情況也是一致的。因此,我們的要求不僅僅是實現設計稿的效果,更是要多去思考不同的解決方案,評估不同方案的優劣,然後使用在該場景下最優雅的方式去實現。那些最終沒有被我們採納的方案,同樣也可以幫助我們學到很多知識。所以,我們列出的參考資料未必是實現需求所必須的。有的時候,實現題目的要求很簡單,甚至參考資料裡就有,但是背後的思考和親手去實踐卻是任務最關鍵的一部分。在學習這些資料時,要多思考,多提問,多質疑。相信通過和小夥伴們的交流,能讓你的學習事半功倍。

html 

body

.team-logo, .members-logo, .main-content

.team-logo

.team-logo h2

.members-logo

.members-logo ul

.members-logo ul li

.main-content

百度前端學院任務三 三欄式布局(中間寬度自適應)

方法一 使用float屬性 id content class left div class right div class middle div div 注意 middle塊必須放在最後。left middle樣式設定的關鍵點 整個大的div不設定寬度 兩邊分別設定左右浮動,設定固定寬度 中間的di...

三欄布局與兩欄布局

html 左邊定寬div 右邊自適應,前端前端前端前端前端前端前端前端前端前端div 1.left right 2.left right 3.left right 1.聖杯布局 class container class middle 中間div class left 左側div class rig...

二欄布局以及三欄布局

1 利用 calc 計算寬度的方法。left right 左側定寬 右側自適應 2 利用 float 配合 margin 實現。left right 左側定寬 右側自適應 3 利用 float 配合 overflow 實現。left right 左側定寬 右側自適應 4 利用flex實現。conta...