写静态页面版心网页中主体内容所在区域即为版心，在浏览器窗口水平居中显示，常见宽度值为960px、980px、1190p

版心

网页中主体内容所在区域即为版心，在浏览器窗口水平居中显示，常见宽度值为960px、980px、1190px、1210px等。写页面时，也得根据需求具体来写，没有固定宽度值。

布局流程

确定页面的版心（可视区）
分析页面中的行模块，以及每个行模块中的列模块
制作HTML结构
CSS初始化，然后开始运用了盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。

京东网页

版心宽度

.w{
  margin:auto; // 居中对齐
  width: 1190px;
}

实例

一列固定宽度且居中的实现步骤：

页面版心为960px
页面中的行模块如下图：

写HTML结构：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="main">main</div>
    <div class="footer">footer</div>
  </body>
</html>

CSS部分

.top{
  width:960px;
  height:80px;
  background: #ccc;
  /* 设置居中 */
  margin: 0 auto;    
  border: 1px solid red;
}

margin属性指定一个值时，应用到四个边的外边距上；

指定两个值，顺序为：上下、左右；

指定三个值，顺序为：上、左右、下；

指定四个值，顺序为顺时针方向的，上、右、下、左。

.banner {
  margin: 10px auto;
}
.main{
  margin-bottom: 10px;
}

优化样式代码，集体声明：

.top,
.banner,
.footer{
  width: 960px;
  background: #ccc;
  border: 1px solid black;
}
.top {
  height: 80px;
  margin: 0 auto;
}
.banner {
  height: 80px;
  margin: 10px auto;
}
.main {  
  height: 150px;
  margin: 0 auto;
  margin-bottom: 10px;
}
.footer {
  height: 120px;
  margin: 0 auto;
}