直接使用代码

图片素材

无

css代码

      
<style type="text/css">
/*栏目横导航*/
#lanmu_nav ul{  text-align:center}
#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; color:#333}
#lanmu_nav ul li a:hover{ border-color:#56afea; color:#56afea}
#lanmu_nav ul li a.current{ border-color:#56afea; color:#56afea}

/*list_gallery--培训就业*/
.list_gallery a{  color:#333}
.list_gallery a:hover{  color:#56afea}
.list_gallery p{ font-size:16px;background:#0689ca;color:#fff; }
.list_gallery a:hover p{background:#ffae00;}
</style>

HTML+JS代码

     <div class='container'   >
     <div id="lanmu_nav" class="mar-y30">
            <ul>
              <volist name='listArctype' id="vo">
              <!-- <if condition="$vo.typename eq $typename" >class='current</if> -->
             <li><a href="__URL__/list_gallery/typeid/{$vo.id}" >栏目标题</a></li>
            </volist>
                     
            </ul>
          </div>

        <div class="row list_gallery" >
        <volist name='listProduct' id="vo">
          <div class="col-md-4 my-item">
         
                    <a href="__URL__/article_product/id/{$vo.id}">
                    <img src="/Public/images/img32.jpg" width="100%" /> 
                    <p class="text-center line20 pad10">这里书写产品标题</p>
                    </a>
                </div>
             
        </volist>
      </div>
 </div>