在为大家介绍栅格布局原理之前, 先带领大家了解一般的 html 页面布局. 在页面布局中依次拥有以下几个板块: 页头 header, 滚动图片 banner, 主体部分 main, 页脚 footer. 其中页头包含 logo 及导航栏 nav, 主体部分左右排布分为左侧 content 主题内容板块及右侧 sideBar 侧边栏板块. 正如图 1 所示:
图 1 页面主要模块
所以, 常见的 div 布局代码如下:
为什么笔者要给大家介绍这个基本的盒子模型呢? 是为了让大家了解一个页面中基本的几大模块是哪些或者说基本要有哪些元素, 大家了解了之后就知道该把不同的内容放在各自不同的布局位置上, 不要犯一些常识性的错误.
来源: http://www.bubuko.com/infodetail-3358720.html