布局框架

<div class="top"></div>
<div class="header">头部</div>
<div class="content">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

/* CSS书写顺序: 浏览器执行效率更高
1. 浮动 / display
2. 盒子模型: margin border padding 宽度高度背景色
3. 文字样式
*/
* {
  margin: 0;
  padding: 0;
}

.top {
  /* 宽度高度背景色 */
  height: 40px;
  background-color: #333;
}

.header {
  width: 1226px;
  height: 100px;
  background-color: #ffc0cb;
  margin: 0 auto;
}

.content {
  width: 1226px;
  height: 460px;
  background-color: green;
  margin: 0 auto;
}

.left {
  float: left;
  width: 234px;
  height: 460px;
  background-color: #ffa500;
}

.right {
  float: left;
  width: 992px;
  height: 460px;
  background-color: #87ceeb;
}