响应式首页产品两栏元组U120

 

HTML代码已调好易优标签，要BP标签自己改一下大同小异:

{eyou:channelartlist typeid='20'}
<div class="pro120">
<div class="con120 clearfix">
<div class="in-prd-cate120">
<div class="tit120">{eyou:field name='typename' /}<small>{eyou:field name='englist_name' /}</small></div>
<ul>
{eyou:channel type="son" row="8" id="field"}
<li> <a href="{$field.typeurl}">{$field.typename}</a> </li>
{/eyou:channel}
</ul>
</div>
<div class="in-prd-con120">
<div class="in-prd-top120"> <a href="{eyou:field%20name='typeurl'%20/}" class="more120">MORE</a>
<ul class="prd-menu clearfix">
<li><a href="javascript:;">最新产品</a> </li>
</ul>
</div>
<div class="ey-con120">
<ul class="list-120 clearfix">
{eyou:arclist orderby='new' row='6' titlelen='30'}
<li>
<div class="wrap120"> <a href="{$field.arcurl}" title="{$field.title}" class="img-cover120"><span style="background-image: url({$field.litpic});"></span></a>
<div class="text120">
<h4><a href="{$field.arcurl}" title="{$field.title}">{$field.title}</a></h4>
<p> <a href="{$field.arcurl}" title="{$field.title}" class="bt120">查看详情</a> </p>
</div>
</div>
</li>
{/eyou:arclist}
</ul>
</div>
</div>
</div>
</div>
{/eyou:channelartlist}

 

CSS样式代码：

 

使用说明：

将代码放入对应位置就是可实现演示效果！(加放VIP解锁更多福利)