首页 > 常识 > 互联网 > 网站制作 > 基础与技巧

循环子栏目封面模板一行两列的代码

作者:  时间:2016-07-20
描述:实现循环子栏目封面模板一行两列的方法。
问题1:标签模板已经修改为DIV+CSS,调用更新后,为什么查看封面页源代码仍然是TABLE的?
 
问题2:设置循环子栏目右边距为10后,左侧栏目显示正常,与其右边栏目相距10,但是右边栏目距右边却是20。

具体修改情况:

CSS部分:
.fmvmain_l {
        float: left;
}
.vposition {
        line-height: 28px;
        background: url(/skin/default/images/title_bg1.jpg) repeat-x;
        height: 28px;
        width: 698px;
        margin-right: 10px;
        margin-bottom: 10px;
        padding: 0px 10px;
        border: 1px solid #DEDEDE;
}
.vxh {
        width:350px;
        float: left;
        margin-right: 10px;
}
.vxh_title {
        line-height: 28px;
        background: url(/skin/default/images/title_bg1.gif) 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;
}

一行两列标签页面模板代码:
<div class="vxh">
<div class="vxh_title"><span>[!--the.classname--]</span><a href="[!--the.classurl--]">更多&gt;&gt;</a></div>
<div class="box"><ul>
       [!--empirenews.listtemp--]
       <!--list.var1-->
       [!--empirenews.listtemp--]</ul>
</div>
</div>

列表内容模板没有改变:
<li><a href="/shuma/1184.html" title="[!--oldtitle--]">[!--title--]</a> <span>[!--newstime--]</span></li>

封面模板调用布局:
  <div class="vfmmain_l">
    <div class="vposition">当前位置:[!--newsnav--]</div>
    [listsonclass]'selfinfo',5,40,0,0,13,0,0,0[/listsonclass]
    <div class="vclass_s">
      <script src="/d/js/js/search_news1.js"></script>
    </div>
  </div>

关于问题1:修改刷新封面页面后,源代码还是TABLE的
<div class="vmain">
  <div class="vmain_l">
    <div class="vposition">当前位置:<a href="/">首页</a>&nbsp;>&nbsp;<a href="/host/">主机空间</a></div>
    <div class="vxh">
<table width="99%" border="0" cellspacing="1" cellpadding="0" class="title">
<tr>
<td><strong>主机类型</strong></td>
<td align="right"><a href="/host/type/">更多&gt;&gt;</a></td>
</tr>
</table>
<table width="99%" border="0" cellspacing="1" cellpadding="0" class="box">
<tr>
<td><ul>
       
       <li><a href="/host/type/hh/20091003/10.html" title="豪华一型">豪华一型</a> <span>10-03</span></li>
       
       <li><a href="/host/type/hx/20091003/9.html" title="和谐一型">和谐一型</a> <span>10-03</span></li>
       
       <li><a href="/host/type/bz/20091003/8.html" title="标准一型">标准一型</a> <span>10-03</span></li>
       
       <li><a href="/host/type/jy/20091003/7.html" title="简约一型">简约一型</a> <span>10-03</span></li>
       
</ul>
</td></tr>
</table>
</div><div class="vxh">
<table width="99%" border="0" cellspacing="1" cellpadding="0" class="title">
<tr>
<td><strong>主机应用</strong></td>
<td align="right"><a href="/host/zjyy/">更多&gt;&gt;</a></td>
</tr>
</table>
<table width="99%" border="0" cellspacing="1" cellpadding="0" class="box">
<tr>
<td><ul>
       
</ul>
</td></tr>
</table>
</div>    <div class="vclass_s">
      <script src="/d/js/js/search_news1.js"></script>
    </div>
  </div>
  <div class="vmain_r">
    <div class="vtitle_r"><span><a href="tech" target="_blank">客户案例</a></span><a href="tech" target="_blank">更多...</a></div>
    <div class="vlist_r"></div>
    <div class="vjj"></div>
    <div class="vtitle_r"><span><a href="tech" target="_blank">推荐资讯</a></span><a href="tech" target="_blank">更多...</a></div>
    <div class="vlist_r"><li><a href="/host/type/hh/20091003/10.html" title="豪华一型">豪华一型</a></li><li><a href="/host/type/hx/20091003/9.html" title="和谐一型">和谐一型</a></li><li><a href="/host/type/bz/20091003/8.html" title="标准一型">标准一型</a></li><li><a href="/host/type/jy/20091003/7.html" title="简约一型">简约一型</a></li> </div>
    <div class="vjj"></div>
    <div class="vtitle_r"><span><a href="tech" target="_blank">热点点击</a></span><a href="tech" target="_blank">更多...</a></div>
    <div class="vlist_r">
      <ol class="rank">
        <li class="no1"><a href="/host/type/jy/20091003/7.html" title="简约一型">简约一型</a></li><li class="no2"><a href="/host/type/hh/20091003/10.html" title="豪华一型">豪华一型</a></li><li class="no3"><a href="/host/type/hx/20091003/9.html" title="和谐一型">和谐一型</a></li><li class="no4"><a href="/host/type/bz/20091003/8.html" title="标准一型">标准一型</a></li>      </ol>
    </div>
  </div>
</div>
关于问题2:循环栏目在总页面的左侧,总体宽度是730,我本来设置每个子栏目355宽,结果只能为350才一行两列。如果把vxh宽度定义为355,或者大一点就不成两列显示了!右边的子栏目右边只达到了720的位置,距730少10.为什么宽出这个10?

也是每次显示一条记录。仔细看了下,似乎两个子栏目并排时,除了对右边栏目边距是10外,对整个右侧部分还有10的边距。这就不合理了。该怎么修改啊?!同志们~~~

从手机浏览器访问《生活宝典》

站内搜索
  • 封面模板循环子栏目一行两列DIV+CSS
  • 关于循环子栏目数据标签(listsonclass)的使用
  • 循环子栏目封面模板一行两列修改问题
  • 封面模板循环子栏目一行两列DIV+CSS
  • 微商帮
    世界网站大全
    中国科研团队:大象的长鼻子是如何越变越长了
    中国科研团队:大象的长
    自己是否能够像自己想的那样做成一件事,身旁人的判断会比自己准确
    自己是否能够像自己想
    火宫殿:吃喝玩乐看,烧香拜神佛,红火的庙会经济
    火宫殿:吃喝玩乐看,烧香
    眼见为实也不为实,更须谨慎看到的并非全貌
    眼见为实也不为实,更须