經(jīng)典的行布局
行布局固定寬
行布局某部位自適應(yīng)
行布局導(dǎo)航隨屏幕滾動(dòng)
上下為0左右居中
margin:0 auto;
頁(yè)面寬度自適應(yīng)
width:100%;
垂直水平都居中
position:absolute;
left:50%;
top:50%;
margin-left:-50%width;
margin-top:-50%height;
經(jīng)典的列布局
兩列布局固定
兩列布局自適應(yīng)
三列布局固定
三列布局自適應(yīng)
圣杯布局
image.png
ps：在設(shè)計(jì)圣杯布局的開(kāi)始可以給body一個(gè)樣式硝烂，使該頁(yè)面縮小到某個(gè)寬度就不在自適應(yīng)縮小了圃郊。
并且要注意瘸恼，圣杯布局的要求是頁(yè)面主體先顯示捐腿，也就是說(shuō)頁(yè)面主體的div要寫(xiě)在頁(yè)面左側(cè)的div前款熬。
雙飛翼布局
就是變化后的圣杯布局
image.png
表格布局
適用于比較基本的頁(yè)頭邢滑，頁(yè)面內(nèi)容淳蔼，頁(yè)尾布局坷襟。
把整個(gè)頁(yè)面當(dāng)做一個(gè)表格乡范。表頭是一個(gè)<tr>
表尾是一個(gè)<tr>
表的內(nèi)容也用<td>標(biāo)簽嵌套表格來(lái)填寫(xiě)配名。
image.png
image.png
注意：在使用表格時(shí)最好盡量少的使用表格嵌套，盡量少的使用跨行和跨列
瀑布流布局
視覺(jué)表現(xiàn)為參差不齊的多欄布局晋辆，隨著頁(yè)面滾動(dòng)條向下滾動(dòng)渠脉，這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。
image.png
