版心是指页面的有效使用面积，主要元素以及内容所在的区域，一般在浏览器窗口中水平居中显示。在设计网页时，页面尺寸宽度一般为1200-1920排序。但是为例适配不同分辨率的显示器，一般版心宽度为1000-1200px。例如，屏幕分辨率为1021*768的浏览器，在浏览器内有效可视区域为1000px,所以最好设置版心宽度为1000px。常见的宽度为960px，980px，1000px，1200px
页面一般由头部(header)，导航栏(nav)，焦点图(banner)，内容(content)，页面底部(footer)共5个部分组成
单列布局从上到下分为头部、导航栏、焦点图、内容和底部区域，每个模块各占一行，且宽度和版心相等
下面定义页面结构
页面结构
body{margin:0;padding:0;font-size:24px;text-align:center;}div{width:980px;margin:5pxauto;background:#d2ebff;}#top{height:40px;}#nav{height:60px;}#banner{height:200px;}#content{height:200px;}#footer{height:90px;}.content-left{width:350px;height:200px;background-color:#ccc;float:left;margin:0;}.content-right{width:625px;height:200px;background-color:#CCC;float:right;margin:0;}使用浮动设置了内容区域盒子的显示状态，使用margin:0;清楚之前设置的margin属性不影响内容区域布局
body{margin:0;padding:0;font-size:24px;text-align:center;}div{width:980px;margin:5pxauto;background:#d2ebff;}#top{height:40px;}#nav{height:60px;}#banner{height:200px;}#content{height:200px;}#footer{height:90px;}.content-left{width:200px;height:200px;background-color:#ccc;float:left;margin:0;}.contnt-center{width:570px;height:200px;background-color:#ccc;float:left;margin:0005px;}.content-right{width:200px;height:200px;background-color:#CCC;float:right;margin:0;}在上述代码中使用margin：0005px;将中间内容与左侧内容隔开
通栏布局的关键是在相应模块的外面添加一层div，并将外层div的宽度设置为100%
body{margin:0;padding:0;font-size:24px;text-align:center;}div{width:980px;margin:5pxauto;background:#d2ebff;}#top{height:40px;}#nav{width:100%;height:60px;background-color:#3CF;}.topbar{height:60px;}#banner{height:200px;}#content{height:200px;}#footer{width:100%;height:90px;background-color:#3CF;}.inner{height:90px;}分别将nav和footer的宽度设置为100%
通常网页布局需要遵循以下几个原则
在网页中，常用的命名方式有"驼峰式命名"和“帕斯卡命名"两种