直接使用代码

图片素材

css代码

    <style type="text/css">
#list-news h1.top { text-align:center; margin-top:30px; margin-bottom:10px; font-size:32px; color:#a4b28f; font-weight:500; } 
#list-news p.ti {text-align:center;color:#a4b28f;margin:0px; }
#list-news .content { background:#f8f8f8; padding:10px 30px; margin-top:30px; box-shadow:0 0 5px #ccc}
#list-news .content h3 a { color:#666;}
#list-news .content p { font-size:14px; color:#999}
#list-news .content .time { border-left:1px solid #d2cfcf; text-align:center; background:url(/Public/images/list/bg_02.png) right center no-repeat;}
#list-news .content .time h1 { color:#999; margin-bottom:0;}
#list-news .content .time p { margin:0 auto; padding-bottom:20px;}
#list-news .content:hover{ background:#096;box-shadow:0 0 5px #F90}
#list-news .content:hover h3 a{ color:#fff}
#list-news .content:hover p{ color:#fff}
#list-news .content:hover h1{ color:#fff}
#list-news .content:hover .time { background:url(/Public/images/list/bg_022.png) right center no-repeat;}
</style>

HTML+JS代码

             <div id="list-news" class="container">
            <h1 class="top">新闻动态</h1>
              <p class="ti">NEWS</p>
            <volist name='listArticle' id="vo">
            <div class="content my-item">
                <div class="col-md-9">
                      <div class="pad-right30">
                          <h3><a href="#">这是文章测试标题</a></h3>
                          <p>要问王者荣耀之中，天美设计最成功的英雄是哪一个？第一个要说的就是亚瑟。可能很多朋友都会忽略这个英雄， 因为他是天美免费送的，所以就会给人一种“不值钱”的感觉。但我个人认为他却是天美...</p>
                      </div>
                  </div>
                  <div class="col-md-3 hidden-xs">
                    <div class="time">
                        <h1>07.21</h1>
                          <p> 2018</p>
                      </div>
                  </div>
                  <div class="clear"></div>
              </div><!--content end-->
        
        </volist>  
      </div>