直接使用代码

图片素材

css代码

             <style type="text/css">
    /*栏目横导航*/

    #lanmu_nav ul li{ list-style:none; width:150px; display:inline-block; margin-right:10px; margin-top:10px; }
    #lanmu_nav ul li a{ display:block; text-align:center; line-height:35px; border:1px solid #ccc;}
    #lanmu_nav ul li a:hover{ border-color:#f00; color:#f00}
    #lanmu_nav ul li a.current{ border-color:#f00; color:#f00}
    </style>

HTML+JS代码

   <div class='container' >

      <h3>新闻中心/News</h3>
      <div id="lanmu_nav">
        <ul>
         <li><a href="" >公司新闻</a></li><li><a href="" >行业新闻</a></li><li><a href="" >产品更新</a></li>  </ul>
      </div>
  
      <volist name='listArticle' id="vo">
       <div class="row pad-y20 bk-bottom my-item">
          <div class="col-md-3 col-xs-12">
             <img src="/Public/images/img32.jpg" class=" img-responsive"/> 
          </div>
          <div class="col-md-9 col-xs-12">
               <div >
                <div class='h10 visible-xs'></div>
                <h4 class='mar-top0'><a href=''>人生短暂，岁月带着年华走</a></h4>
                <p>人生短暂，岁月带着年华走，欢喜悲伤皆浮华，做心里最真实的自己，不虚伪，不做作。过自己最向往的生活，不摧眉，不折腰。感恩有助于自己的人，不忘义，不忘情..</p>
                <a href="" class="my-btn-yellow mar-top10">公司新闻</a>
               </div>
          </div>         
      </div>
      <div class="visible-xs"><br/></div>
    </volist>
 </div>