直接使用代码

图片素材

点击下载本素材所包含的图片，js文件

css代码

  <style>
.m-verification{border-radius:10px;position:relative;z-index:3;background-color:#fff;height:220px;box-shadow:0 10px 15px 0 rgba(113,113,113,.15);margin-bottom:92px;margin-top:-30px}

.m-verification .newsh1{overflow:hidden;height:100%}
.m-verification .newsh1 .con{padding-top:30px;padding-left:36px}
.m-verification .newsh1 .con h3{padding-left:25px;font-size:18px;color:#000;font-weight:400;background-repeat:no-repeat;background-position:left center;margin-bottom:8px;overflow:hidden;margin-top:0;}
.m-verification .newsh1 .con h3 a{display:block;float:right;font-size:14px;line-height:27px;margin-right:15px;color:#f77026}
.m-verification .newsh1 .s1{position:relative}
.m-verification .newsh1 .s1:after{content:'';display:block;position:absolute;right:0;top:77px;width:1px;height:110px;background-color:#e3e3e3}
.m-verification .newsh1 .con li a{display:block;padding-left:20px;background:url(http://www.bootfastui.cn/img/2021/0513-2/pic-h3.jpg) left center no-repeat;font-size:14px;line-height:32px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
</style>

HTML+JS代码

  <img src="http://www.bootfastui.cn/img/2021/0513-2/banner.jpg" width="100%" alt="">
<div class="row-1">
  <div class="container">
    <div class="m-verification row">
      <div class="newsh1">
        <div class="col-md-6">
          <div class="con s1">
            <h3 style="background-image:url(http://www.bootfastui.cn/img/2021/0513-2/h7.png)"><a href="http://www.bootfastui.cn">更多&gt;</a>最新通知
            </h3>
            <ul>
              <li><a href="http://www.bootfastui.cn">2019艺考生文化课百日学案开启预售</a></li>
              <li><a href="http://www.bootfastui.cn">2019版艺考生文化课百日学案官方购买渠道</a></li>
              <li><a href="http://www.bootfastui.cn">2018年春节期间预定通知</a></li>
              <li><a href="http://www.bootfastui.cn">2019年春节期间暂停发货公告</a></li>
            </ul>
          </div>
        </div>
        <div class="col-md-6">
          <div class="con">
            <h3 style="background-image:url(http://www.bootfastui.cn/img/2021/0513-2/h8.png)"><a href="http://www.bootfastui.cn">更多&gt;</a>艺考政策
            </h3>
            <ul>
              <li><a href="http://www.bootfastui.cn">2019艺考：播音主持专业的考生不知道这4点就亏了</a></li>
              <li><a href="http://www.bootfastui.cn">2019年艺考生必看：九大美院2018校考情况</a></li>
              <li><a href="http://www.bootfastui.cn">艺术生文化课复习10大误区</a></li>
              <li><a href="http://www.bootfastui.cn">艺考生文化课复习的4个方法</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>