大概布局和最左边的盒子制作

<article class="col-md-7">
  <!-- 新闻 -->
  <div class="new">
    <ul>
      <li>
        <a href="#">
          <img src="upload/lg.png" alt="">
          <p>阿里百秀</p>
        </a>
      </li>
      <li>123</li>
      <li>123</li>
      <li>123</li>
      <li>123</li>
    </ul>
  </div>
</article>

/* 让每个盒子宽度占25%，浮动 */
article .new ul li {
  float: left;
  width: 25%;
  /* 25%*4就是100%，不能用margin来弄空白缝隙，只能用padding */
  padding-right: 10px;
  /* 不用担心第一个盒子会被影响，
  第一个盒子放在了后面，层叠性 */
  height: 128px;
}

/* 第一个盒子占50% */
article .new ul li:nth-child(1) {
  width: 50%;
  height: 266px;
}

/* 让a占满，再让图片占满a */
article .new ul li a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background-color: blue;
}

/* 图片占满a */
article .new ul li a img {
  width: 100%;
  height: 100%;
}



article .new ul li a p {
  /* 用绝对定位，浮动在a的最下方，
  父亲得用相对relative */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  margin-bottom: 0;
  font-size: 20px;
  color: #fff;
  padding-left: 10px;
  background-color: rgba(0, 0, 0, .5);
}

右边四个，以及解决被后四个影响的第一个盒子

<article class="col-md-7">
  <!-- 新闻 -->
  <div class="new">
    <ul>
      <li>
        <a href="#">
          <img src="upload/lg.png" alt="">
          <p>阿里百秀</p>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="upload/1.jpg" alt="">
          <p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="upload/2.jpg" alt="">
          <p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="upload/3.jpg" alt="">
          <p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="upload/4.jpg" alt="">
          <p>奇了 成都一小区护卫长得像马云 市民纷纷求合影</p>
        </a>
      </li>

    </ul>
  </div>
      </article>

/* 让每个盒子宽度占25%，浮动 */
article .new ul li {
  float: left;
  width: 25%;
  /* 25%*4就是100%，不能用margin来弄空白缝隙，只能用padding */
  padding-right: 10px;
  /* 不用担心第一个盒子会被影响，
  第一个盒子放在了后面，层叠性 */
  height: 128px;
  /* 防止后面四个盒子上下靠近 */
  margin-bottom: 10px;
}

/* 第一个盒子占50% */
article .new ul li:nth-child(1) {
  width: 50%;
  height: 266px;

}

/* 让a占满，再让图片占满a */
article .new ul li a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background-color: blue;
}

/* 图片占满a */
article .new ul li a img {
  width: 100%;
  height: 100%;
}



article .new ul li a p {
  /* 用绝对定位，浮动在a的最下方，
  父亲得用相对relative */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  padding: 0;
  margin-bottom: 0;
  color: #fff;
  /* 这样的话第一个盒子的文字会偏下一点了，这时得修改第一个盒子的padding */
  padding-top: 5px;
  padding-left: 10px;
  font-size: 12px;
  background-color: rgba(0, 0, 0, .5);
}



/* 第一个盒子的p的字体样式特殊 */
article .new ul li:nth-child(1) p {
  font-size: 20px;
  line-height: 40px;
  /* 出去因为公共的padding影响*/
  padding: 0 10px;
}