最終效果為下圖，現在通過記號的形式對以下布局進行拆分並編寫筆記。
①header，header具體內容為logo和n**，可以用兩列布局來實現，編寫和，前者設定向左浮動，後者設定向右浮動，n**裡的四個標籤用li實現，因為li是塊級元素，所以通過給li們設定inline-block,weight,height實現水平放置。
②首先設定兩個，使用position布局使兩個元素重疊，乙個放置img，乙個放置遮罩，遮罩的顏色為黑色，透明度為0.5。再使用乙個div放置div和button，位置擺放通過position實現，這裡要實現的是垂直居中的效果，所以top的高度等於影象的一半+header的高度,而不是本身高度的一半
③④先設定乙個1000px居中的div，把三個div放進其中並且設定浮動實現水平擺放，每個div中分別由乙個img和div實現和文字的擺放
⑤這裡比較特別，可以注意到介紹欄的文字很多，這裡要使用的是定義列表實現，原因是文字過多會把側邊的元件給擠下去(由於都是浮動元素),所以這裡使用定義列表，放置,而放置文字,也是使用浮動實現兩列布局
⑥footer，設定好高度之後，直接使用width:100%進行填充，設定text-align為center,line-height為footer的高度之後實現了水平和垂直方向雙居中
重點:1，垂直居中的屬性實現要注意垂直和水平方向有沒有其他元素
2，通過使用定義列表解決文字過多導致側邊元素被擠出的問題，但其實使用限定width的值來防止文字向右擠出的問題也是可以的，只是使用dl列表能夠使語義化的程度更高，提高**的可理解性和可讀性
聖杯布局（三行三列布局）
布局效果類似聖杯，所以叫聖杯布局。就是三行三列布局 核心 主要就是實現中間主體部分中的左右定寬 中間自適應的布局效果 左右定寬 left,right left center right class left div class right div class center div 改變順序，需要把c...
DIV CSS三行兩列經典布局
師阿捷2004年發布在 網頁設計師 上的，乙個非常經典的布局，在ie mozilla和opera瀏覽器中均可以實現居中和高度自適應。完整 如下 在阿捷的 基礎上作了部分修改 title seo參考 xhtml之經典三行兩列布局 title style type text css body heade...
探索CSS實現三行三列等高布局
2006 02 13 07 47 07 author greengnn font size large medium all 第一步 建立乙個結構 xhtml開始於header,footer,and container css先定義container，給將要加入的sideleft，和siderigh...