深山老林

日志内容

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-05-15[原]CSS书写顺序

TAG：CSS 原创经验之谈

整理了一下自己写CSS时的顺序，跟大家分享下。

下表顺序为从上到下，从左到右：
============================
display || visibility
list-style : list-style-type || list-style-position || list-style-image
position
top || right || bottom || left
z-index
clear
float

width
max-width || min-width
height
max-height || min-height
overflow || clip
margin : margin-top || margin-right || margin-bottom || margin-left
padding : padding-top || padding-right || padding-bottom || padding-left
outline : outline-color || outline-style || outline-width
border
background : background-color || background-image || background-repeat || background-attachment || background-position

color
font : font-style || font-variant || font-weight || font-size || line-height || font-family
font : caption | icon | menu | message-box | small-caption | status-bar
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor
============================

风的影子 @ 14:09 | 看个仔细 | 有话要说 6 | 引用 0 | 编辑

2007-05-12[笔记]xsl模版优先级

TAG：XSL 笔记

当一个节点匹配在 XSLT 模板中建立的多个模式（也称为规则）时，处理器就会按照 XSLT 规范中描述的冲突解决指导原则来确定使用哪一个模式。这些指导原则表明，当发生冲突时，会调用优先级最高的模板。然而，确定模板实际优先级的算法还需要附带解释一下。

要确定哪个模板具有最高优先级，处理器首先会消除导入的所有模板（使用 xsl:import 元素）；自动导入的模板比经过导入转换的模板优先级低。然后处理器确定其余模板的优先级值。

可以通过 priority 属性显式指定模板的优先级。例如，以下模板被赋予优先级 1：

<xsl:template match="/foo/bar" priority="1">
   <!-- do something interesting -->
</xsl:template>

如果每个模板都赋予了优先级，则处理器可以使用这个值来确定哪个模板具有最高优先级。如果没有显式指定优先级，则处理器会为模板计算一个默认值。由处理器指定的默认优先级范围是从 -0.5 到 +0.5。基本上，模式越特殊，其默认优先级就越高。由于范围是从 -0.5 到 +0.5，因此如果显式指定一个模板的优先级为 1，就总会超过默认优先级。

Pattern Type	Default Priority	Examples
Node test by type	-0.50	*
		@*
		node
		comment
		text
		processing-instruction
Namespace wildcard	-0.25	ns:*
QName	0.00	foo
		ns:foo
		@bar
		@ns:bar
Processing instruction tests by literal	0.00	processing-instruction('foo')
Everything else	0.50	ns:foo/bar
		ns:foo[@bar]
		foo[contains(.,'Aaron')]
		//foo
Multiple patterns (pattern1 \| pattern2)	Treated as distinct templates, whose priorities are calculated independently

详细列出了如何为现有的不同类型的模式指定默认优先级。只包含按类型的节点测试的模式（例如 *、节点、注释、文本等）是最一般的，因此它们的默认优先级为 -0.5。只包含命名空间通配符 (ns:*) 的模式比较具体，所以它们的默认优先级为 -0.25。只包含限定名测试或常量处理指令测试（例如 foo、ns:foo、@bar、处理指令 ('foo') 等等）的模式分配的默认优先级为 0。而比这些具体的其他模式所分配的默认优先级为 0.5。这意味着具有多个定位步骤 (Location Step)，或具有谓词的任何模式都会自动得到默认优先级 0.5。

仍然存在这样的情况：有多个具有相同优先级的模板匹配给定的节点。当出现这种情况时，处理器可能产生出错信号，也可能选择使用文档中的最后一个模板。这是通常的选择方式。例如，以下 XSLT 片段包含两个模板，它们可以匹配相同的 foo 元素（该元素具有一个 bar 子元素和一个 bar 父元素）。由于两个模板的默认优先级都为 0.5，因此 XSLT 处理器要么产生出错信号，要么选择文档中的最后一个模板 — 在本例中为匹配 bar/foo 元素的模板：

<xsl:template match='foo[bar]' >
  <!-- default priority = .5 -->
</xsl:template>
<xsl:template match='bar/foo'>
  <!-- default priority = .5 -->
</xsl:template>

当然，您最好是避免出现这样的情况。如果您想让处理器在出现冲突时始终使用第一个模板，则只需要将它的优先级设为 1，如下面的代码所示：

<xsl:template match='foo[bar]' priority='1'>
  <!-- would have a default priority = .5 -->
</xsl:template>
<xsl:template match='foo/bar' >
  <!-- default priority = .5 -->
</xsl:template>

正如您所看到的，当出现冲突时，XSLT 需要经过大量处理才能确定调用哪个模板。当大量使用 XSLT 的声明性编程模型时，理解这些规则是很有必要的。

风的影子 @ 22:29 | 看个仔细 | 有话要说 1 | 引用 0 | 编辑

2007-05-10[原]对图像替换的一点想法

TAG：CSS 闲话闲说原创

近来发现对图像替换的方法越来越多人在意了，主要是因为“display:none”对SEO与屏幕阅读器不友好，而且还提出了解决方法，其中比较好的还是利用负值隐藏文字的方式（个人觉得）。然后一味的使用这种方法，真的就正确吗？

其实什么情况下会用到图像替换呢？

logo，做为一个站点的视觉标志，真的应该做成背景吗？
图像按钮（虽然不太建议使用链接去做按钮，但有时看是按钮的东东也只是起来链接的作用），有支持SEO的必要吗？

使用样式背景是为了什么呢？把表现的图片从内容中分离出来，使内容结构合理、完整。即然是装饰性的图片，还需要支持SEO吗？当然，如果你是做垃圾站的话，不在此列。

风的影子 @ 12:43 | 看个仔细 | 有话要说 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个数字。