分享

封面模板循环子栏目一行两列DIV+CSS成功实现

 对酒当哥2010 2010-10-04

封面模板循环子栏目一行两列DIV+CSS成功实现

默认分类 2010-06-12 13:31:13 阅读30 评论0   字号: 订阅

大致思路是:主体部分(总宽度980)分左右浮动(.vmain_l和 .vmain_r),
右侧宽250,左侧自然是980-250=730了。右侧不管它了,可以添加版块内容。
左侧宽730分配,上边的“当前位置”720宽,与右侧边距10。
下边的循环部分是,每个子栏目设为左浮动,355宽,右边距10,这样两列宽度就是355*2+10+10=730,正好。
如果循环子栏目部分在总页面右侧,那就设置左边距为10即可,还是左浮动。

这样完美解决了循环栏目与“当前位置”上下照不齐的问题和子栏目间间距问题。
经测试,在IE8,FF,TT浏览器下正常!!!

举一反三,一行N列都是这个方法!


注意:[listsonclass]'selfinfo',5,40,0,0,13,0,0,0[/listsonclass]里边的13,是我复制系统循环子栏目标签模板后,新建立的循环子栏目标签模板ID,不是系统自带的7!

封面模板

<div class="vmain">
  <div class="vmain_l">
    <div class="position">当前位置:[!--newsnav--]</div>
    [listsonclass]'selfinfo',5,40,0,0,13,0,0,0[/listsonclass]
  </div>
  <div class="vmain_r">右侧宽度250不管它了</div>
</div>

CSS:

.vmain_l {
        float: left;
       width: 730px;
}
.vmain_r {
        float: right;
        width: 250px;
}
.position {
        line-height: 28px;
        background: url(/skin/default/images/title_bg1.jpg) repeat-x;
        height: 28px;
        width: 698px;
        margin-bottom: 10px;
        padding: 0px 10px;
        border: 1px solid #DEDEDE;
}
.vxh {
        width:355px;
        float: left;
        margin-right: 10px;
}
.vxh_title {
        line-height: 28px;
        background: url(/skin/default/images/title_bg1.jpg) repeat-x;
        height: 28px;
        width:343px;
        float:right;
        text-align:right;
        padding-right:10px;
        border: 1px solid #DEDEDE;
}
.vxh_title span {
        float:left;
        font-weight:bold;
        width:70px;
        height:28px;
        display:block;
        text-align:center;
        padding-left:10px;
}
.box {系统自定义}


循环子栏目标签模板:

页面模板内容(*)
<div class="vxh">
<div class="vxh_title"><span>[!--the.classname--]</span><a href="[!--the.classurl--]">更多>></a></div>
<div class="box">
<ul>
[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]
</ul>
</div>
</div>

列表内容模板(list.var) (*)——没有改变
<li><a href="[!--titleurl--]" title="[!--oldtitle--]">[!--title--]</a> <span>[!--newstime--]</span></li>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多