CSS雕虫小技:八卦五行布图法介绍

本质和优点



先申明一下,这里不是在谈玄论道,说八卦五行,我只是利用了一下这几个数字传统的知名度,以及阴阳说中问题归纳和状态演化的技法。

这里所说的布图,就是一种将诺干背景小图片合并在一起(传说中的CSS滑动门技术);这里说的布图说的就是如何组织这些零散的小图片。

口诛笔伐:糟糕的绝对位置布图法:

常见的办法是把一堆相关的图片通过绝对位置放在一个文件中,比如【0,0】放置一个编辑按钮,【0,40】放置一个删除按钮【0,60】放置一个保存按钮。等等。

如此最大的问题是:无关的图片被杂乱无章的堆砌在一起。后期的维护将越来越繁琐。最后将是一场噩梦。

那么,我们如何更好的布图呢?

首先,让我们抛弃我们使用绝对位置的习惯,理由是:

1.绝对位置不便记忆:

绝对位置都是一些数字标示,非常难记,相对位置是个有限集合,绝对位置有无限的状态。

2.绝对位置不便适应需求的变更:

比如我们一个小图片,最初是 18*18,于是,我们布图的时候,间隔为20.

但是后来开发了一套大图标皮肤,小图标的大小变成21*21,溢出了。。。,改吧,慢慢改吧,我们有的是时间。。。

3.绝对位置在编辑的时候也比较麻烦:

而相对位置,你可能只要打开你的布局管理器,轻轻点击几下对齐图标。

如果有一些小调整,绝对位置布局的时候,我们要小心的计算出新的布局位置,更新文档,更新相关代码,通知相关工程师。。。。

4.增加沟通成本:

因为绝对位置的无穷性,我们无法给数值表示的相对位置赋予通用的适合的语意,无穷的状态我们需要依赖无穷的文档。

(我们估计没有这种文档,一旦需要调整,打电话问吧,希望你能找对人。。。)。

而相对位置,只有有限的状态,我们可以清晰的给出位置的约定语意。文档的最高境界也就是不需要文档。

5.糟糕的自适应性:

这点不必解释,绝对布图法根本就不具备这一特征。



太极生两仪,两仪生四相,四相生八卦。

最朴素的图标只有一个状态,这很简单,我们制作一张很朴素的图片即可。

然后我们想加上一个鼠标放上去的激活效果。于是我们有了两种状态。这时候,我们可以采用左右两端布图。

之后呢,鼠标按下去是不是也要有一个新的状态?哦,还差点忘了,更重要的,功能禁用了我们也需要一个状态。至此四大天王到齐了,各自找个角落呆着吧。

我们常见的也就是这四种状态:

1.正常:

2.鼠标放上

3.鼠标点击

4.禁用

如果我把这四种状态自左上起,顺时针排列,我们还可以达到一个惊人的自适应性。

当我们只准备了一个图标的时候,吧他做成整幅度的图片,那么四种状态都显示为正常的图标。

需要增加状态2的时候,只需要扩展右段新图片。同样,一切正常(disablle状态不被支持,显示为正常状态,按下和鼠标移上效果一致也是一个理想的巧合)。

当需要鼠标按下的时候,扩展下方图标。同样,一切正常。

这四种状态的组合,我称之为斜四相。对应样式单为 “.quad-x-”

但是,我们的八卦可是有八个方位的,不要轻易浪费了,怎么办呢?

老子说了:”万物负阴而抱阳,冲气以为和”。

这是我们客观世界普遍纯在的规律。

比如,我们有一个展开的图标,那么我们极有可能需要一个关闭的图标。我们有一个保存按钮,那么,我们极有可能也需要一个打开的功能。

这两类事物相互对立的东西必然有紧密关联,完全应该安排在一起。

于是,我们吧原来的布局位置,顺时针旋转45度,一个正四相产生了。对应样式为:“.quad-y-”

待续。。。。

邮件模板css及html设计规范

by dp corp.

邮件模板规范

邮件模板,请严格按照下面的规则执行。邮件客户端和Web页面的需求不同,在编写代码的时候,考虑的方向也不一样。

任何同学,有什么问题,可以在下面提出。

!Doctype声明

为了向前兼容和避免某些浏览器的怪癖,使用html5的!doctype声明,格式如下:

<!DOCTYPE HTML>

原则,及思维出发点

1. 不需要考虑DOM节点的精简和结构的优化。

    以完成设计样式为最优先。必要时,不必吝啬使用表格嵌套,不必吝啬使用空的表格元素来占据空间。

2. 宁可冗余,也不可缺少必要定义。

3. 充分利用表格的私有属性来布局。width, height, bgcolor, background, align, valign等

4. 可替代性:

    在编写html的时候,请思考当你页面的所有图片都被屏蔽时,是否用户还能了解页面的主要内容。

    请务必在所有要设置背景图片的元素上,定义背景颜色。

5. 可利用Dreamweaver等工具来协助编写html,但切记,一定要时候做好每行代码的检查。

Mackup

1. 主体页面,包括细节处理,尽量使用<table>布局。

2. 不允许在<tr>元素上定义CSS样式,请将样式尽量定义在<td>元素上。(Gmail等邮件客户端会过滤<tr>上的属性)

3. 禁止使用<style type=”text/css”>来处理主要样式,所有的Web邮件系统都会过滤该标签。因此邮件模板中不能使用伪类(pseudo class)和伪元素(pseudo elements),以及高级选择符。

但是,

我们仍然可以使用<style>来提升一些比较先进的邮件PC客户端的体验,比如伪类。

但,必须使用表格和元素样式来完成所有基本样式和布局。

4. 禁止使用<link>来加载外联CSS

5. 可以使用<div>来实现细节的,具有典型块级元素(block)的布局样式。而尽量避免使用<p>,因为我们不容易清除<p>在不同浏览器的默认样式

6. 注意定义图片的替换文字(alt),及替换文字的颜色。

样式

1. 文字的处理。

font-* 族的CSS属性不允许使用缩写,请分别定义 font-size, font-weight, line-height, font-family(font-family有可能被过滤)

2. 继承性

注意表格不会继承外部的font等属性,请务必,在每个<td>元素上都定义字体属性和颜色。

3. 背景的处理

    不允许使用style=”background:url(http://…)”,请使用<td>的属性(attribute) background=“http://…”。(由于CSS背景图片是一种会影响页面渲染速度的定义,因此大多数Web邮件系统会过滤它。)

  

    背景颜色,也请使用表格的bgcolor属性。

4. 对于复杂样式的处理,可以大胆地、大块地切图。

5. 避免尝试让两个table-cell的元素对齐,如果, 一个元素是用具体的宽度定义(width=”100″),另一个元素是用百分比来定位( width=”50%”)

6. 避免使用list-style来处理列表样式,请使用 “   ” 字符来替代。

7. 避免使用<img>元素拼接的方式,来实现背景大图的分割,尽量使用表格的background

    我们知道,在<img>元素下4px空白的问题。

禁用的,和不建议使用的CSS样式(见参考文献1)

这些样式,大都是可能引起元素偏移到容器外的样式

禁止使用 position, background, float

特别说明:

margin: margin的使用要非常谨慎,不允许使用margin作为重要的布局依据,不允许使用负margin,避免使用非零和非auto的margin属性。

图片版本控制(点评网业务需求)

    如果邮件模板中的图片,使用 CDN 网络地址——如 http://i3.dpfile.com/…/abc.png——那么,更新这张图片的时候,请联系DBA(数据库工程师)刷新该图片的版本号。

    并且,在新的邮件模板中,将该图片的版本号加1,比如:

    将  http://i1.dpfile.com/…/edm/top.png 更新为 http://i1.dpfile.com/…/edm/top.v1.png

    将  http://i1.dpfile.com/…/edm/bot.v12.png 更新为 http://i1.dpfile.com/…/edm/top.v13.png

常见问题

1. 如何让邮件在Gmail等Web页面中居中

有几种方式:

    a> 在 body上定义style=”width:apx; margin:auto”。注意,在Web邮件中,会自动为你生成一个<div style=”width:apx; margin:auto”> 的元素在最外层。(可以有效利用这一特性,定义背景颜色等样式,和实现其他可能的事情)

        而不要尝试自己在邮件模板最外层添加一个带有margin:auto的<div>元素。

    b> 使用<center>

2. 如何在邮件的布局中占据空白

请使用空白的<td>元素,设置height属性来起到站位的作用。

11大CSS按钮教程

原帖地址:http://parandroid.com/11-great-css-tutorials-button/

按钮是网站中非常重要的一部分, 它们常用于引发访客点击和产生互动。下面收集了11个css按钮教程
,教你如何创建吸引访客目光的按钮。

我最想推荐的其实是第一个, Google custom buttons
.

googlecustombutton 11大CSS按钮教程

Recreating the button
这篇文章中,作者详细向我们介绍了google现在很多应用服务中(google reader, gmail等)。其中包括需要用到一张渐变背景图的3.0版本
完全不需要图片还处于实验状态的3.1版本

下面10个则是由catswhocode
收集整理的。

1. 如何使用css创建精致的铵钮

buttons1 11大CSS按钮教程

  教程链接

2. 使用png图片和背景颜色生成的按钮

buttons2 11大CSS按钮教程

  教程链接

3. 漂亮的css悬浮图标

buttons9

  教程链接

4. CSS提交按钮

buttons4 11大CSS按钮教程

  教程链接

5. 简单的CSS Buttons ( Wii Buttons )

buttons5 11大CSS按钮教程

  教程链接

6. 使用css滑动门技术创建花俏的按钮

buttons6 11大CSS按钮教程

  教程链接

7. 结合图标,漂亮的css按钮

buttons7 11大CSS按钮教程

  教程链接

8. 只使用一张背景图实现的滑动门按钮

buttons8 11大CSS按钮教程

  教程链接

9. 触发事件按钮

buttons9 11大CSS按钮教程

  教程链接

10. 在wordpress中使用滑动门

buttons10 11大CSS按钮教程

  教程链接

td不换行隐藏多余部分

在论坛看到的,记录一下

 

http://www.yici.net/content/text_all/text_0/311_1.html 写道
table-layout:fixed 属性的解说

如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情况下),以达到使过长的文字不撑破表格的目的,一般是使用样式:table-layout:fixed。但是在Firefox下面,会有一些问题,参考 Gmail的一些做法,做了几个测试,得出一种解决办法。
例1:(IE浏览器)普通的情况
CODE:
<table border=1 width=80><tr><td>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>

效果:
可以看到width=80并没有起作用,表格被字符撑开了。

例2:(IE浏览器)使用样式table-layout:fixed
CODE:
<style>.tbl {table-layout:fixed}</style><table class=tbl border=1 width=80><tr><td>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>

效果:
width=80起作用了,但是表格换行了。

例3:(IE浏览器)使用样式table-layout:fixed与nowrap
CODE:
<style>.tbl {table-layout:fixed}</style><table class=tbl border=1 width=80><tr><td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>

效果:width=80起作用了,换行也被干掉了。

例4:(IE浏览器)在使用数值固定td大小情况下使用样式table-layout:fixed与nowrap
CODE:
<style>.tbl {table-layout:fixed}</style><table class=tbl border=1 width=80><tr><td width=20 nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td><td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>

效果:不幸发生了,第一个td的nowrap不起作用了

例5:(IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap
CODE:
<style>.tbl {table-layout:fixed}</style><table class=tbl border=1 width=80><tr><td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td><td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>

效果:改成百分比,终于搞定了

例6:(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap效果:把例5放到firefox下面,又ft了

例7:(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div
CODE:
<style>.tbl {table-layout:fixed}.td {overflow:hidden;}</style><table class=tbl border=1 width=80><tr><td width=25% class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td><td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td></tr></table>

效果:天下终于太平了

例8:(Firefox浏览器)在使用数值固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div
CODE:
<style>.tbl {table-layout:fixed}.td {overflow:hidden;}</style>

CODE:
<table class=tbl border=1 width=80><tr><td width=20 class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td><td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td></tr></table>

效果:nowrap又不起作用了

最终,例7是一个在IE和Firefox都可以完美解决页面强制换行问题的解决方案。

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style> 
table {
	width:300px;
	table-layout:fixed;
	border:1px solid red;
	} 
td {
	white-space:nowrap;
	overflow:hidden;
	border:1px solid red;
	}
</style> 
<table> 
<tr> 
<td> 
[没有解决!重新提出]怎么用a1111111111aaa CSS强制TD不换行
</td> 
<td> 
[没有解决!重新提出]怎么用aaaa CSS强制TD不换行
</td> 
</tr>
</table> 

网页中超长文字的断行问题

网页中超长文字的断行问题2006/9/25 at 01:50 · PHP, XHTML&CSS

这个应该是比较常见的问题了,通常是连续的一长串无空格的半角字符所引起的,比如比较长的超链接就很有可能把你的页面撑开。网上常见的解决办法就是使用css属性 break-word:break-all; ,但是这个只对IE浏览器有效。

下面介绍一种办法,可以保证各浏览器的兼容。

<wbr>标记,它的作用是建议浏览器在这个标记处可以断行,只是建议而不是必定会在此处断行,还要根据整行文字长度而定。因此只要在连续的文字中间适当的插入若干<wbr>标记就能解决断行问题。

我最初看到这个解决办法是在Gmail的代码中,它是这么实现的:(All rights reserved by Google.)

JS实现

function HtmlEscapeInsertWbrs(str, n, chars_to_break_after,

                              chars_to_break_before)

{

    var out = ”;

    var strpos = 0;

    var spc = 0;

    for (var i = 1; i < str.length; ++i) {

        var prev_char = str.charAt(i – 1);

        var next_char = str.charAt(i);

        if (IsSpace(next_char)) {

            spc = i;

        } else {

            if (i – spc == n

            || chars_to_break_after.indexOf(prev_char) != -1

            || chars_to_break_before.indexOf(next_char) != -1)

            {

                out += HtmlEscape(str.substring(strpos, i))

                      + ‘<wbr>’;

                strpos = i;

                spc = i;

            }

        }

    }

    out += HtmlEscape(str.substr(strpos));

    return out;

}

/////

function IsSpace(ch)

{

    return (” trn”.indexOf(ch) >= 0);

}

function HtmlEscape(str){

    return

        str.replace(/&/g,”&amp;”).replace(/</g,”&lt;”)

        .replace(/>/g,”&gt;”).replace(/\”/g,”&quot;”);

}

说明: 函数已经帮你处理了Html敏感的符号(&<>),用了这个函数并不是说字符串显示的时候就会在某个点断行,只是在其中设置了可能的断行点(<wbr>)标记,在显示宽度不够的时候的情况下才指示浏览器做出断行。

用法: 参数说明

str: 你要处理的原始字符串

n: 每行最多多少个字符

chars_to_break_after: 一个字符串,比如”-:_”,就会在这些字符后面发生断行(如果有断行必要) 如果不需要特别设置,那么使用空字符串 “”就行了

chars_to_break_before: 功能类似于上面这个, 没有特殊需要就设置成 “” 就可以了

函数是JavaScript的实现, 我根据这个做了一个PHP的实现,它工作得很好。

PHP实现

/*

* support UTF-8 only,

* ** the function return HTML Format string **

*/

function HtmlEscapeInsertWbrs($str, $n=10,

         $chars_to_break_after=”,$chars_to_break_before=”)

{

    $out = ”;

    $strpos = 0;

    $spc = 0;

    $len = mb_strlen($str,’UTF-8′);

    for ($i = 1; $i < $len; ++$i) {

      $prev_char = mb_substr($str,$i-1,1,’UTF-8′);

      $next_char = mb_substr($str,$i,1,’UTF-8′);

      if (_u_IsSpace($next_char)) {

        $spc = $i;

      } else {

        if ($i – $spc == $n

         || mb_strpos( $chars_to_break_after,

            $prev_char,0,’UTF-8′ ) !== FALSE

         || mb_strpos( $chars_to_break_before,

            $next_char,0,’UTF-8′)  !== FALSE )

          {

            $out .= HtmlEscape(

                mb_substr($str,$strpos, $i-$strpos,’UTF-8′)

                       ) . ‘<wbr>’;

            $strpos = $i;

            $spc = $i;

          }

      }

    }

    $out .= HtmlEscape(

             mb_substr($str,$strpos,$len-$strpos,’UTF-8′)

               );

    return $out;

}

/////

function _u_IsSpace($ch)

{

  return mb_strpos(” trn”,$ch,0,’UTF-8′) !== FALSE;

}

function HtmlEscape($s)

{

  return htmlspecialchars($s);

}

同样,该函数会对传入的字符串中的特殊字符做转义处理(htmlspecialchars()),因此传入的字符串必须是原始的(未经htmlspecialchars()处理过的),函数返回后的结果可以直接在网页中输出。

参数使用方法跟上面的JS版本类似,我就不罗唆了。

你可以改写成其他语言的,到时候也记得发给我一份

CSS中的滑动门技术

在这里你可以看到如何摆脱常规的正正方方的css矩形框,我原来对滑动门有误解,^_^。
原文作者:Douglas Bowman
原文出自:A List Apart
中文翻译:54player.com nobita
版权说明:本文中文翻译版权归译者54player.com nobita所有。需要转载发表的,请先与作者联系

在CSS中,一个经常被人们讨论的先进之处即背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果。根据CSS2.0当前的规定,每一个背景图像都需要各自的HTML元素。在许多情况下,典型的标记已经为一般的接口组件提供了多种元素以供我们使用。

标签导航栏就是其中的一个例子。过去,我们频繁的使用这些标签,并已成为了一种非常流行的站点导航方式。现今,在CSS已被广泛支持的前景下,我们可以为我们站点制作出更高质量和更好外观的标签导航栏来。你也许知道CSS可以用来“驯服”无序的列表,或许你还曾经看到过这种样式的标签列表:

[一般的基于CSS的标签,采用单色及直角]

如果我们想用和以上类似的标记,将导航标签变成这种样式,该怎么办呢?

[加入一定样式的标签,具有圆角和3D及阴影效果]

经过简单的设计,我们是可以做到的。

创新于何处?

我见过的许多基于CSS的导航标签大都具有一类的特征:矩形的色块,也许仅仅是一个轮廓,对于当前选中的标签则没有边框,标签在鼠标指针游至其上时改变颜色。这难道就是CSS所能给我们的全部吗?一连串的小盒子和单调的色彩吗 

在CSS被广泛采用之前,我们已经看到许多标签导航设计中的创新之处。独创的外形,熟练的色彩混合,以及对真实世界中许多物理接口的模仿。但是这些 设计往往过分依赖于经过复杂制作、带有文本的图像,或被包装成若干嵌套的表格。修改文本或改变标签的顺序则需要一个复杂的过程。文本的伸缩更是不可能的, 或给页面的布局极大的影响。

纯文本的导航栏比起文本即图像的导航栏更具有持续使用性和更快的载入速度。同样,我们甚至可以为每一个图像加上alt属性,对于弱视者,纯文本更可 以自由的改变大小。不足为奇的是,基于纯文本的导航栏,并加以CSS样式,又重新回到Web设计中来。但是,大多数基于CSS的导航栏设计,至今为止仍然 是毫无意义的。一种最近被采用的技术(例如CSS)可以让我们做的更好,同样不失先前提到的那些表格和图片标签的效果。

滑动门技术

美观的工艺,真正灵活的接口组件,并根据文本自适应大小,我们可用两个独立的背景图像来创造它。一个在左边,一个在右边。把这两幅图像想象成两扇可滑动的门,它们滑到一起并交迭,占据一个较窄的空间;或者相互滑开,占据一个较宽的空间,就像下图所显示的那样:

[图中有两扇门。第一幅中两扇门叠在一起的部分较多, 第二幅则较少。]

在这个模型中,一个图像掩盖住另一个图片的一部分。假设我们放置一些独特的内容在每个图像的周围,例如标签的圆角,我们并不希望上面一副图像完全的 遮蔽住下面一副。为了防止这种情况的发生,我们可以将上面一副图像(此例中的左边那幅)控制的尽可能的窄。但仍然要保证一定的宽度来显现标签一侧的独特 性。如果外部是圆角,我们就应该控制上面一副图像和它的弧线部分具有一样的宽度。

[图像显示了左边一个独立较窄的带有圆角的图像,右边的图像则于其类似,只是圆角的位置不同。]

如果目标在大小上增长,并超过了以上所显示的宽度,归咎于文本大小及字体的改变,图像会被拉开,产生不美观的间隙。我们需要判断的是,预测这种可扩 展的量将有多大。如果在浏览器中改变字体的大小,目标又会如果增长呢?实际来说,我们至少应该估算到字体大小增长至300%的情况。背景图像也得适应这种 增长。对于以上的例子,我们将下面(即右边)的图像设为400*150像素,上面的设为9*150像素。

在头脑中,始终要有这样的认识:背景图像只是显示一个可供内容填充的有效空间(即内容区域和padding,称为doorway)。这两幅图像始终和各自外部的边角相锚定。背景图像的可见部分和在一起即形成了一个具有这种标签形状的空间(doorway):

[图像显示了两幅图像底部的额外高度。右边图像的左侧同样具有额外的宽度。可见的部分是标签成型。]

如果标签被撑大,图像即滑开,doorway变宽,图像的也将被显露的更多:

[图像显示出两幅图像被拉开,形成更宽标签的情况,在高度上则是使用额外的那部分高度。]

此例中,我在photoshop中制作两个平滑,细的3D标签图像,如文章开头所显示的那样。对于其一,内部明亮,边框暗淡些,用来表现当前选中的标签。将这种技巧模型应用于左右两幅图像中,我们需要扩大标签图像覆盖的区域,将它裁剪成两部分:

[左侧和右侧的图像]

同样的方式将应用到被称为“当前”的标签中。一旦我们完成了这四幅图像(1, 2, 3, 4),我们就可以开始用标记和CSS来制作我们的标签了。

标签的创造

当你在研究用CSS来创造水平列表时,会发现至少有两种方法将列表项安排在同一行里。两种方法各有千秋,但都需要CSS来解决布局所带来的混乱。一种方法使用inline box,另一种则用floats。

方法一,可能是比较普遍的一种,是将列表项都inline显示。inline方法的魅力在于它的简易性。但是,对于我们即将谈到的滑动门技术来说, inline方法在特定的浏览器上存在一些解释上问题。方法二,是我们将要关注的,即用floats将列表项安排在同一行里。令人沮丧的是,floats 表面上矛盾的行为正巧回避了自然的逻辑。尽管如此,对于解决多重浮动元素的基本认识,以及可靠浮动的意义,仍是值得讨论的。

我们将用另一种浮动元素来解决浮动元素的排列问题。这样,父类元素将子类元素完全包括起来。于是,我们就可以为标签加上背景色彩和背景图像。非常重 要的一点必须记住,紧跟在标签后的文本元素用CSS中的clear功能来清除浮动对象。这样避免了浮动标签影响页面上其它元素的位置。

我们从以下的标记开始:

<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li id="current"><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

现实中,#header div可能同样包含logo和搜索框。对于我们的例子,我们要缩短每一个锚链中超链接的值。显然,这些值应该正确的包含文件或者目录的位置。

我们从定位#header容器开始设计列表。这样确保了这个容器确确实实的充当了容器的作用,以包容它内部浮动的列表项。既然元素是浮动的,我们同 样需要声明它的宽度为100%。加入临时的黄色背景以确保父类容器完全填满标签后面的整个区域。同样,设定默认的文本属性,确保样式的统一:

#header
{ float:left; width:100%; background:yellow; font-size:93%; line-height:normal; }

现在,我们同样需要为无序列表设定默认的margin/padding值为0,并去掉列表项前面的标记。每个列表项左浮动:

#header ul
{ margin:0; padding:0; list-style:none; }
#header li
{ float:left; margin:0; padding:0; }

设定锚链强制作为块对象呈递,我们便可无忧的控制所有的样式:

#header a {    display:block;    }

下一步,我们将右侧的背景图像加入到列表项中去(改变如粗体所示):

#header li 
{ float:left; background:url("norm_right.gif") no-repeat right top; margin:0; padding:0; }

在加入左侧图像之前,我们可以在效果1种看看目前为止的效果。(在效果中,忽略body中的规则。仅设定基本margin,padding,colors,text的属性。)

现在我们可以将左侧图像放置在锚链的左边(容器内的元素)。我们同时加入padding,扩大标签并将文本从标签的边缘推开:

#header a {    display:block;    background:url("norm_left.gif")      no-repeat left top;    padding:5px 15px;    }

这样我们就得到了效果2。注意我们的标签是如何成型的。在这里,IE5/Mac的用户会立刻惊奇道,“天啊,我的标签垂直堆在一起并且延伸至整个屏幕!”不要着急,我们马上帮你解决。眼下,尽量按照下面去做,或者方便的话,临时改换其他的浏览器,并且IE5/Mac版本的问题会马上得到解决。

现在,一般标签的背景图像已经完成了,我们要为“当前”标签更换图像。我们通过对目标列表项加入id=”current”和锚链来实现。既然不需要改变背景的其他外观,图像除外,我们就使用background-image的特性:

#header #current {    background-image:url("norm_right_on.gif");    }
#header #current a { background-image:url("norm_left_on.gif"); }

我们要在标签下添加一条边框。但是,将边框属性应用于父类的#header容器上,将不能解决“当前”标签无需边框的问题。于是我们制作新的带有边框的图像以代替它。同样,我们可以为它加入渐变效果:

我们将图像放置到#header容器的背景中去(代替原有的黄色背景),将背景图像移至到最下方,并为图像上方留出的空白添加相应的背景颜色。同时,去掉由body继承下来的padding,为ul的上、左、右边加进10像素的padding:

#header {    float:left;    width:100%;    background:#DAE0D2 url("bg.gif")      repeat-x bottom;    font-size:93%;    line-height:normal;    }#header ul {    margin:0;    padding:10px 10px 0;    list-style:none;    }

我们必须让“当前”标签覆盖边框,如下面提示的那样。你也许会认为我们将要把底部边框加入到与其颜色相对应的、#header背景图像中去,然后将 “当前”标签的底部边框颜色改为白色。但是,对于挑剔的观察者,还是会发现一些细小的差别。于是,我们改变锚链的padding,为“当前”标签创造出直 角来,如下面放大的例子:

[将两个标签放大,左边显示的标签角落有1像素的误差,而右边的则是完美的直角。]

我们通过减少1像素普通锚链的底部padding值(5px-1px=4px)来实现,然后为“当前”锚链补上减去的padding。

#header a {    display:block;    background:url("norm_left.gif")      no-repeat left top;    padding:5px 15px 4px;    }#header #current a {    background-image:url("norm_left_on.gif");    padding-bottom:5px;    }

经过改变,底部边框将在普通标签中出现,而在“当前”标签中则隐藏了起来。于是,我们得到了效果3

收尾工作

敏锐的观察者也许会在上一例注意到白色的标签角落。这些不透明的角用来防止下面的图像透过上面的一副。理论上,我们可以尝试使用部分背景图像来适应 标签的背景。但是我们的标签会在高度上增长,尝试通过移动背景颜色,背景图像就会相对变矮。代替的办法是,改变图像,将标签的角落设为透明。如果弧线是反 锯齿的,我们在其边缘使用较平均的背景色彩。

现在,角落已经变成透明色,左边的图像将透过右边图像的角落。为了补偿,我们为表单项加入和左边图像宽度相吻合的padding(9px)。既然已经为表单项加入了padding,我们还需去掉同样的宽度以达到文本的居中(15px-9px=6px):

#header li {    float:left;    background:url("right.gif")      no-repeat right top;    margin:0;    padding:0 0 0 9px;    }#header a {    display:block;    background:url("left.gif")      no-repeat left top;    padding:5px 15px 4px 6px;    }

仍未结束,因为加入了9个像素的padding使左边图像与标签的左边之间产生了一段空白。现在,左侧与右侧,可见“doorway”的边缘接在一起,我们再不需要将左边图像保持在上方。于是,交换两幅背景图像的顺序,相反过来。同样交换“当前”标签中使用的两幅图像:

#header li {    float:left;    background:url("left.gif")      no-repeat left top;    margin:0;    padding:0 0 0 9px;    }#header a, #header strong, #header span {    display:block;    background:url("right.gif")      no-repeat right top;    padding:5px 15px 4px 6px;    }#header #current {    background-image:url("left_on.gif");    }#header #current a {    background-image:url("right_on.gif");    padding-bottom:5px;    }

完成这些后,我们到达了效果4。 要注意的是,透明的角落在标签的左侧产生了一段不能点击的无效区域。这个区域在文本以外,但仍然是可以察觉到的。在标签的两边都使用透明的图像是没有必要 的。如果我们不希望产生这种无效的区域,那么我们必须使用在标签后面使用颜色,然后用这种颜色来代替标签角落的透明图像。现在我们仅保持这种透明角落。

对于剩下的问题,我们将一次性完成全部的修改:加重标签文本,将普通标签中的文本改为棕色,“当前”标签文本改为深灰色,去掉链接的下划线,最后将悬停文本色彩改为同样的深灰色。经过一系列的改变,我们将看到目前为止的效果5

一致性的解决

在效果2之后,我们公认的一个问题就是在IE5/Mac浏览方式下,每个标签延伸并占据了整个浏览器的宽度,以致标签垂直的堆在了一起。这不是我们所希望的。

在大多数的浏览器中,浮动一个元素会有收缩,收缩最小至它所包含内容的大小。如果一个浮动元素包含一幅图像或其本身即图像,便会收缩至图像的宽度。如果仅仅包含文本,那么将会收缩至最长的,不可被顶开的那文本的宽度。

一个问题出现在IE5/Mac中的图片中,当一个auto-width的块对象元素被插入到一个浮动的元素中时。其他的浏览器仍旧将浮动缩小至最 小,而无视容器内的块对象元素。但IE5/Mac并不按照这种情况,相反它将浮动和块对象元素扩展至尽可能的宽度。为解决这个问题,我们将锚链同时浮动起 来,但仅仅对于IE5/Mac,以免放弃其他的浏览器。首先,我们为锚链设定浮动规则。然后,我们使用反斜杠注释法来隐藏这种规则,让它仅仅对IE5/Mac生效,而无视其他的浏览器:

#header a {    float:left;    display:block;    background:url("right.gif")      no-repeat right top;    padding:5px 15px 4px 6px;    text-decoration:none;    font-weight:bold;    color:#765;    }/* Commented Backslash Hack     hides rule from IE5-Mac \*/#header a {float:none;}/* End IE5-Mac hack */

现在IE5/Mac浏览器将按我们所期望的那样来显示标签,看效果6。 对于非IE5/Mac的浏览器什么都不需要改变。注意到IE5.0/Mac的一系列解释上的bug在IE5.1中解决。因此,滑动门技术在5.0版本中所 遭遇的问题超出了hack的限度。既然升级到IE5.1/Mac已不成难题,OS 9 Macs/IE5.0的占有率应逐渐缩减至很低。

举一反三

我们刚刚演练了滑动门技术,用纯文本和无序列表来创造导航标签,加以少量的样式。它的装载速度快,具有可维持性,并且文本的大小可以在不破坏外观的情况下进行较大的伸缩。不必我们再重申在创造复杂样式的导航栏中,滑动门技术所表现出来的弹性了。

只有想不到,没有做不到。最终效果向我们展示了一例,但我们设计不可能因此而被限定死。

在某些场合,标签不一定是对称的。我很快就制作了这种标签的第二个版本,也有阴影3D的样式,有角的边缘,和具有特色的左边部分。依据第二个版本,我们甚至可以交换左右两幅图像的位置。以这种细致的布局和灵巧的图像控制,我们可以去掉按钮的下边框以便标签图像更好的去适应背景,如第三个版本所显示的那样。如果你的浏览器支持多个样式表的切换,你甚至可以靠它在多个版本的导航栏之间自由切换

仍有许多我们没有提到的其他的效果。快速的提一下,我改变鼠标悬停的文本色彩,但是真个图像可以替换掉以创造出更有趣的变换效果。即使标记中两个嵌 套的HTML元素,也可以用CSS来达到一些我们还未想到的效果。我们在此例中创造的仅仅是水平的标签栏,但滑动门亦可应用于许多其他的情形。阁下觉得如 何呢?

本文的其他语言版本
英语(alistapart.com)
意大利语(gdesign.it)
俄语(id-as.com)

点击此处参加关于本文的讨论

Translated with the permission of A List Apart Magazine and the author[s].


译者的话:第一次翻译文章,对许多用词不置可否,难免有一些错误,期待读者们的指正。

Email:mencken.wong(at)gmail.com

JQueryUI—不错的选择!

最近自己在做的一个项目,名称:TShark V0.6, UI部分主要使用JQuery UI实现。

主要技术:JDK + Spring + Hibernate + JQuery + JQuery UI + JqGrid + FusionCharts

By the way:后台ORM部分使用了SpringSide的部分代码(这里感谢一下)

主要功能:

支持i18:目前只提供 English and Chinese

支持Theme更换:基于JQuery UI

提供多种系统风格:详见下图

提供了部分基础通用管理功能:用户、角色、权限、资源、菜单、工具栏。。。

Demo URL:http://do.jhost.cn/cnnetiger/system/login.html    空间是免费的速度可能有些慢(但还是要感谢一下,毕竟免费的JSP空间太少了),大家将就着看吧。

目前还存在很多问题,所以版本为0.6,待版本升到1.0后,如果有人需要,将会开源,为了保证数据的完整性,目前暂时屏蔽了数据更新操作

目前只在FireFox下做过仔细测试,所以建议使用FireFox,顺便再鄙视一下IE,你不是一般的烂…

部分代码样例

user list

<ts:toolbar />
<!--Table Search-->
<page:applyDecorator name="search">
	<page:param name="formId">roleTable_Search</page:param>
	<table class="table_search_form"><tr>
		<th><fmt:message key="label.role.name"/>:</td>
		<td>
			<input type="text" name="filter_LIKES_name"	id="filter_LIKE_name">
		</td>
		<td>
			<ts:button name="search" onClick="doSearch('roleTable_Search');"/>
			<ts:button name="reset" onClick="doReset('roleTable_Search');"/>
		</td>
		</tr>
	</table>
</page:applyDecorator>
<!--Table list-->
<ts:table id="roleTable" url="/system/role/getlistData.html" sortName="name" rowNum="20" title="label.role.list" rowNumbers="true"  ondblClickRow="viewRoleDetail">
	<ts:row>
		<ts:column display="ID" align="center" property="id" sort="string" name="id" width="20" hidden="true"/>
		<ts:column display="label.role.name" align="center" property="name" name="name" sort="string" width="20" />
		<ts:column display="label.role.description" align="center" property="description" sortable="false" name="description" width="20" />
	</ts:row>
</ts:table>

user form

<form id="userModel" method="post" name="userModel" onSubmit="return false;"> 
	<form:hidden path="userModel.id" />
	<table class="table_form">
		<tr>
			<th>*<fmt:message key="label.user.code"/>:</th>
			<td><form:input path="userModel.code" size="30"/></td>
			<th>*<fmt:message key="label.user.name"/>:</th>
			<td><form:input path="userModel.name" size="30"/></td>
		</tr>
		<tr>
			<th><fmt:message key="label.user.phone"/>:</th>
			<td><form:input path="userModel.phone" size="30"/></td>
			<th><fmt:message key="label.user.mobilePhone"/>:</th>
			<td><form:input path="userModel.mobilePhone" size="30"/></td>
		</tr>
       <tr>
			<th><fmt:message key="label.user.email"/>:</th>
			<td><form:input path="userModel.email" size="30"/></td>
			<th>*<fmt:message key="label.user.group"/>:</th>
			<td>
			<form:select path="userModel.group.id">
				<form:option value=""><fmt:message key="label.group.prompt"/></form:option>
				<form:options items="${allGroups}" itemValue="id"  itemLabel="name"/>
			</form:select>
			</td>
		</tr>
	   <tr>
			<th><fmt:message key="label.user.memo"/>:</th>
			<td colspan="3"><form:textarea path="userModel.memo" rows="3" cols="84"/></td>
		</tr>
		<tr>
		<td colspan="4">
			<fieldset class="multi-select-panel" style="margin:0;">
				<legend><fmt:message key="label.role.authorization"/></legend>
					<ul id="userRoles">
						<c:forEach var="item" items="${allRoles}" varStatus="s">
							<li class="ts-checkbox">
								<INPUT type="checkbox" id="role_${item.id}" value="${item.id}" <c:if test="${item.hasAuth == true}">checked</c:if>><label for="role_${item.id}">${item.name}</label>
							</li>
						</c:forEach>
					</ul>
			</fieldset>
		</td>
		</tr>
  </table>
	<table class="table_toolbar">
		<TR>
			<TD><ts:button name="save" onClick="doSave('/system/user/save.html','userModel');"/></TD>
			<TD><ts:button name="reset" onClick="doReset('userModel');"/></TD>
			<TD><ts:button name="return"/></TD>
		</TR>
	</table>
</form>
</div>
<v:javascript formName="userModel" staticJavascript="true" />

  • 大小: 73.6 KB
  • 大小: 41.2 KB
  • 大小: 43.3 KB
  • 大小: 159.7 KB
  • 大小: 25.2 KB
  • 大小: 25.2 KB

XML快速起步

XML(eXtended Markup Language)可扩展标记语言,提供了一套跨平台,跨网络,跨程序的语言的数据描述方式,使用XML可以方便地实现数据交换,系统配置,内容管理等常见功能;

XML和HTML类似,都属于标记性语言;但是其中也有些差异:

num 比较内容 HTML XML
1 可扩展性 不具备 无标记性语言,可定义新的标记语言
2 侧重点 如何显示信息 如何结构化地描述信息
3 语法要求 不要求标记的嵌套,配对等,不要求标记之间有一定的顺序 严格要求嵌套,配对,遵循统一的顺序结构要求
4 可读性及可维护性 难于阅读,维护 结构清晰,便于阅读,维护
5 数据和显示关系 内容描述与显示方式融合在一起 内容描述与显示方式相分离
6 保值性 不具备 具备

一个简单的XML实例:

< xml version="1.0" encoding="UTF-8" >
<info>
	<name>keith</name>
	<id>007</id>
	<email>keithjava@gmail.com</email>
</info> 

 

直接用浏览器打开(比html更加清晰,明了);XML显示时是以一种树型的形式显示的,而且其中的每一个节点都是用户自己的定义的,有其具体的表示含义;

所有的XML都是由前导区和数据区两部分组成的:

前导区:规定XML页面的属性,一共有3个属性(三者的顺序不同容会导致这个文件出错):

  1. version:表示使用的XML版本,目前是1.0
  2. encoding:页面编码
  3. standalone:是否独立运行,如需要进行显示可以使用CSS或者XSL控制(XSL,eXtensible Stylesheet Language,可延伸样式表语言,专门用于显示XML文件信息的,其提供了各种显示的模板,依靠XPath定位);

可以在自己定义的标签内使用属性,多个属性用”,”号分隔。属性和元素都可以描述数据,到底是用属性,还算元素?

如果不需要显示可以使用属性,需要显示则使用元素;

  • 注释:XML的注释是:
< xml version="1.0" encoding="UTF-8" >
<info>
	<name>keith</name>
	<id>007</id>
	<![CDATA[
		测试用的
	]]>
	<email>keithjava@gmail.com</email>
</info>

 

 

 

 

 

 

 

 

Squid配置以缓存大量图片

配置文件如下

http_port 59.175.238.60:80 defaultsite=219.140.171.194 vhost vport=80
 
cache_mem 2048 MB
cache_swap_low 90
cache_swap_high 95
 
maximum_object_size 20 MB
maximum_object_size_in_memory 8 MB
 
cache_dir ufs /squid_cache 100000 128 512
 
cache_peer 219.140.171.194 parent 80 0 no-query originserver
cache_peer_domain 219.140.171.194 img.cnhubei.com
 
acl all src 0.0.0.0/0.0.0.0
acl Safe_ports port 80
acl Safe_ports port 443
acl AntiBaidu req_header User-Agent Baiduspider
acl cnhubei referer_regex -i cnhubei
acl nullref referer_regex -i ^$
http_access allow nullref
http_access deny !Safe_ports
http_access deny AntiBaidu
http_access deny !cnhubei
deny_info http://www.cnhubei.com/images/2007cnhubei04y002.jpg cnhubei
http_access allow all

visible_hostname www.w3cool.com
cache_mgr zhangweijie@gmail.com
 
#### Disable Logs
cache_store_log none
cache_vary on
logfile_rotate 0
 
refresh_pattern -i \.*$ 1440 90% 129600 reload-into-ims

参数设置的都很暴力,还设置了一个反盗链 

其实主要就是refresh_pattern的一些理解和建议.

概念LM,LM就是页面Header里时间(Date)和Last-Modified时间的差。Date一般是Squid从后面取页面的时间,Last-Modified 一般是页面生成时间。
refresh_pattern 的语法是
refresh_pattern [-i] regexp min percent max [options]

min, max的单位是分钟,percent就是百分比。
refresh_pattern 的算法如下:(当前时间定义为CURRENT_DATE)
1) If ((CURRENT_DATE-DATE(就是LM里定义的时间)) < min),cache是新鲜的
2) else if ((CURRENT_DATE-DATE) < (min + (max-min)*percent),cache是新鲜的
3) else cache是过期的
cache过期就需要从后面server取新鲜内容。

常用的几个参数的意思

override-expire
该选项导致squid在检查Expires头部之前,先检查min值。这样,一个非零的min时间让squid返回一个未确认的cache命中,即使该响应准备过期。

override-lastmod
改选项导致squid在检查LM-factor百分比之前先检查min值。

reload-into-ims
该选项让squid在确认请求里,以no-cache指令传送一个请求。换句话说,squid在转发请求之前,对该请求增加一个If-Modified- Since头部。注意这点仅仅在目标有Last-Modified时间戳时才能工作。外面进来的请求保留no-cache指令,以便它到达原始服务器。
一般情况可以使用 reload-into-ims。它其实是强行控制对象的超时时间,这违反了http协议的精神,但是在带宽较窄的场合,可以提高明显系统相应时间。
举例:
refresh_pattern -i \.css$ 1440 50% 129600 reload-into-ims
refresh_pattern -i \.xml$ 1440 50% 129600 reload-into-ims
refresh_pattern -i \.html$ 1440 90% 129600 reload-into-ims-
refresh_pattern -i \.shtml$ 1440 90% 129600 reload-into-ims
refresh_pattern -i \.hml$ 1440 90% 129600 reload-into-ims
refresh_pattern -i \.jpg$ 1440 90% 129600 reload-into-ims
refresh_pattern -i \.png$ 1440 90% 129600 reload-into-ims
refresh_pattern -i \.gif$ 1440 90% 129600 ignore-reload
refresh_pattern -i \.bmp$ 1440 90% 129600 reload-into-ims
refresh_pattern -i \.js$ 1440 90% 129600 reload-into-ims

ignore-reload
该选项导致squid忽略请求里的任何no-cache指令。
所以。如果希望内容一进入cache就不删除,直到被主动purge掉为止,可以加上ignore-reload选项,这个我们常用在mp3,wma,wmv,gif之类。
Examples:

refresh_pattern -i \.mp3$ 1440 50% 2880 ignore-reload
refresh_pattern -i \.wmv$ 1440 50% 2880 ignore-reload
refresh_pattern -i \.rm$ 1440 50% 2880 ignore-reload
refresh_pattern -i \.swf$ 1440 50% 2880 ignore-reload
refresh_pattern -i \.mpeg$ 1440 50% 2880 ignore-reload
refresh_pattern -i \.wma$ 1440 50% 2880 ignore-reload
resource age =对象进入cache的时间-对象的last_modified
response age =当前时间-对象进入cache的时间
LM-factor=(response age)/(resource age)

举个例子,这里只考虑percent, 不考虑min 和max

例如:refresh_pattern 20%

假设源服务器上www.aaa.com/index.htm —–lastmodified 是 2007-04-10 02:00:00
squid上 proxy.aaa.com/index.htm index.htm进入cache的时间 2007-04-10 03:00:00

1)如果当前时间 2007-04-10 03:00:00
resource age =3点-2点=60分钟
response age =0分钟
index.htm还可以在cache停留的时间(resource age)*20%=12分钟
也就是说,index.htm进入cache后,可以停留12分钟,才被重新确认。

2)如果当前时间 2007-04-10 03:05:00
resource age =3点-2点=60分钟
response age =5分钟
index.htm还可以在cache停留的时间(resource age)*20%=12分钟-5=7
LM-factor=5/60=8.3%<20%

一直到2007-04-10 03:12:00 LM-factor=12/60=20% 之后,cache中的页面index.htm终于stale。
如果这时没有index.htm的请求,index.htm会一直在缓存中,如果有index.htm请求,squid收到该请求后,由于已经过期, squid会向源服务器发一个index.htm是否有改变的请求,源服务器收到后,如果index.htm没有更新,squid就不用更新缓存,直接把缓存的内容放回给客户端,同时,重置对象进入cache的时间为与源服务器确认的时间,比如2007-04-10 03:13:00,如果正好在这个后重新确认了页面。重置后,resource age变长,相应在cache中存活的时间也变长。

如果有改变则把最新的index.htm返回给squid,squid收到会更新缓存,然后把新的index.htm返回给客户端,同时根据新页面中的Last_Modified和取页面的时间,重新计算resource age,进一步计算出存活时间。

实际上,一个页面进入cache后,他的存活时间就确定了,即 (resource age) * 百分比,一直到被重新确认。

测试一个防盗链:

 

Winty’sWindowsLiveWriterStyles

在插件Text Template中使用:
<style type=”text/css”>
/*********Winty(wintys@gmail.com)用于Windows Live Writer打印的CSS**********/
body {
    white-space:normal;
    font-size:20px;
    line-height:28px;
    font-family:verdana,Arial,helvetica,sans-seriff;
}
/*标题*/
h3{
    font-weight : bold;color:blue;
}
/*列举项*/
ul li{
    list-style-type: square;
}
/*代码区*/
.mycode {
    margin: 10px;
    padding: 10px;
    background: #DDEDFB;
    border: 1px solid #428EDE;  
    text-align: left;
    font-size:20px;
}
/*CSS强制打印分页:为图片不自动分页而设*/
.pageseparator{
    font-size: 1px;
    height: 1px;
    clear: both;
    page-break-before: always;
}
/*不需要打印的内容*/
@media print{
    .donotprint{
        display:none !important;
        /*如果display:none无效,则使用下面的规则*/
        position:absolute;
        top:-10000px;
        left:-10000px;
    }
}
/*隐藏的版权信息*/
.wintyshiddencopyright{
    color:white;
}
</style>

<!– Insert PrintStyle First –>
<div class=”pageseparator”>&nbsp;</div>

<!– winty’s copyright –>
<div name=”wintyscopyright” style=”border-width: 1px 0pt 0pt; border-top: 1px solid red; padding: 5px; margin-top: 5px;” class=”donotprint”>
<span style=”color: #ff0000;”>原创作品,转载请注明出处。<br />
作者:天堂露珠 (wintys@gmail.com)<br />
博客:http://www.blogjava.net/wintys</span>
</div>

<!– winty’s hidden copyright –>
<div name=”wintyshiddencopyright” class=”hiddencopyright donotprint”>
作者:天堂露珠 (wintys@gmail.com) 博客:http://www.blogjava.net/wintys
</div>