注册 登录
编程论坛 → ASP技术论坛

紧急求助!

lichangcheng 发布于 2008-04-24 17:40， 519 次点击
asp如何按照下面进行排版
  
４个图片为一组
大图为四个小图中的一个
  
如图所示

" border="0" />

 
 
  
  
  
如上图为一组
一组一组向下循环
5 回复
#2
dhdhzzw2008-04-24 17:47
应该是js实现的。。
#3
yms1232008-04-24 18:20
1列2行的表格嵌套一行4列的表格
<table>
<tr>
   <td>大图</td>
</tr>
<tr>
   <td>
     <table>
        <tr>
           <td>1</td><td>2</td><td>3</td><td>4</td>
        </tr>
     </table>
   </td>
</tr>
</table>
#4
lichangcheng2008-04-24 20:08
但是下面还有循环呢啊＼
是上面的一组的循环
这是网站地址
http://titanspa.co.kr/main/main.html
循环怎么写呢？

[[it] 本帖最后由 lichangcheng 于 2008-4-24 20:10 编辑 [/it]]
#5
madpbpl2008-04-24 22:46
和这个有些类似，我参考qq上写的
<STYLE>#fods UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
P {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.dis {
DISPLAY: block
}
.undis {
DISPLAY: none
}
#bimg {
FILTER: progid:DXImageTransform.Microsoft.Fade ( duration=0.5,overlap=1.0 ); WIDTH: 370px; HEIGHT: 275px
}
#bimg IMG {
BORDER-RIGHT: #a2a2a2 2px solid; BORDER-TOP: #a2a2a2 2px solid; MARGIN-TOP: 6px; BORDER-LEFT: #a2a2a2 2px solid; WIDTH: 353px; BORDER-BOTTOM: #a2a2a2 2px solid; HEIGHT: 252px
}
#simg IMG {
BORDER-RIGHT: #a2a2a2 2px solid; BORDER-TOP: #a2a2a2 2px solid; MARGIN-BOTTOM: 6px; BORDER-LEFT: #a2a2a2 2px solid; WIDTH: 68px; BORDER-BOTTOM: #a2a2a2 2px solid; HEIGHT: 42px
}
#simg IMG.s {
BORDER-RIGHT: #f58345 2px solid; BORDER-TOP: #f58345 2px solid; BORDER-LEFT: #f58345 2px solid; BORDER-BOTTOM: #f58345 2px solid
}
#imginfo TABLE {
FONT-SIZE: 12px; LINE-HEIGHT: 20px
}
#imginfo TABLE TD {
PADDING-RIGHT: 16px; PADDING-LEFT: 16px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}
#imginfo TABLE .t {
FONT-WEIGHT: bold; FONT-SIZE: 14px; HEIGHT: 26px
}
#imginfo TABLE .i {
TEXT-INDENT: 2em
}
#imginfo A {
COLOR: #000; TEXT-DECORATION: none
}
#imginfo A:hover {
COLOR: #f00; TEXT-DECORATION: underline
}
#fods #Fod_list DIV {
FONT-WEIGHT: bold; FLOAT: left; CURSOR: pointer; LINE-HEIGHT: 20px; TEXT-ALIGN: center
}
#fods #Fod_list P {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 4px; PADDING-TOP: 0px; HEIGHT: 20px
}
#fods #Fod_list SPAN.a {
PADDING-RIGHT: 0px; PADDING-LEFT: 8px; FONT-WEIGHT: bold; FONT-SIZE: 14px; BACKGROUND: url(http://mat1.) no-repeat left 50%; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 96px; COLOR: #236a00; PADDING-TOP: 2px; TEXT-ALIGN: left
}
#fods #Fod_list SPAN.b {
PADDING-RIGHT: 0px; PADDING-LEFT: 8px; FONT-WEIGHT: bold; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 168px; COLOR: #999999; PADDING-TOP: 2px; TEXT-ALIGN: right
}
#fods #Fod_list P.b {
FLOAT: left; WIDTH: 4px; HEIGHT: 20px
}
#fods #Fod_list DIV.cardb {
BACKGROUND: url(http://mat1.); WIDTH: 66px; COLOR: #505050; PADDING-TOP: 5px; HEIGHT: 21px
}
#fods #Fod_list .sb {
BACKGROUND: url(http://mat1.); WIDTH: 84px; COLOR: #734e2f; PADDING-TOP: 5px; HEIGHT: 21px
}
#fods #Fod_list DIV.cardj {
FONT-WEIGHT: normal; BACKGROUND: url(http://mat1.); WIDTH: 115px; COLOR: #fff; LINE-HEIGHT: 18px; PADDING-TOP: 4px
}
#fods #Fod_list DIV.cardj A {
COLOR: #fff; TEXT-DECORATION: none
}
#fods #Fod_list .sj {
FONT-WEIGHT: normal; BACKGROUND: url(http://mat1.); WIDTH: 115px; COLOR: #000; LINE-HEIGHT: 18px; PADDING-TOP: 4px
}
#fods #Fod_list .sj A {
COLOR: #000; TEXT-DECORATION: none
}
#fods #Fod_list .sj A:hover {
COLOR: #000; TEXT-DECORATION: none
}
#fods #Fod_list .sb {
BACKGROUND: url(http://mat1.); WIDTH: 84px; COLOR: #734e2f; PADDING-TOP: 5px; HEIGHT: 21px
}
.autotdk01 {
BORDER-RIGHT: #bababa 1px solid; BORDER-TOP: #bababa 1px solid; BORDER-LEFT: #bababa 1px solid; BORDER-BOTTOM: #bababa 1px solid
}
</STYLE>
<!--[if IE]>
<STYLE>#simg IMG {
MARGIN-BOTTOM: 2px
}
</STYLE>
<![endif]-->
<SCRIPT>
function getid(obj)
{
  return document.getElementById(obj);
}
function getNames(obj,name,tij)
{
  var p = getid(obj);
  var plist = p.getElementsByTagName(tij);
  var rlist = new Array();
  for(i=0;i<plist.length;i++)
  {
   if(plist[i].getAttribute("name") == name)
   {
    rlist[rlist.length] = plist[i];
   }
  }
  return rlist;
}
function ri(obj)
{
  var p = obj.parentNode.parentNode.getElementsByTagName("img");
  for(i=0;i<p.length;i++)
  {
   if(obj == p[i])
   {
    return i;
   }
  }
}
function fiterplay(obj,num,t,name)
{
  var fitlist = getNames(obj,name,t);
  for(i=0;i<fitlist.length;i++)
  {
   if(i == num)
   {
    fitlist[i].className = "dis";
   }
   else
   {
    fitlist[i].className = "undis";
   }
  }
}
function ci(obj)
{
  var p = obj.parentNode.parentNode.getElementsByTagName("img");
  for(i=0;i<p.length;i++)
  {
   if(obj ==p[i])
   {
    p[i].className = "s";
   }
   else
   {
    p[i].className = "";
   }
  }
}
function play(obj,n1,n2)
{
  var p = obj.parentNode.parentNode.getElementsByTagName("img");
  var bimg = getid(n1);
  var num = ri(obj);
  try
  {
   with(bimg)
   {
    filters[0].Apply();
    ci(obj);
    fiterplay(n1,num,"div","f");
    fiterplay(n2,num,"table","f");
    filters[0].play();
   }
  }
  catch(e)
  {
    ci(obj);
    fiterplay(n1,num,"div","f");
    fiterplay(n2,num,"table","f");
  }
}
var n=0;
function clearAuto() {clearInterval(autoStart);};
function setAuto(){autoStart=setInterval("auto(n)", 3000)}
function auto()
{
var x = getid("simg").getElementsByTagName("img");
n++;
if(n>4)n=0;
play(x[n],"bimg","imginfo");
}
setAuto();
</SCRIPT>
<SCRIPT language=javascript>
    function fodj(obj)
    {
   var pa = obj.parentNode.parentNode.parentNode.parentNode;
   var pa1 = obj.parentNode.getElementsByTagName("div");
   var ta = pa.getElementsByTagName("tr")[1].getElementsByTagName("ul");
   var na = pa1.length;
   for(i=0;i<na;i++)
   {
    if(pa1[i] == obj)
    {
     pa1[i].className = "sj";
     ta[i].className = "dis";
    }
    else
    {
     pa1[i].className = "cardj";
     ta[i].className = "undis";     
    }
   }
    }
    function fodb(obj)
    {
   var pb = obj.parentNode.parentNode.parentNode.parentNode;
   var pb1 = obj.parentNode.getElementsByTagName("div");
   var tb = pb.getElementsByTagName("tr")[1].getElementsByTagName("ul");
   var nb = pb1.length;
   for(i=0;i<nb;i++)
   {
    if(pb1[i] == obj)
    {
     pb1[i].className = "sb";
     tb[i].className = "dis";
    }
    else
    {
     pb1[i].className = "cardb";
     tb[i].className = "undis";     
    }
   }
    }
   
</SCRIPT>
<TABLE cellSpacing=0 cellPadding=0 width=450 bgColor=#dcdcdc
            border=0>
  <TBODY>
    <TR>
      <TD align=middle width=370 height=275><DIV id=bimg>
        <DIV class=dis name="f"><a
                  href="http://blog.
                  target=_blank><img src="http://img1.
                  border=0></a></DIV>
        <DIV class=undis name="f"><A
                  href="http://blog.
                  target=_blank><IMG src="图片博客_腾讯博客_腾讯网_files/8207585.jpg"
                  border=0></A></DIV>
        <DIV class=undis name="f"><A
                  href="http://blog.
                  target=_blank><IMG src="图片博客_腾讯博客_腾讯网_files/8206965.jpg"
                  border=0></A></DIV>
        <DIV class=undis name="f"><A
                  href="http://blog.
                  target=_blank><IMG src="图片博客_腾讯博客_腾讯网_files/8206813.jpg"
                  border=0></A></DIV>
        <DIV class=undis name="f"><A
                  href="http://blog.
                  target=_blank><IMG src="图片博客_腾讯博客_腾讯网_files/8205842.jpg"
                  border=0></A></DIV>
      </DIV></TD>
      <TD id=simg align=left width=80><A
                  href="http://blog.
                  target=_blank><IMG class=s
                  
                  () src="http://img1.
                  border=0></A> <A
                  href="http://blog.
                  target=_blank><IMG
                  
                  () src="图片博客_腾讯博客_腾讯网_files/8207585.jpg"
                  border=0></A> <A
                  href="http://blog.
                  target=_blank><IMG
                  
                  () src="图片博客_腾讯博客_腾讯网_files/8206965.jpg"
                  border=0></A> <A
                  href="http://blog.
                  target=_blank><IMG
                  
                  () src="图片博客_腾讯博客_腾讯网_files/8206813.jpg"
                  border=0></A> <A
                  href="http://blog.
                  target=_blank><IMG
                  
                  () src="图片博客_腾讯博客_腾讯网_files/8205842.jpg"
                  border=0></A></TD>
    </TR>
    <TR>
      <TD id=imginfo vAlign=top colSpan=2 height=104><TABLE class=dis height=96 cellSpacing=0 cellPadding=0
                  width=435 align=center bgColor=#e6e6e6 border=0 name="f">
        <TBODY>
          <TR>
            <TD class=t vAlign=bottom align=left>香菱应是红楼第一薄命女</TD>
          </TR>
          <TR>
            <TD class=i
                        align=left>正册：宝钗、黛玉。兼得二人之美，而无有二人之尊，却是贾家第四代长孙媳之秦可卿者，居于正册之末；兼得二人之美，而无有二人之尊，虽根基不俗但后天不济只做了薛家遗妾之香菱者，居于副册之首…[<A
                        href="http://blog.
                        target=_blank>全文</A>]</TD>
          </TR>
        </TBODY>
      </TABLE>
          <TABLE class=undis height=96 cellSpacing=0 cellPadding=0
                  width=435 align=center bgColor=#e6e6e6 border=0 name="f">
            <TBODY>
              <TR>
                <TD class=t vAlign=bottom
align=left>曹颖：在选秀现场感叹悲欢离合</TD>
              </TR>
              <TR>
                <TD class=i
                        align=left>“龙的传人”十六强晋级赛最后一场终于结束了，赛制到后期越来越残酷，看着离开的选手，心里有些难过，其实身为评委，有时也很无奈。心中总觉得有些难以释怀…[<A
                        href="http://blog.
                        target=_blank>全文</A>]</TD>
              </TR>
            </TBODY>
          </TABLE>
        <TABLE class=undis height=96 cellSpacing=0 cellPadding=0
                  width=435 align=center bgColor=#e6e6e6 border=0 name="f">
            <TBODY>
              <TR>
                <TD class=t vAlign=bottom align=left>陈浩民中式婚礼娶“娇妻”</TD>
              </TR>
              <TR>
                <TD class=i
                        align=left>今天给大家爆点“猛料”：下面请看我们《当幸福来敲门》中的搞笑版中西合璧“一妻二夫”制的婚图…[<A
                        href="http://blog.
                        target=_blank>全文</A>]</TD>
              </TR>
            </TBODY>
        </TABLE>
        <TABLE class=undis height=96 cellSpacing=0 cellPadding=0
                  width=435 align=center bgColor=#e6e6e6 border=0 name="f">
            <TBODY>
              <TR>
                <TD class=t vAlign=bottom align=left>许慧欣许嘉凌姐妹私房照</TD>
              </TR>
              <TR>
                <TD class=i
                        align=left>许嘉凌：“记得9月的时候我发了新专辑，开心得不得了，姐姐为了支持我，还带腰伤来为我站台，但是，我对姐姐的那份感谢跟感激都永远深深地放在心里，因为姐姐是最疼我的人…”[<A
                        href="http://blog.
                        target=_blank>全文</A>]</TD>
              </TR>
            </TBODY>
        </TABLE>
        <TABLE class=undis height=96 cellSpacing=0 cellPadding=0
                  width=435 align=center bgColor=#e6e6e6 border=0 name="f">
            <TBODY>
              <TR>
                <TD class=t vAlign=bottom
                    align=left>《士兵突击》中的中国人美国人英国人</TD>
              </TR>
              <TR>
                <TD class=i
                        align=left>袁朗美国人的性格：他不仅穿着美式的军服，更有着一个美国式的思想内核，他爱秀、大方，最不美国的一点是：他借了很多钱给许三多。这是中国的兄弟义气…[<A
                        href="http://blog.
                        target=_blank>全文</A>]</TD>
              </TR>
            </TBODY>
        </TABLE></TD>
    </TR>
  </TBODY>
</TABLE>
#6
lichangcheng2008-04-25 08:08
谢谢楼上的朋友
但是还不是我想要的结果
我要求的是从数据库输出
一组为4个
大图片是4个中的第一个

如何循环
我不知道怎么写啊
1
©2025, BC-CN.NET
电脑版