方法一：使用float屬性
id="content">
class="left">div>
class="right">div>
class="middle">div>
div>
注意：middle塊必須放在最後。
.left
.middle
①整個大的div不設定寬度；
②兩邊分別設定左右浮動，設定固定寬度；
③中間的div設定margin-right和margin-left（計算好）
方法二使用position屬性
id="content">
class="left">div>
class="right">div>
class="middle">div>
div>
注：這種方法div擺放的順序就無所謂了。
#content
.left
.right
.middle
①最外面的div設定position：relative；
②左右兩邊的div分別設定position：absolute和相應的定位（top，left，right，bottom值）；
③最中間的div設定margin-right和margin-left。
最後上效果：
百度前端學院任務題 任務3
任務3 三欄式布局 就是這個樣子 總結 思路就是三個div，前兩個浮動，第三個設定margin left，margin right值這樣就可以實現這樣的效果，我在做的過程中遇到的問題 三個div比如 頭像部分class head,個人logo部分class person,內容部分class cont...
百度前端學院任務筆記（一）
1.心得 看完 head first html 與 css 就開始任務。結合任務二著手寫了個簡單的網頁簡歷。一開始認為應該會很easy，沒想到還真不怎麼順利。對元素的定位，字元間距，段落間距的掌握實在糟透了。2.知識點 1 垂直居中 給定元素寬度 可用 具體畫素大小 min width max wi...
百度前端學院 熱身任務攻略
第一關 一筆畫出折線，穿過圖中的9個點，折線個數盡量少。答案 需要少於四線三折 window.location.host 獲取 window.location.pathname 獲取路徑 第二關 上帝為你關上一扇門，卻開啟了一扇窗，我們需要找到窗的高度，才能爬出窗外 一看便知，需要輸入正確密碼 wi...