#大有学问#

今天实际操作上手有一点小变更，就是将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;
}

top部分

nav部分

.nav {
    height: 420px;
  
    background-color: #1c056c;
}

nav

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 p,
.main-bottom p {
    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;
}

  
  
  main-menu
  
  
    精品推荐
  

  
   
     编程入门
   
   
     数据分析师
   
  


  
    机器学习工程师
  
  
    前端开发工程师
  
 

menu行模块和main-top行模块

main-center行模块

main-bottom行模块

footer部分

.footer {
    height: 417px;
}

  
    footer
  

footer部分

下次更新完整代码。拜拜