直接使用代码

图片素材

css代码

   <style type="text/css">
  /*nav*/
  #list-news  .nav { margin:30px auto; text-align:center;margin-bottom:0;}
  #list-news  .nav ul {display:inline-block;font-size:14px; }
  #list-news  .nav ul li { float:left; margin-left:30px; line-height:35px;border-bottom:#efefef 3px solid; }
  #list-news  .nav ul li a { color:#666;}
  #list-news  .nav ul li:hover ,  #list-news  .nav ul li.current  { color:#498cf9; border-bottom:#498cf9 3px solid; }
  /*new-list*/

  #list-news .new-list ul:nth-child(1) li{border-top:1px solid #ccc;}
  #list-news .new-list ul li { padding:30px 0; border-bottom:1px solid #ccc; }
  #list-news .new-list ul li:hover { background:#f2f2f2;}
  #list-news .new-list ul li i {background:url(/Public/images/list/bg_02.png) no-repeat  center ;   display:none;  display:block; margin-top:30px;  }  
  #list-news .new-list ul li p.ti { font-size:15px; color:#666;}
  #list-news .new-list ul li p.content{ font-size:13px; color:#999;}
  #list-news .new-list ul li em{ background:url(/Public/images/list/bg_04.png) no-repeat  center; display:block;width:70px;text-align:center; line-height:32px; font-style:normal; font-size:18px;color:#fff;}
  @media (min-width: 1200px){
    #list-news .new-list ul li em{ line-height:32px;; font-size:18px;color:#fff;}   
  }
  @media (max-width: 768px){
    #list-news .new-list ul li em{ font-size:9px; width:100%;background-size:100% 100%; line-height:10px; }   
  }
</style>

HTML+JS代码

    <div class='container'>
     <div id="list-news">
            <div class="nav ">
                <ul >
                    <li class="current"><a href="#">全部</a></li>
                      <li><a href="#">新闻</a></li>
                    <li><a href="#">公告</a></li>
                    <li><a href="#">活动</a></li>
                  </ul>
              </div><!--nav end-->

            <div class="new-list">
                <ul>
                  <volist name='listArticle' id="vo">
                    <li class="my-item pad-x20">
                        <a href="#">
                             <div class="row">
                              <div class="col-md-1 hidden-xs"><em>新闻</em></div>
                              <div class="col-md-10 col-xs-12">
                                <div class="pad-left15">
                                    <p class="ti">2018-10-08  这是测试标题名称</p>
                                    <p class="content">要问王者荣耀之中，天美设计最成功的英雄是哪一个？第一个要说的就是亚瑟。可能很多朋友都会忽略这个英雄， 因为他是天美免费送的，所以就会给人一种“不值钱”的感觉。但我个人认为他却是天美...</p>
                                </div>
                             </div>
                               <div class="col-md-1 hidden-xs"><i>&nbsp;</i></div>
                            </div>
                            </a>
                      </li>
                    </volist>
                  </ul>
              
              </div><!--new-list end-->
          </div>
 </div>