#大有学问#

今天实际操作上手有一点小变更，就是将top中的nav-bottom模块重划分到main部分中。

这样刚好是一个完整的main，不用重新切割测量大小。

今天写一个大概的行模块布局，详细部分下次再写。

CSS公共属性

/* 清除浏览器默认设置 */
* {
    margin: 0;
    padding: 0;
}
/* 背景颜色 */
body {
    background-color: #f3f6f6;
}
.bGW {
    background-color: white;
}
/* 添加浮动 */
.fL {
    float: left;
}
.fR {
    float: right;
}
/* 清除浮动 */
.clearF {
    overflow: hidden;
}
/* 版心宽度1200px,水平居中 */
.bX {
    width: 1200px;
    margin: auto;
}

top部分

.top {
    height: 101px;
  <!-- 临时背景颜色，方便看清楚盒子位置，填充实际内容时会删除掉该属性 -->
    background-color: antiquewhite;
}

<div class="top bX"></div>

nav部分

.nav {
    height: 420px;
  <!-- 这是吸取的真实背景颜色 -->
    background-color: #1c056c;
}

<div class="nav"></div>

main部分

.mB42 {
    margin-bottom: 42px;
}
.menu {
    height: 60px;
    /* 盒子阴影 */
    box-shadow: 1px 2px rgba(118, 118, 118, 0.2);
    margin-top: 8px;
    margin-bottom: 37px;
}
/* 初阶段用于显示模块位置，实际布局需删除该选择器 */
.main-top,
.main-center div,
.main-bottom div {
    background-color:  white;
}
.main-top {
    height: 603px;
}
.main-center {
    height: 923px;
}
.main-center-top,
.main-center-bottom {
    height: 440px;
}
.main-bottom-top,
.main-bottom-bottom {
    height: 318px;
}

<div class="main bX">
  <!-- main可划分为四个大的行模块 -->
  <!-- menu行模块 -->
  <div class="menu bGW">main-menu</div>
  <!-- main-top行模块 -->
  <div class="main-top mB42">
    精品推荐
  </div>
<!-- main-center行模块 -->
  <div class="main-center mB42">
   <div class="main-center-top mB42">
     编程入门
   </div>
   <div class="main-center-bottom mB42">
     数据分析师
   </div>
  </div>
<!-- main-bottom行模块 -->
<div class="main-bottom mB42">
  <div class="main-bottom-top mB42">
    机器学习工程师
  </div>
  <div class="main-bottom-bottom">
    前端开发工程师
  </div>
 </div>
</div>

footer部分

.footer {
    height: 417px;
}

<div class="footer bGW">
  <div class="bX">
    footer
  </div>
</div>

下次更新完整代码。拜拜