经典的行布局
行布局固定宽
行布局某部位自适应
行布局导航随屏幕滚动
上下为0左右居中
margin:0 auto;
页面宽度自适应
width:100%;
垂直水平都居中
position:absolute;
left:50%;
top:50%;
margin-left:-50%width;
margin-top:-50%height;
经典的列布局
两列布局固定
两列布局自适应
三列布局固定
三列布局自适应
圣杯布局
image.png
ps：在设计圣杯布局的开始可以给body一个样式，使该页面缩小到某个宽度就不在自适应缩小了。
并且要注意，圣杯布局的要求是页面主体先显示，也就是说页面主体的div要写在页面左侧的div前。
双飞翼布局
就是变化后的圣杯布局
image.png
表格布局
适用于比较基本的页头，页面内容，页尾布局。
把整个页面当做一个表格。表头是一个<tr>
表尾是一个<tr>
表的内容也用<td>标签嵌套表格来填写。
image.png
image.png
注意：在使用表格时最好尽量少的使用表格嵌套，尽量少的使用跨行和跨列
瀑布流布局
视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
image.png
网友评论