NO.7  新闻资讯

直接使用代码

图片素材

css代码

    <style type="text/css">

    #index-news .my-item a h3{color:#444;font-size:18px; font-weight:400;}
    #index-news .more a { text-align:center; display:inline-block; width:260px; padding:20px 0; border:3px solid #1cab43; font-size:18px;color:#1cab43;margin:15px auto;}
    #index-news .more a:hover { background:#1cab43; color:#fff;}
    </style>

HTML+JS代码

  
  <div id="index-news" class="container">
    <h1 class="text-center line60"><i>NO.7</i>&nbsp;&nbsp;新闻资讯</h1>
    <hr/>
    <div class="row-img pad-y10">
      <volist name='listArticle' id='vo'>
        <div class="col-md-6 my-item">
          <div class="pad-top20 ">
            <div class="col-md-6 pm-mobile ">
              <img src="/Public/images/img32.jpg" class="img-thumbnail" width="100%">
            </div>
            <div class="col-md-6 pm">             
                <a href="#">
                  <h3 class="mar-top0 mobile-mar-top15">客房走道的门可以凹入墙面客房</h3>
                  <p class="line20 gray">1、客房走道的门可以凹入墙面客房走道的门可以凹入墙面，客房走道的门可以凹入墙面..门可以凹入墙面..
                  </p>
                </a>               
                <p class="gray">date : 2018-09-18</p>
                <p><span class="label label-success">公司新闻</span></p>             
            </div>
          </div>
        </div>
      </volist>
      <div class="clear"></div>
    </div>
    <!--kuai end-->
    <hr/>
    <div class="more text-center">
      <a href="#">查看更多&nbsp;&nbsp;MORE &rarr;</a>
      <div class="clear "></div>
    </div>

  </div>