好易阁|免费杀毒软件|Web技术 » css/html

2009 年度最佳 jQuery 插件

好易阁 — Wed, 16 Dec 2009 11:39:15 +0000

jQuery 是个宝库，而 jQuery 的插件体系是个取之不竭的宝库，众多开发者在 jQuery 框架下，设计了数不清的插件，jQuery 的特长是网页效果，因此，它的插件库也多与 UI 有关网站推选的2009年度最佳 jQuery 插件拉洋片:

在一个固定区域，循环显示几段内容，这种方式很像旧时的拉洋片，2009年，这种 Web 效果大行其道，jQuery 有大量与此有关的插件，以下插件无疑是最佳的。

AnythingSlider：由 CSS-Tricks 的 Chris Coyier 设计，功能齐全，应用十分广泛。
Easy Slider：这个 Content Slider 插件既包含传统“前后”导航模式，又包含页码式导航。
Coda-Slider 2.0： Coda-Slider 2.0 是对 Panic Coda 网站上对应效果的模仿。

图片库

那些需要借助 Flash 实现滑动与渐入渐出效果图片库的日子已经去过，借助 jQuery，这种效果已经可以在本地实现，以下是本年度备受欢迎的几个 jQuery 图片库插件。

Galleria：这是一个基于 jQuery 的图片库，可以逐个加载图片并显示缩略图。
jQuery Panel Gallery：一个可以高度定义的图片库插件，无需对单个图片进行任何处理，这个插件会帮你完成一切。
slideViewer： slideViewer 会检查你的图片列表中的编号，动态创建各个图片的页码浏览导航。
Supersized：一个令人惊讶的图片循环展示插件，包含各种变换效果和预加载选项，会对图片自动改变尺寸以适应浏览器窗口。

导航

我们相信，作为网站的导航系统，应该越简单，越易用越好，然而，假如你确实希望实现一些更炫的效果，jQuery 就是最好的选项，以下插件是09年最好的 jQuery 导航插件。

jquery mb.menu
Horizontal Scroll Menu with jQuery
AutoSprites

表单和表格

在 Web 设计中，表单和表格都是不是很讨人喜欢的东西，但你不得不面对，本年度出现几个不错的 jQuery 插件帮你完成这些任务。

Password Strength：这个插件帮你评估用户输入的密码是否足够强壮。
Ajax Fancy Capcha：顾名思义，一个支持 Ajax 又很炫的 jQuery Captcha 插件，它使用了很人性化的验证机制。
Chromatable：这个插件可以帮助你在表格上实现滚动条。
jqTransform：一个式样插件，帮助你对表单中的控件进行式样控制。
Uploadify：实现多个文件同时上传。
jExpand ：一个很轻量的 jQuery 插件，使你的表格可以扩展，在一些商业应用中，可以让表格更容易组织其中的内容。

新闻来自:COMSHARP CMS 企业网站内容管理系统官方站

四种表单验证方法的分析和比较

好易阁 — Sat, 10 Oct 2009 02:50:47 +0000

任何可以交互的站点都有输入表单，只要有可能，就应该对用户输入的数据进行验证。无论服务器后端是什么样的系统，都不愿意把时间浪费在一些无效的信息上，必须对表单数据进行校验，若有不符合规定的表单输入，应及时返回并给出相应的提示信息。本文将列举四种不同原理的表单验证方法，并给出各方法在 PHP 服务器上的实现。

回页首

浏览器端验证

传统上，表单数据一般都通过浏览器端的 Javascript 验证。浏览器端的验证速度快，若有不符合要求的输入，响应信息快速的返回给用户。由于验证数据不需要提交给服务器，不会加重服务器的负载。一个浏览器端验证的过程如图 1 所示，表单提交，若通过验证则提交服务器处理，不成功则回馈给用户。
图 1. 浏览器端验证原理图

本文给出的各种表单验证方法源代码均以一个简单的表单为例，该表单包含“UserName”和“Password”两个文本输入框，及一个“Submit”按钮。代码清单 1 给出了浏览器端 Javascript 验证的例子。若“UserName”或“Password”输入不符合要求，通过弹出框的形式提示用户，并返回 false, 停止表单提交。
清单 1. 浏览器端 Javascript 验证代码

 function validform(thisForm)
   {
      error_string = "";
      if((message=checkusername(thisForm.username))!="")
        {
          error_string="UserName:"
          error_string += message;
          alert(error_string);
          return false;
         }
      if((message = checkpassword(thisForm.pass))!="")
        {
          error_string="Password:"
          error_string += message;
          alert(error_string);
          return false;
         }
       return true；
    }

从图 1 可以看出这种表单验证方法有一个致命的缺点，很多工具可以在表单检验过后、浏览器发送请求前截取表单数据，攻击者可以修改请求中的数据，从而绕过 JavaScript，将恶意数据注入服务器，这样会增加 XSS（全称 Cross Site Scripting）攻击的机率。对于一般的网站，都不赞成采用浏览器端的表单验证方法。

回页首

浏览器端和服务器端双重验证

浏览器端和服务器端双重验证方法在浏览器端验证方法基础上增加服务器端的验证，其原理如图 2 所示，该方法增加服务器端的验证，弥补了传统浏览器端验证的缺点。若表单输入不符合要求，浏览器端的 Javascript 验证能很快地给出响应，而服务器端的验证则可以防止恶意用户绕过 Javascript 验证，保证最终数据的准确性。
图 2. 浏览器端和服务器端双重验证原理图

除了客户端 Javascript 验证，该方法增加了服务器端的 PHP 验证，示例代码如清单 2 所示，checkusername() 和 checkpassword() 是 PHP 语言编写的两个验证接口函数，根据 $error 结果，确定表单的有效性。
清单 2. 服务器端表单的 PHP 验证

 if(isset($_POST['username']))
 {
  $usermsg  = checkusername($_POST['username']);
  if($usermsg != '')
    $error = true;
  if(isset($_POST['pass']))
  {
    $passmsg = checkpassword($_POST['pass']);
    if($passmsg != '')
    $error = true;
  }
 }

此方法的缺点一目了然，必须维护两份代码实现相同的功能，增加开发人员的工作量，不利于后续开发。浏览器端和服务器端双重验证方法也存在一个风险，对有些表单验证的规则服务器也许不想公开给用户，而浏览器拷贝了服务器端验证的功能，向用户公布验证规则。

回页首

服务器端验证

综合上述两种验证方法，现在考虑使用服务器端的验证方法，该方法结构非常简单，其原理如图 3 所示。客户端负责表单提交，服务器端验证表单，若发现错误数据，则回传表单页面，错误信息被加到同一页面中。若验证通过，则处理表单。
图 3. 服务器端验证原理图

此方法在遇到非法输入需要回传表单时，除了加载错误提示信息在此页面上，还必须注意，此时表单内容必须维持表单提交时的用户输入，这样用户才能将错误的表单输入与错误提示信息联系起来，有助于用户填入正确的输入。可以借助 DOM 技术中的 appendChild 功能追加显示相关的错误的提示信息，其实现如代码清单 3 所示，其效果可以参考图 4。
清单 3. 利用 DOM 技术实现提示信息代码

 find_obj = document.getElementsByName("username");
  var sp1 = document.createElement('span');
  sp1.className= 'formerror';
  sp1.appendChild(document.createTextNode(usermsg));
  find_obj[0].parentNode.appendChild(sp1); 

  find_obj = document.getElementsByName("pass");
  var sp2 = document.createElement('span');
  sp2.className= 'formerror';
  sp2.appendChild(document.createTextNode(passmsg));
  find_obj[0].parentNode.appendChild(sp2);

图 4. 加载错误信息效果图

由于验证交由服务器端处理，该方法的输入响应速度不如浏览器端验证，主要受网络繁忙及服务器荷载的影响。同时，若同一页面的其他表单耗时较大，此回传页面方法的响应时间会进一步加大。

回页首

基于 Ajax 技术的验证

基于 Ajax 技术的表单验证技术综合了服务器端验证，浏览器端及服务器端双重验证方法的优点，摒弃了两者的缺点。服务器端验证方法结构清晰，可以防止恶意攻击，其主要问题在于若输入错误表单信息，需重传整个页面，同时若同一页面有多个表单，回传整个页面可能会增加用户等待的时间。浏览器端及服务器端的双重验证响应速度快，其问题在于代码冗余。

基于 Ajax 技术的验证方法也需要做两次验证：首先是回馈验证，无论表单数据准确与否，服务器均给出反馈信息，其作用等同于双重验证中的浏览器端的验证；表单处理前的验证防止恶意修改，其作用等同于双重验证中的服务器端的验证。其原理如图 5 所示，一旦有表单提交，首先构建表单信息字段，交由 Ajax engine 发送给服务器端验证，服务器将验证结果发送给用户，客户端根据回馈信息，判断表单输入是否正常，在 Ajax 技术下，对用户而言，以上操作均在后台运行，不会影响当前页面各表单的状态。若是非法输入，则回馈提示信息给用户；若是正常输入，客户端将按照正常方法提交表单。为了防止恶意修改，表单处理之前还需验证，此步验证与之前验证共用代码。
图 5. 基于 Ajax 技术验证原理图

有关 Ajax 技术的知识，可以参考 developerWorks 上的系列文章。Ajax 核心概念之一是 XMLHttpRequest 对象，这是一个 JavaScript 对象，创建该对象时，各种浏览器方法有所不同，具体实现可以参考源代码。

回馈验证主要涉及两个问题：首先是构建验证字段，其次是回馈信息的格式。

由于验证字段和正常表单字段共用验证代码，验证字段格式完全遵循表单提交时的格式。为某表单构建验证字段代码如清单 4 所示。其中 checkflag 字段的作用是区分两种验证。
清单 4. 构建验证字段代码

 var postData = "";
 var fields = form.elements;
 for (var i=0; i < fields.length; i++) {
 if (fields[i].name != "") {
	  type = fields[i].type;
	   if ((type == 'radio') || (type == 'checkbox')) {
	  	 if (!fields[i].checked) { continue; }
    }
 if ((type == 'submit')&&(!(fields[i].name == submitName))) {
	   continue;
 }
 if (postData) { postData += "&"; }
 postData += fields[i].name + "=" + encodeURIComponent(fields[i].value);
          }
 }
     postData += "&checkflag=1";

回馈信息主要在浏览端的 Javascript 中处理，不同的格式需要不同的处理方法。在传统 Ajax 动态页面处理中，回馈信息包含大量信息，采用 xml 格式，可以借助 DOM 技术处理，简化程序。在本例中，回馈信息只包含验证结果信息，简单数据格式就能满足要求，客户端的 Javascript 分析回馈信息，根据结果确定是否提交完整的表单，具体实现请参考源代码。

基于 Ajax 技术的验证方法代码相对比较复杂，错误的表单需要来回两次网络交互，而正确的提交则需要三次网络交互。该验证方法的响应时间与网络繁忙程度有很大的关系。相对于纯服务器端验证，该方法在验证阶段不需要重新下载整个页面，在多个表单共存在同一页面的场合，基于 Ajax 技术的验证方法不会影响同一页面的其它表单。

回页首

小结

上述四种验证方法各有优缺点，用户应该根据需求选择不同的方法。浏览器端验证方法适用于对表单输入要求并不是特别严格的场所；浏览器端和服务器端双重验证应用比较广泛，但是该方法不利于后续开发；服务器端验证方法结构简单，但是开发代码相对复杂；基于 Ajax 技术的验证方法，对网络的要求高，但是该方法结构清晰，表单验证与表单处理过程分离但共用验证代码，简化开发人员的工作。

回页首

下载

描述	名字	大小	下载方法
示例代码	code.zip	2.8KB	HTTP

Google网站加速PHP技巧完全错误

好易阁 — Thu, 02 Jul 2009 03:05:33 +0000

Google小组上周共享了其网站加速的技巧大全，其中包括了一些PHP性能技巧。然而这些PHP性能技巧在PHP社区中引起了一阵轩然大波，PHP小组立刻写了一篇公开信给这些性能技巧“抓虫”。其中第四页的后半部分就是专门讲PHP相关的性能技巧，在阅读本文之前可以先熟悉一下。
以下是来自PHP小组的信件译文：

PHP小组：这篇文章中所给的建议全部都是错误的。

1. 没有原因尽量不要复制变量

PHP 4和5核心的Zend引擎使用了一个名为“copy-on-write”的内存管理系统。也就是说，无论你将一个变量的值赋值给另一个变量多少次，只要你不改变数值，数据是不会被复制的。范例：
$data = str_repeat(”*”, 512 * 1024); // synthesize 512K of data
$memory_used_before = memory_get_usage();
$more_data = $data;
$memory_used_after = memory_get_usage();
print “Before: {$memory_used_before}\nAfter: {$memory_used_after}\n”;
有thread-safety及调试功能的PHP 5.3下：

之前：853968

之后：854236

没有thread-safety及调试功能的PHP 5.2下：

之前：581912

之后：581976

也就是，调试模式下有268字节的差别，正常模式下（普遍使用的）有64字节的差别。这和Google文中所述（51CTO编者注：Google原文的描述中，复制变量会“导致双倍的内存消耗”）相差甚远。

需要注意的是，PHP代码中坚决禁止在没有恰当过滤的情况下将用户提供的变量原本内容进行echo或者存储。

2. 为长字符串使用单引号

针对PHP 5.2及5.3的基准测试显示，虽然双引号使用窜改（interpolation）而单引号使用连锁（concatenation），这两个的速度是完全一致的（甚至双引号常常会更快一些）。当使用没有包含变量的普通字符串时，使用双引号的性能要明显占优。

3. 使用echo而非print

这两个方法的运行速度取决于你的PHP是如何设置在host上的。

4. 不要与echo一起使用concatenation（连锁）

事实正好相反。新的引擎处理多条echo的方法，导致在echo中使用concatenation实际上会比较快。

5. 使用switch/case替代if/else

最后，这句建议是彻底的胡说八道。决定在哪里使用switch/case或者if/else完全取决于编码习惯，他们的运行速度基本一致，除了在某些特定的情况下。

事实上，在更古老的PHP版本下（PHP 3及很老的PHP 4版本）这些大部分建议是正确的，然而在新一代的PHP下，这些绝对是错误的。信息来源: PHPchina

7款优秀的CSS框架

好易阁 — Thu, 25 Jun 2009 08:40:54 +0000

推荐7款优秀的CSS框架:

Elements CSS Frameworks

Elements 是一个基础CSS框架，它用来帮助设计者书写CSS更加快捷简单。它不仅是一个框架，它拥有自己的工作流。它拥有你需要完成项目的各种元素，查看介绍：Overview .

YUI Grids CSS

很不错的框架，基础的YUI Grids CSS提供4种页面宽度，6种边框模板，以及控制行列能力。4kb文件提供了超过1000个页面布局，点击这里查看更多： Other features include:

YAML CSS Framework

Dirk Jesse的能够对(X)HTML/CSS 框架扩展，支持复杂web项目。YAML基于web标准和支持各种流行浏览器，尤其支持所有IE版本包括从 5.x/Win 到 7.0.

Blueprint CSS

Blueprint是一个CSS框架，它的目标是减少你的CSS开发时间。它提供给你强大的CSS基础来创建你的项目，包括易于使用的grid，有效的字体排版，以及可打印的stylesheet .

Schema Web Design Framework

Schema 是一个展示层web框架，修饰重复的CSS和HTML代码，它提供基础的框架让你能够马上运行项目。

CleverCSS

CleverCSS是一个小型修饰语言用于CSS，从Python得到灵感，采用通过简单和干净的结构方式。它甚至比CSS2更强大.

Tripoli CSS Framework

Tripoli 是一个一般的CSS标准用于HTML渲染，通过重置和重建浏览器标准。它非常坚固，支持跨浏览器渲染。

PHP学习—变量使用总结

好易阁 — Mon, 08 Jun 2009 05:49:52 +0000

1.定义常量define(”CONSTANT”, “Hello world.”);
常量只能包含标量数据（boolean，integer，float 和 string）。
调用常量时，只需要简单的用名称取得常量的值，而不能加“$”符号，如：echo CONSTANT；
注: 常量和（全局）变量在不同的名字空间中。这意味着例如 TRUE 和 $TRUE 是不同的。
2.普通变量$a = “hello”;

3.可变变量（使用两个美元符号（$））
$$a = “world”;
两个变量都被定义了：
$a 的内容是“hello”并且 $hello 的内容是“world”。
因此，可以表述为：
echo “$a ${$a}”;或者 echo “$a $hello”;它们都会输出：hello world
要将可变变量用于数组，必须解决一个模棱两可的问题。这就是当写下 $$a[1] 时，解析器需要知道是想要 $a[1] 作为一个变量呢，还是想要 $$a 作为一个变量并取出该变量中索引为 [1] 的值。解决此问题的语法是，对第一种情况用 ${$a[1]}，对第二种情况用 ${$a}[1]。

4.静态变量
在函数内部static $a = 0;
注意：声明中用表达式的结果对其赋值会导致解析错误如static $a =3+3;（error）
静态变量仅在局部函数域中存在（函数内部），函数执行完之后，变量值不会丢失,可用于递归调用

5.全局变量
在函数体内定义的global变量,函数体外可以使用,在函数体外定义的global变量不能在函数体内使用，在全局范围内访问变量可以用特殊的 PHP 自定义 $GLOBALS 数组：
如：$GLOBALS["b"] = $GLOBALS["a"] + $GLOBALS["b"];
在一个函数域内用 global 语句导入的一个真正的全局变量实际上是建立了一个到全局变量的引用
global $obj;
注：对于变量的 static 和 global 定义是以应用的方式实现的

6.给变量赋值：传地址赋值（简单引用）：
$bar = &$foo; //加&符号到将要赋值的变量前
改动新的变量将影响到原始变量，这种赋值操作更加快速
注意：只有命名变量才可以传地址赋值
注意：如果
$bar = &$a;
$bar = &$foo;
改变$bar的值只能改变变量foo的值，而不改变a的值（引用改变了）

7.PHP 超全局变量$GLOBALS ：包含一个引用指向每个当前脚本的全局范围内有效的变量。该数组的键标为全局变量的名称。从 PHP 3 开始存在 $GLOBALS 数组。
$_SERVER ：变量由 Web 服务器设定或者直接与当前脚本的执行环境相关联。类似于旧数组 $HTTP_SERVER_VARS 数组（依然有效，但反对使用）。
$_GET ：    经由 HTTP GET 方法提交至脚本的变量。
$_POST ：   经由 HTTP POST 方法提交至脚本的变量。
$_COOKIE ：经由 HTTP Cookies 方法提交至脚本的变量。
$_FILES ：经由 HTTP POST 文件上传而提交至脚本的变量。
文件上传表单中要有 enctype=”multipart/form-data”
$_ENV ：    执行环境提交至脚本的变量。
$_REQUEST ：经由 GET，POST 和 COOKIE 机制提交至脚本的变量，因此该数组并不值得信任。所有包含在该数组中的变量的存在与否以及变量的顺序均按照 php.ini 中的 variables_order 配置指示来定义。该数组没有直接模拟 PHP 4.1.0 的早期版本。参见 import_request_variables()。
注意：      自 PHP 4.3.0 起，$_FILES 中的文件信息不再存在于 $_REQUEST 中。
$_SESSION ：当前注册给脚本会话的变量。

JS 操作IE游览器常用函数

好易阁 — Mon, 06 Apr 2009 04:15:17 +0000

1、window.external…

常用css属性汇总查询

好易阁 — Wed, 12 Nov 2008 01:02:48 +0000

!important　增加特定规则的重要性。　
:active　设置当链接处于激活状态时　a　元素的样式。　
:first-letter　在对象的第一个字符上应用一个或多个样式。　
:first-line　在对象的第一行上应用一个或多个样式。　
:hover　设置当用户将鼠标指针悬停在链接上时　a　元素的样式。　
:link　设置当链接最近没有访问过时　a　元素的样式。　
:visited　设置当链接最近访问过时　a　元素的样式。　
@charset　设置外部样式表的字符集。　
@font-face　设置要嵌入　HTML　文档的字体。　
@import　导入一个外部样式表。　
@media　设置　styleSheet　对象中一组规则的媒体类型。　
@page　设置　styleSheet　中页面框的尺寸、方向和边距。　
abbr　设置或获取对象的缩写文本.

accelerator　设置或获取表明对象是否包含快捷键的字符串。　
accept　设置或获取以逗号分隔的内容类型列表。　
acceptCharset　设置或获取处理表单的服务器必须接受的输入数据所用的字符编码方式列表。　
accessKey　设置或获取对象的快捷键。　
action　设置或获取表单内容要发送处理的　URL。　
activeElement　获取当父　document　拥有焦点时获得焦点的对象。　
additive　设置或获取表明动画是否附加到其它动画的值。　
align　设置或获取对象针对其邻接文本如何排列。　
align　设置或获取标题或标志的排列。　
align　设置或获取表格排列。　
align　设置或获取对象相对于显示或表格的排列方式。　
aLink　设置或获取元素中所有激活链接的颜色。　
alinkColor　设置或获取元素中所有激活链接的颜色。　
allowTransparency　设置或获取对象是否可为透明。　
alt　设置或获取用于替代图像的文本。　
altHTML　设置可选的若对象装载失败时要执行的替换　HTML　脚本。　
altKey　设置或获取　Alt　键的状态。　
altLeft　设置或获取左　Alt　键的状态。　
appCodeName　获取浏览器的代码名称。　
APPLICATION　表明对象的内容是否为　HTML　应用程序(HTA)，从而免除浏览器的安全模型。　
appMinorVersion　获取应用程序的次版本值。　
appName　获取浏览器的名称。　
appVersion　获取浏览器运行的平台和版本。　
archive　设置或获取可用于实现对象的你自己的　archive　功能的字符串。　
ATOMICSELECTION　指定元素及其内容是否必须以一不可见单位统一选择。　
autocomplete　设置或获取对象的自动完成状态。　
availHeight　获取系统屏幕的工作区域高度，排除　Microsoft?　Windows?　任务栏。　
availWidth　获取系统屏幕的工作区域宽度，排除　Windows　任务栏。　
axis　设置或获取以逗号分隔的与对象关联的概念分类列表。　
background　设置或获取对象最多五个独立的背景属性。　
background　设置或获取页面上文本和图像后平铺的背景图片。　
background　设置或获取对象中文本和图像后平铺的背景图片。　
backgroundAttachment　设置或获取背景图像如何附加到文档内的对象中。　
backgroundColor　设置或获取对象内容后的颜色。　
backgroundImage　设置或获取对象的背景图像。　
backgroundPosition　设置或获取对象背景的位置。　
backgroundPositionX　设置或获取　backgroundPosition　属性的　x　坐标。　
backgroundPositionY　设置或获取　backgroundPosition　属性的　y　坐标。　
backgroundRepeat　设置或获取对象的　backgroundImage　属性如何平铺。　
balance　设置或获取表明背景声音的音量如何分配在左右扬声器的值。　
Banner　使用　event　对象获取高级流重定向器(ASX)文件中项目的　Banner　内容。　
BannerAbstract　获取　ASX　文件项的　BannerAbstract　内容。　
BaseHref　获取可找到对象标签的　URL　字符串。这通常是对象所在文档的　href，或者由　base　元素设置的值。　
behavior　设置或获取文本如何在字幕中滚动。　
behavior　设置或获取　DHTML　行为的位置。　
BGCOLOR　设置对象后面的背景颜色。　
bgColor　不推荐。设置或获取对象后面的背景颜色。　
bgColor　不推荐。设置或获取表明对象后面的背景颜色的值。　
bgProperties　设置或获取背景图片的属性。　
blockDirection　获取表明块元素内容的绕排方向的值，是由左至右，还是由右至左。　
border　设置或获取绘制对象周围边框的属性。　
border　设置或获取框架间的空间，包括　3D　边框。　
border　设置或获取绘制对象周围边框的宽度。　
borderBottom　设置或获取对象下边框的属性。　
borderBottomColor　设置或获取对象下边框的颜色。　
borderBottomStyle　设置或获取对象下边框的样式。　
borderBottomWidth　设置或获取对象下边框的宽度。　
borderCollapse　设置或获取表明表格行和单元格边框是组合为单一边框还是像标准　HTML　那样分离。　
borderColor　设置或获取对象的边框颜色。　
borderColor　设置或获取对象的边框颜色。　
borderColorDark　设置或获取用于绘制对象　3D　边框的两种颜色的一种。　
borderColorLight　设置或获取用于绘制对象　3D　边框的两种颜色的一种。　
borderLeft　设置或获取对象左边框的属性。　
borderLeftColor　设置或获取对象左边框的颜色。　
borderLeftStyle　设置或获取对象左边框的样式。　
borderLeftWidth　设置或获取对象左边框的宽度。　
borderRight　设置或获取对象右边框的属性。　
borderRightColor　设置或获取对象右边框的颜色。　
borderRightStyle　设置或获取对象右边框的样式。　
borderRightWidth　设置或获取对象右边框的宽度。　
borderStyle　设置或获取对象上下左右边框的样式。　
borderTop　设置或获取对象上边框的属性。　
borderTopColor　设置或获取对象上边框的颜色。　
borderTopStyle　设置或获取对象上边框的样式。　
borderTopWidth　设置或获取对象上边框的宽度。　
borderWidth　设置或获取对象上下左右边框的宽度。　
bottom　设置或获取围绕对象内容的矩形下边坐标。　
bottom　设置或获取对象相对于文档层次中下个定位对象的底部的位置。　
bottomMargin　设置或获取整个页面主体的底部边距。　
boundingHeight　获取绑定　TextRange　对象的矩形的高度。　
boundingLeft　获取绑定　TextRange　对象的矩形左边缘和包含　TextRange　对象的左侧之间的距离。　
boundingTop　获取绑定　TextRange　对象的上边缘和包含　TextRange　对象的顶边之间的距离。　
boundingWidth　获取绑定　TextRange　对象的矩形的宽度。　
browserLanguage　获取浏览器的当前语言。　
bufferDepth　设置或获取用于画面外位图缓冲颜色的每像素位数。　
button　设置或获取用户所按的鼠标按钮。　
cancelBubble　设置或获取当前事件是否要在事件句柄中向上冒泡。　
canHaveChildren　获取表明对象是否可以包含子对象的值。　
canHaveHTML　获取表明对象是否可以包含丰富的　HTML　标签的值。　
caption　获取表格的　caption　对象。　
cellIndex　获取对象于所在行的　cells　集合中的位置。　
cellPadding　设置或获取介于单元格边框和单元格内容之间的空间总量。　
cellSpacing　设置或获取表格中单元格之间的空间总量。　
ch　设置或获取可用于实现对象的你自己的　ch　功能的字符串。　
charset　设置或获取用于解码对象的字符集。　
checked　设置或获取复选框或单选钮的状态。　
chOff　设置或获取可用于实现对象的你自己的　chOff　功能的字符串。　
cite　设置或获取关于　对象的参考信息。　
classid　设置或获取对象的类标识符。　
className　设置或获取对象的类。　
clear　设置或获取对象是否允许在其左侧、右侧或两边放置浮动对象，以防下段文本显示在浮动对象上。　
clear　设置或获取当在文档中插入换行符后浮动对象在哪边不能定位。　
clientHeight　获取对象的高度，不计算任何边距、边框、滚动条，但包括该对象的补白。　
clientLeft　获取　offsetLeft　属性和客户区域的实际左边之间的距离。　
clientTop　获取　offsetTop　属性和客户区域的实际顶端之间的距离。　
clientWidth　获取对象的宽度，不计算任何边距、边框、滚动条，但包括该对象的补白。　
clientX　设置或获取鼠标指针位置相对于窗口客户区域的　x　坐标，其中客户区域不包括窗口自身的控件和滚动条。　
clientY　设置或获取鼠标指针位置相对于窗口客户区域的　y　坐标，其中客户区域不包括窗口自身的控件和滚动条。　
clip　设置或获取定位对象的哪个部分可见。　
clipBottom　获取对象剪裁区域的底边坐标。　
clipLeft　获取对象剪裁区域的左边坐标。　
clipRight　获取对象剪裁区域的右边坐标。　
clipTop　获取对象剪裁区域的顶边坐标。　
closed　获取引用窗口是否已关闭。　
code　设置或获取包含已编译的　Java　类的文件的　URL。　
codeBase　设置或获取组件的　URL。　
codeType　设置或获取于对相关联代码的　Internet　媒体类型。　
color　设置或获取　mpc　行为的容器文本颜色。　
color　设置或获取对象所使用的颜色。　
color　设置或获取对象文本的颜色。　
colorDepth　获取用于目标设置或缓冲区的颜色每像素位数。　
cols　设置或获取对象的宽度。　
cols　设置或获取表格的列数。　
cols　设置或获取对象的框架宽度。　
colSpan　设置或获取对象应该跨越的表格列数。　
compact　设置或获取表明列表是否应该通过删除列表对象间的额外空白来压缩的　Boolean　值。　
compatMode　设置或获取表明此对象是否应用标准兼容模式的值。　
complete　获取对象是否已完全装入。　
content　设置或获取与　HTTP-EQUIV　或　NAME　关联的资源信息。　
contentEditable　设置或获取表明用户是否可编辑对象内容的字符串。　
contentOverflow　获取表明文档处理当前　LayoutRect　对象后是否包含附加的内容。　
contentWindow　获取指定的　frame　或　iframe　的　window　对象。　
cookie　设置或获取　cookie　的字符串值。　
cookieEnabled　获取客户端的永久　cookie　是否在浏览器中启用。永久　cookie　是储存在客户端计算机上的。　
coords　设置或获取对象的坐标。　
Count　获取可用块格式化标签的数量。　
cpuClass　获取指示　CPU　等级的字符串。　
cssText　设置或获取样式规则的永久表述。　
ctrlKey　设置或获取　Ctrl　键的状态。　
ctrlLeft　设置或获取左　Ctrl　键的状态。　
cursor　设置或获取当鼠标指针指向对象时所使用的鼠标指针。　
data　设置或获取引用对象数据的　URL。　
data　设置或获取　TextNode　对象的值。　
dataFld　设置或获取由　dataSrc　属性指定的绑定到指定对象的给定数据源的字段。　
dataFld　设置或获取　oncellchange　事件影响的数据列。　
DATAFLD　设置用于数据绑定的给定数据源的字段。　
dataFormatAs　设置或获取如何渲染提供给对象的数据。　
DATAFORMATAS　设置或获取将提供给对象的数据渲染为文本还是　HTML。　
dataPageSize　设置或获取绑定到数据源的表格中显示的记录数。　
dataSrc　设置或获取用于数据绑定的数据源。　
DATASRC　设置用于数据绑定的数据源。　
dateTime　设置或获取修改对象的日期和时间。　
declare　设置或获取可用于实现对象的你自己的　declare　功能的字符串。　
defaultCharset　从当前的区域语言中获取缺省字符集。　
defaultChecked　设置或获取复选框或单选钮的状态。　
defaultSelected　设置或获取选项的状态。　
defaultStatus　设置或获取要在窗口底部的状态栏上显示的缺省信息。　
defaultValue　设置或获取对象的初始内容。　
defer　设置或获取脚本的状态。　
designMode　设置或获取表明文档是否可被编辑的值。　
deviceXDPI　设置或获取系统屏幕水平每英寸点数(DPI)的数值。　
deviceYDPI　设置或获取系统屏幕垂直每英寸点数(DPI)的数值。　
dialogArguments　设置或获取传递给模式对话框窗口的变量或变量数组。　
dialogHeight　设置或获取模式对话框的高度。　
dialogLeft　设置或获取模式对话框的左坐标。　
dialogTop　设置或获取模式对话框的顶坐标。　
dialogWidth　设置或获取模式对话框的宽度。　
dir　设置或获取对象的阅读顺序。　
direction　设置或获取文本滚动的方向。　
direction　设置或获取对象的阅读顺序。　
disabled　设置或获取控件的状态。　
disabled　设置或获取是否已为对象应用样式表。　
disabled　获取表明用户是否可与该对象交互的值。　
disabled　设置或获取可用于实现对象的你自己的　disabled　功能的字符串。　
display　设置或获取对象是否要渲染。　
doctype　获取与当前文档关联的文档类型声明。　
document　获取给定弹出窗口中的　HTML　文档。　
documentElement　获取对文档根结点的引用。　
domain　设置或获取文档的安全域名。　
dropEffect　设置或获取拖曳操作的类型和要显示的光标类型。　
dynsrc　设置或获取要在窗口中显示的视频剪辑或　VRML　世界。　
effectAllowed　设置或获取数据传送操作可应用于该对象的源元素。　
encoding　设置或获取表单的　MIME　编码。　
enctype　设置或获取表单的多用途网际邮件扩展(MIME)编码。　
event　设置或获取脚本编写用于的事件。　
expando　设置或获取表明是否可对象内创建任意变量的值。　
face　设置或获取当前的字样家族。　
fgColor　设置或获取文档的前景(文本)颜色。　
FieldDelim　指定用于标明数据字段结束的字符。　
fileCreatedDate　获取文件创建的日期。　
fileModifiedDate　获取文件上次修改的日期。　
fileSize　获取文件大小。　
fileUpdatedDate　获取文件上次更新的日期。　
filter　设置或获取应用于对象的滤镜或滤镜集合。　
firstChild　获取对象的　childNodes　集合的第一个子对象的引用。　
font　设置或获取对象最多六个独立的字体属性。　
fontFamily　设置或获取对象文本所使用的字体名称。　
fontSize　设置或获取对象文本使用的字体大小。　
fontSmoothingEnabled　获取用户是否在控制面板的显示设置中启用了圆整屏幕字体边角的选项。　
fontStyle　设置或获取对象的字体样式，如斜体、常规或倾斜。　
fontVariant　设置或获取对象文本是否以小型大写字母显示。　
fontWeight　设置或获取对象的字体宽度。　
form　获取对象所嵌入的表单的引用。　
frame　设置或获取表格周围的边框显示的方式。　
frameBorder　设置或获取是否显示框架的边框。　
frameElement　获取　frame　或　iframe　对象所在父文档的窗口。　
frameSpacing　设置或获取框架间附加空间总量。　
fromElement　设置或获取事件发生时激活或鼠标将要离开的对象。　
galleryImg　设置或获取对于当前图像我的图片支持图像工具栏是否可见。　
hash　设置或获取　href　属性中在井号“#”后面的分段。　
hasLayout　获取表明对象是否有布局的值。　
headers　设置或获取为对象提供信息的标题单元格。　
height　获取屏幕的垂直分辨率。　
height　设置或获取对象的高度。　
height　设置或获取对象的高度。　
hidden　设置或获取表明嵌入对象是否可见的值。　
hideFocus　设置或获取表明对象是否显式标明焦点的值。　
host　设置或获取　location　或　URL　的　hostname　和　port　号码。　
hostname　设置或获取　location　或　URL　的主机名称部分。　
href　设置或获取链接样式表的　URL。　
href　设置或获取目标　URL　或锚点。　
href　设置或获取相对链接基于的　URL。　
href　设置或获取整个　URL　为字符串。　
hreflang　设置或获取对象的语言代码。　
hspace　设置或获取对象的水平边距。　
htmlFor　设置或获取绑定到事件脚本的对象。　
htmlFor　设置或获取给定标签对象指定到的对象。　
htmlText　获取　HTML　源文件为合法的　HTML　片段。　
httpEquiv　设置或获取用于将　META　标签的内容绑定到　HTTP　响应头的信息。　
id　获取标识对象的字符串。　
imeMode　设置或获取输入方法编辑器(IME)的状态。　
implementation　获取当前文档的　implementation　对象。　
indeterminate　设置或获取用户是否已经更改了复选框的状态。　
index　设置或获取列表框中选项的依序位置。　
innerHTML　设置或获取位于对象起始和结束标签内的　HTML。　
innerText　设置或获取位于对象起始和结束标签内的文本。　
isContentEditable　获取表明用户是否可编辑对象内容的值。　
isDisabled　获取表明用户是否可与该对象交互的值。　
isMap　设置或获取图像是否为服务器端图像映射。　
isMultiLine　获取表明对象的内容是包含一行还是多行的值。　
isOpen　获取表明弹出窗口是否已打开的值。　
isTextEdit　获取是否可使用该对象创建一个　TextRange　对象。　
keyCode　设置或获取与导致事件的按键关联的　Unicode　按键代码。　
label　设置或获取选项组的标签。　
label　设置或获取可用于实现对象的你自己的　label　功能的字符串。　
lang　设置或获取要使用的语言。　
language　设置或获取当前脚本编写用的语言。　
lastChild　获取该对象　childNodes　集合中最后一个子对象的引用。　
lastModified　获取页面上次修改的日期，若页面提供的话。　
layoutFlow　设置或获取对象内容的方向和绕排方向。　
layoutGrid　设置或获取指定文本字符版面的组合文档格线属性。　
layoutGridChar　设置或获取用于渲染元素文本内容的字符网格大小。　
layoutGridLine　设置或获取用于渲染元素文本内容的网格线值。　
layoutGridMode　设置或获取文本布局网格是否使用二维。　
layoutGridType　设置或获取用于渲染元素文本内容的网格类型。　
left　设置或获取对象相对于文档层次中下个定位对象的左边界的位置。　
left　设置或获取围绕对象内容的矩形左边坐标。　
leftMargin　设置或获取页面的整个主体的左边距，而不是缺省的边距。　
length　设置或获取集合中对象的数目。　
length　获取　TextNode　对象中的字符数目。　
length　获取历史列表中的元素数目。　
letterSpacing　设置或获取对象的字符间附加空间的总和。　
lineBreak　设置或获取日本文本的换行规则。　
lineHeight　设置或获取对象两行间的距离。　
link　设置或获取对象文档链接的颜色。　
linkColor　设置或获取对象文档链接的颜色。　
listStyle　设置或获取对象最多三个独立的　listStyle　属性。　
listStyleImage　设置或获取要为对象应用的列表项目符号的图像。　
listStylePosition　设置或获取相对于对象内容如何绘制项目符号。　
listStyleType　设置或获取对象预定义的项目符号类型。　
logicalXDPI　获取系统屏幕水平每英寸点数(DPI)的常规数值。　
logicalYDPI　获取系统屏幕垂直每英寸点数(DPI)的常规数值。　
longDesc　设置或获取对象长描述的统一资源标识符(URI)。　
loop　设置或获取字幕播放的次数。　
loop　设置或获取声音或视频剪辑激活后循环播放的次数。　
lowsrc　设置或获取要显示的较低分辨率图像。　
margin　设置或获取对象的上下左右边距。　
marginBottom　设置或获取对象的下边距宽度。　
marginHeight　设置或获取显示框架中文本之前的上下边距高度。　
marginLeft　设置或获取对象的左边距宽度。　
marginRight　设置或获取对象的右边距宽度。　
marginTop　设置或获取对象的上边距宽度。　
marginWidth　设置或获取显示框架中文本之前的左右边距宽度。　
maxLength　设置或获取用户可在文本控件中输入的最多字符数。　
media　设置或获取媒体类型。　
menuArguments　返回快捷菜单执行所在的窗口对象。　
method　设置或获取如何将表单数据发送到服务器。　
Methods　设置或获取该对象支持的　HTTP　方式清单。　
minHeight　设置或获取元素的最小高度。　
MoreInfo　通过　event　对象获取高级流重定向器(ASX)文件中项目横幅的　MoreInfo　内容。　
multiple　设置或获取表明列表中是否可选中多个项目的　Boolean　值。　
name　设置或获取框架的名称。　
name　设置或获取　meta　对象的　CONTENT　标签属性中指定的值。　
name　设置或获取对象的名称。　
name　获取命名空间的名称。　
name　设置或获取元素的输入参数的名称。　
name　设置或获取表明窗口名称的值。　
nameProp　获取由对象的　href　或　src　属性指定的文件名。　
nextPage　获取打印模板中下页的位置。　
nextSibling　获取对此对象的下一个兄弟对象的引用。　
nodeName　获取特定结点类型的名称。　
nodeType　获取所需结点的类型。　
nodeValue　设置或获取结点的值。　
noHref　设置或获取在此区域内单击是否引起操作。　
noResize　设置或获取用户是否可缩放框架。　
noShade　设置或获取水平线是否要绘制　3D　阴影。　
noWrap　设置或获取浏览器是否执行自动换行.

html/css常用标签属性集

好易阁 — Mon, 27 Oct 2008 08:03:34 +0000

设置字体：font-family　
设置字号：font-size
设置斜体效果：font-style
设置加粗字体：font-weight
设置英文大写：font-variant
复合属性：字体：font
文本的对齐与排列
文本的水平对齐：text-align
纵向对齐：vertical-align
文本反排：direction与unicode-bidi
元素布局方式：writing-mode
字内换行：word-break

日文文本的换行：line-break
超过容器边界时的换行：word-wrap
设置文字修饰：text-decoration
设置下划线的线条位置：text-underline-position
设置文字间隔
单词间隔：word-spacing
字符间隔：letter-spacing
文本转换：text-transform
文本缩进：text-indent
文本行高：line-height
处理空白：white-space
设置颜色：color
设置背景颜色：background-color
背景图像：background-image
图像的平铺：background-repeat
图像与页面的布局：background-attachment
图像位置：background-position
背景的复合属性：background
上边框的风格：border-top-style
右边框的风格：border-right-style
下边框的风格：border-bottom-style
左边框的风格：border-left-style
上边框的颜色：border-top-color
右边框的颜色：border-right-color
下边框的颜色：border-bottom-color
左边框的颜色：border-left-color
设置边框的颜色：border-color
上边框的宽度：border-top-width
右边框的宽度：border-right-width
下边框的宽度：border-bottom-width
左边框的宽度：border-left-width
设置边框的宽度：border-width
设置上边框：border-top
设置右边框：border-right
设置下边框：border-bottom
设置左边框：border-left
设置边框的整体效果：border
边框属性在框架结构中的应用
设置框架中的边框风格：border-style
设置框架的其他边框属性：border
表格相邻边框的合并：border-collapse
顶端边距：margin-top
底部边距：margin-bottom
左侧边距：margin-left
右侧边距：margin-right
边距：margin
顶端补白：padding-top
底部补白：padding-bottom
左侧补白：padding-left
右侧补白：padding-right
补白：padding
定位方式：position
元素距顶端的垂直距离：top
元素距离左端的水平距离：left
元素距离右端的水平距离：right
元素距离下端的水平距离：bottom
层叠顺序：z-index
浮动属性：float
清除属性：clear
可视区域：clip
超出范围：overflow
设置水平方向超出范围的处理方式：overflow-x　361
设置垂直方向超出范围的处理方式：overflow-y　362
可见属性：visibility　363
宽高尺寸设置：width、height
透明效果：alpha
动感模糊：blur
对颜色进行透明处理：chroma
设置阴影：dropshadow
渐变阴影效果：shadow
对象的水平翻转：flipH
对象的垂直翻转：flipV
发光效果：glow　380
灰度处理：gray　382
反相处理：invert　383
X光片效果：xray　384
遮罩效果：mask　385
波形滤镜：wave　386
应用多个滤镜实现特殊效果：创建水中倒影
列表符号：list-style-type
图像符号：list-style-image
列表缩进：list-style-position
列表：list-style
光标属性：cursor
滚动条表面的颜色：scrollbar-face-color
滚动条的亮边颜色：scrollbar-highlight-color
滚动条暗边颜色：scrollbar-shadow-color
滚动条方向箭头的颜色：scrollbar-arrow-color
滚动条基本颜色：scrollbar-base-color

用CSS实现AJXA星级评分效果

好易阁 — Tue, 14 Oct 2008 00:28:44 +0000

演示：
http://www.komodomedia.com/samples/star_rating_final/

下载:
http://www.komodomedia.com/samples/star_rating_final/star_rating_final.zip

官网：
http://www.komodomedia.com/blog/2007/01/css-star-rating-redux/

CSS 常用的命名

好易阁 — Fri, 10 Oct 2008 14:51:37 +0000

头：header
　　内容：content/container
　　尾：footer
　　导航：nav
　　侧栏：sidebar
　　栏目：column
　　页面外围控制整体布局宽度：wrapper
　　左右中：left right center
　　登录条：loginbar
　　标志：logo
　　广告：banner

　　页面主体：main
　　热点：hot
　　新闻：news
　　下载：download
　　子导航：subnav
　　菜单：menu
　　子菜单：submenu
　　搜索：search
　　友情链接：friendlink
　　页脚：footer
　　版权：copyright
　　滚动：scroll
　　内容：content
　　标签页：tab
　　文章列表：list
　　提示信息：msg
　　小技巧：tips
　　栏目标题：title
　　加入：joinus
　　指南：guild
　　服务：service
　　注册：regsiter
　　状态：status
　　投票：vote
　　合作伙伴：partner
　　(二)注释的写法:
　　/* Footer */
　　内容区
　　/* End Footer */
　　(三)id的命名:
　　(1)页面结构
　　容器: container
　　页头：header
　　内容：content/container
　　页面主体：main
　　页尾：footer
　　导航：nav
　　侧栏：sidebar
　　栏目：column
　　页面外围控制整体布局宽度：wrapper
　　左右中：left right center
　　(2)导航
　　导航：nav
　　主导航：mainbav
　　子导航：subnav
　　顶导航：topnav
　　边导航：sidebar
　　左导航：leftsidebar
　　右导航：rightsidebar
　　菜单：menu
　　子菜单：submenu
　　标题: title
　　摘要: summary
　　(3)功能
　　标志：logo
　　广告：banner
　　登陆：login
　　登录条：loginbar
　　注册：regsiter
　　搜索：search
　　功能区：shop
　　标题：title
　　加入：joinus
　　状态：status
　　按钮：btn
　　滚动：scroll
　　标签页：tab
　　文章列表：list
　　提示信息：msg
　　当前的: current
　　小技巧：tips
　　图标: icon
　　注释：note
　　指南：guild
　　服务：service
　　热点：hot
　　新闻：news
　　下载：download
　　投票：vote
　　合作伙伴：partner
　　友情链接：link
　　版权：copyright
　　(四)class的命名:
　　(1)颜色:使用颜色的名称或者16进制代码,如
　　.red { color: red; }
　　.f60 { color: #f60; }
　　.ff8600 { color: #ff8600; }
　　(2)字体大小,直接使用“font+字体大小“作为名称,如
　　.font12px { font-size: 12px; }
　　.font9pt {font-size: 9pt; }
　　(3)对齐样式,使用对齐目标的英文名称,如
　　.left { float:left; }
　　.bottom { float:bottom; }
　　(4)标题栏样式,使用“类别+功能“的方式命名,如
　　.barnews { }
　　.barproduct { }
　　注意事项::
　　1.一律小写;
　　2.尽量用英文;
　　3.不加中杠和下划线;
　　4.尽量不缩写，除非一看就明白的单词.
　　主要的 master.css
　　模块 module.css
　　基本共享 base.css
　　布局，版面 layout.css
　　主题 themes.css
　　专栏 columns.css
　　文字 font.css
　　窗体 forms.css
　　补丁 mend.css
　　打印 print.css