body {background: #ccc;}
/* head部分定义 */
.head {padding: 20px;text-align: center;background: #eee;max-width:100%;margin: 0 auto;font-size: 28px;font-weight:800;}
/* Head 手机端 */
@media (max-width: 600px) {
.head {padding: 10px;font-size: 24px;width:100%;max-width: 800px;
    padding: 5px 0 5px 0;}
}

/* 自适应手机样式 */
@media (max-width: 600px) {
  body {padding: 0 10px; }
  header {flex-direction: column;align-items: flex-start; }
  main {flex-direction: column; }
}

/* 主体部分定义 */
.big {
  max-width: 800px; 
  height: auto;
  margin: 10px auto;
}

/* 下方三个层的默认样式 */
.left {float: left;width:calc(100% / 3);}
.middle,.right {float: left;width:calc(100% / 3);}
.left,.right,.middle{background: #eee;}
.left ul,.right ul,.middle ul{margin:0 auto;}
/* 下方三个层手机端 */
@media (max-width: 600px) {
.left, .right,.middle{width: 100%;}
}
.left ul li,.right ul li,.middle ul li {height: 35px;line-height: 35px;
}

  /* foot部分定义 */
.foot {
  width: 100%;
  max-width: 800px;
  padding: 5px 0 5px 0;
  height: 35px;
  line-height: 35px;
  margin: 10px auto;
  text-align: center;
  font-size: 16px;
  background: #eee;
}
.foot a { text-decoration: none; margin:0 5px; color: #333;font-weight:700; }
.foot a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .foot {font-size: 14px;}
}