首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > asp.net >

依据html规律循环输出,个人感觉有点难

2013-09-05 
根据html规律循环输出,个人感觉有点难先附上HTML代码:ul classjtloli classclearfixspan style

根据html规律循环输出,个人感觉有点难
先附上HTML代码:


<ul class="jtlo">
<li class="clearfix">
<span style="padding-top:190px;">
<img src="images/1.png"/>
</span>

<span style="padding-top:152px">
<img src="images/1.png"/>
<img src="images/1.png"/>
</span>

<span style="padding-top:114px">
<img src="images/1.png"/>
<img src="images/1.png"/>
<img src="images/1.png"/>
</span>

<span style="padding-top:76px">
<img src="images/1.png"/>
<img src="images/1.png"/>
<img src="images/1.png"/>
<img src="images/1.png"/>
</span>

<span style="padding-top:38px">
<img src="images/1.png"/>
<img src="images/1.png"/>
<img src="images/1.png"/>
<img src="images/1.png"/>
<img src="images/1.png"/>
</span>

<span>
<img src="images/1.png"/>
<img src="images/1.png"/>
<img src="images/1.png"/>
<img src="images/1.png"/>
<img src="images/1.png"/>
<img src="images/1.png"/>
</span>

<span style="padding-top:38px">
<img src="images/1.png"/>
<img src="images/1.png"/>
<img src="images/1.png"/>
<img src="images/1.png"/>
<img src="images/1.png"/>
</span>

<span style="padding-top:76px">
<img src="images/1.png"/>
<img src="images/1.png"/>
<img src="images/1.png"/>
<img src="images/1.png"/>
</span>

<span style="padding-top:114px">
<img src="images/1.png"/>
<img src="images/1.png"/>
<img src="images/1.png"/>
</span>

<span style="padding-top:152px">
<img src="images/1.png"/>
<img src="images/1.png"/>
</span>

<span style="padding-top:190px;">
<img src="images/1.png"/>
</span>
</li>
</ul>

上面就是最终输出的html代码,主要是循环img,然后在适当的时候加入span标签。span标签和padding-top的规律是先递增再递减,1/2/3/4/5/6/5/4/3/2/1。


[解决办法]
测试

int begin_top = 190;
                int step = 38;
                int count=190/38;
                string begin_html = string.Empty,end_html=string.Empty;
                begin_html += @"<ul class=""jtlo"">
                                    <li class=""clearfix"">";
                end_html += @"      </li>
                                </ul>";
                for (int i = 0; i <= count; i++)
                {
                    int currentTop = begin_top - i * step;
                    bool flag = currentTop != 0;
                    if (flag)
                    {
                        begin_html += string.Format(@"<span style=""padding-top:{0}px;"">", currentTop);
                        end_html = "</span>" + end_html;


                    }
                    else
                    {
                        begin_html += "<span>";
                    }
                    
                    for (int j = 0; j <= i; j++)
                    {
                        begin_html += @"<img src=""images/1.png""/>";
                        if (flag)
                            end_html = @"<img src=""images/1.png""/>" + end_html;
                    }
                    begin_html += "</span>";
                    if(flag)
                        end_html = string.Format(@"<span style=""padding-top:{0}px;"">", currentTop) + end_html;
                }
                string result = begin_html + end_html;

热点排行