深山老林

日志内容

2007-05-26[转]两列一边宽度固定,另一边宽度自适应布局

TAG：CSS 代码分享转帖

在iVane的Blog上看到一篇《两列一边宽度固定,另一边宽度自适应布局》，方法很不错，原文如下：

================================================

这个布局其实在实际应用中是经常用到的, 比如我这个blog的布局结构也是这样的, 利用这个布局还可以延伸到三列去, 甚至更多的变化.

布局的难点是如何使宽度固定的一边跟宽度自适应的另一边相排在一行呢? 答案是利用负边距, 自适应的一边先负外间距固定宽度边的宽度值, 然后内嵌的层再外间距相同的宽度值就可以了! 是不是觉得我说得有点乱? 没问题, 看代码就不会乱的了!

结构部分:

<div id="main">
<div id="left_part">
<div id="in_left_part">
左边宽度为自适应, 利用负边距: <br />
#left_part { margin-right: -350px;}<br />
    #in_left_part { margin-right: 350px;}
</div>
</div>
<div id="right_part">
右边固定宽度, 宽度为350px;
</div>
</div>

样式部分:

#main { margin: 30px 0 10px; text-align: center;}
#left_part { float: left; margin-right: -350px; width: 100%;}
#in_left_part { margin-right: 350px; height: 300px; padding-top: 150px;}
#right_part { float: right; background:#292928; width: 350px; height: 300px; line-height: 300px;}

Demo 地址: http://blog.ikshow.cn/demo/2_col/

当然, 两边交换过来也是一样的, 呵呵~

Demo 地址: http://blog.ikshow.cn/demo/2_col/index_2.html

掌握了这个布局, 在面对很多页面时会很有用的~
=========================================================

这样，对于布局的左右自适应和上下自适应就都有了比较好的解决方案了。:)

风的影子 @ 18:07 | 看个仔细 | 有话要说 2 | 引用 0 | 编辑

2007-04-29[转]XSLT之计数循环

TAG：代码分享 SXL 转帖

[http://syre.blogbus.com/logs/5192416.html]

如下代码定义了一个循环模板的例子：

<xsl:template name="for-loop">
<xsl:param name="i"/>
<xsl:param name="count"/>
<xsl:if test="$i <= $count">
<xsl:value-of select="$i" disable-output-escaping = "yes" />
</xsl:if>
<xsl:if test="$i <= $count">
<xsl:call-template name="for-loop">
<xsl:with-param name="i">
<xsl:value-of select="$i + 1"/>
</xsl:with-param>
<xsl:with-param name="count">
<xsl:value-of select="$count"/>
</xsl:with-param>
</xsl:call-template>
</xsl:if>
</xsl:template>

调用方法：

<xsl:call-template name="for-loop">
<xsl:with-param name="i">1</xsl:with-param>
<xsl:with-param name="count">10</xsl:with-param>
</xsl:call-template>

结果输出1-10这10个数字。