4.列表页主体 sk_container

• 1 号盒子 sk_container 给宽度 1200，不要给噶度
• 2 号盒子 sk_hd，插入图片即可
• 3 号盒子 sk_bd，里面包含很多的 ul 和 li
• 3 号盒子里面的内容布局已经弄过好多次了，这次偷懒，挂图片

list.html

  <!-- 列表页主体部分 sk_container start -->
  <div class="sk_container w">
    <div class="sk_hd">
      <img src="upload/bg_03.png" alt="">
    </div>
    <div class="sk_bd">
      <ul class="clearfix">
        <li><img src="upload/list.jpg" alt=""></li>
        <li><img src="upload/list.jpg" alt=""></li>
        <li><img src="upload/list.jpg" alt=""></li>
        <li><img src="upload/list.jpg" alt=""></li>
        <li><img src="upload/list.jpg" alt=""></li>
        <li><img src="upload/list.jpg" alt=""></li>
        <li><img src="upload/list.jpg" alt=""></li>
        <li><img src="upload/list.jpg" alt=""></li>
        <li><img src="upload/list.jpg" alt=""></li>
        <li><img src="upload/list.jpg" alt=""></li>
        <li><img src="upload/list.jpg" alt=""></li>
        <li><img src="upload/list.jpg" alt=""></li>
      </ul>
    </div>
  </div>
  <!-- 列表页主体部分 sk_container end -->

list.css

/* 列表页主体部分 sk_container start */
.sk_container .sk_bd ul {
  margin-top: 25px;
}

.sk_container .sk_bd ul li {
  float: left;
  margin-right: 10px;
  width: 292px;
  height: 460px;
  border: 1px solid transparent;
}

.sk_container .sk_bd ul li:nth-child(4n) {
  margin-right: 0;
}

.sk_container .sk_bd ul li:hover {
  border: 1px solid #e12228;
}

/* 列表页主体部分 sk_container end*/