几种常见的布局方式(一)

什么是布局

...
现有的样式不能满足人们的需求

  • 文档流
  • 浮动
  • 定位
    人们需要:
  • 导航栏+内容
  • 导航栏+内容+广告栏
  • 从上到下、从左到右、定宽、自适应......

单列布局

几种常见的布局方式(一)_第1张图片
单列布局.png

实现方式 定宽+水平居中

width: 1000px; //或 max-width: 1000px;
margin-left: auto;
margin-right: auto;

几种范例 可供参考
布局说明 :上下+main是自适应 aside 固定宽高
范例代码如下 :




 
头部自适应
旁边(固定宽高)
内容自适应

效果图如下 :


几种常见的布局方式(一)_第2张图片
单列布局范例.png

下面几种比较简单 记住一点 自适应没有宽度(width)限制 只有高度(height) 或者 自身没有 只有全局设置多宽


 
  
内容

我疑惑地地方 尾部 footer 应该是和内容一样宽啊 为什么会和头部一样呢 */
早上想通了 头部和尾部 子元素都是600px宽 而包裹他的父元素没有设置宽 所以 会自适应
效果图如下


几种常见的布局方式(一)_第3张图片
单列布局通栏.png

范例二


头部
内容

效果图如下


几种常见的布局方式(一)_第4张图片
范例二.png

双列布局

一列固定宽度,另外一列自适应宽度


几种常见的布局方式(一)_第5张图片
双列布局示意图.png

两栏布局时注意加载顺序
右侧固定 左侧及尾部自适应布局 注意代码加载顺序!!!!
范例如下


右侧固定
左侧自适应

效果图如下


几种常见的布局方式(一)_第6张图片
两栏布局 右侧固定.png

范例代码二 两栏及尾部都是自适应


自适应
也是自适应

效果图如下

几种常见的布局方式(一)_第7张图片
两栏自适应布局.png

你可能感兴趣的:(几种常见的布局方式(一))