我整理的一些，不是很全。但应该够用了

media player控制

player.controls.play(); 播放
player.controls.stop(); 停止
player.controls.pause(); 暂停
player.controls.currentPosition 返回播放文件的当前时间位置（以秒为单位）
player.controls.currentPositionString 时间格式的字符串 “0:32″
player.currentMedia.duration 返回播放文件的总长度（以秒为单位）
player.currentMedia.durationString 时间格式的字符串 “4:34″
player.settings.volume 音量 （0-100）
player.settings.balance 声道，通过它应该可以进行立体声、左声道、右声道的控制。但对应的取值尚不清楚。
player.settings.mute = s 静音（s取值为true和false）
player.closedCaption.CaptioningID 网页中出现字幕的容器的ID
player.closedCaption.SAMIFileName 字幕文件地址
player.playState 返回播放器状态（ 3：正在播放，2：暂停1：已停止）

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

REAL PLAYER控制

player.DoPlay() 播放
player.DoPause() 暂停
player.DoStop() 停止
player.GetLength() 返回播放文件的总长度（以毫秒为单位）
player.GetPosition() 返回播放文件的当前时间位置（以毫秒为单位）
player.GetPlayState() 返回播放器状态（0:停止,1:连接,2:缓冲,3:播放,4:暂停,5:寻找）
player.SetPosition(n) 时间位置跳到n的地方（n取值以毫秒为单位）
player.SetVolume(n) 设置音量（n取值为0到100）
player.SetMute(s) 静音（s取值为true和false）
player.SetFullScreen() 全屏
player.setSource() 设置文件来源

这个可以播放MP3
< HTML>
< HEAD>

< /HEAD>

< center>
< table width=”390″ height=”121″ background=”MP3bg.gif” border=0 cellSpacing=0 cellPadding=0 borderColorDark=#FFFFFF borderColorLight=#ff0000>

00:00

　

00:00

< /table>
< /center>

< OBJECT id=Player style=”VISIBILITY:hidden;” height=10 width=10 classid=clsid:05589FA1-C356-11CE-BF01-00AA0055595A>




























< /OBJECT>
< INPUT type=file id=FileBtn style=”VISIBILITY:hidden;”>

2007最优秀的CSS网站设计

时间：2009年03月25日作者：愚人码头查看次数:1,472 views评论次数：0

很多人不知道的是，我同样是 Best Web Gallery 和 N.Design Studio“背后”的人. 2006年，我创建了Best Web Gallery,作为我发现的最好的 CSS and Flash 网站的收藏.我非常高兴这个项目让我有机会是我的设计思想与主流保持一致。在过去的一年里，我看了提交的许多网站， (有些很好，也有些则很糟糕).当2007年即将过去,我想与各位共同分享2007年最好的网站设计，下面是一份从 Best Web Gallery 精选的50个优秀网站列表 — 2007年最优秀的CSS网站设计！

Capture the Valley

非常漂亮的单页网站设计

Squawk Design

图形艺术学生Dominik Lenk 的令人印象深刻的设计

Holiday To Go

很喜欢红色背景的应用

Team Green

如果您喜欢我之前的 艺术设计集 ,你就会喜欢这个网站的。

Radiant Plumbing

一个铝业网站怎么可以如此有艺术性？如果文本区域的对照再高一点，它将是一个完美的设计。

Alex Buga

喜欢木质的半透明效果。

Burnett Dairy

很团结，很亲切

Variable

另一个但页面网站。

Pixelmator

一个使用了漂亮的图标和布局结构的Mac应用网站

Jon Tan

网络印刷和格栅布局的良好应用

Scrapblog

一个很好的网络程序的界面。

Marius Roosendaal

Marius Roosendaal的单页网站.不要忘了检查“白天”和”黑夜”模板.

Trale

我超喜欢Trale花在排版上的细节。

Sarah Hyland

非常好的头部设计。

Eye Candy

Mmm yummy… both the design and chocolate bars. Another good design site powered by WordPress.

RealaSponse

漂亮的两栏主页

Flame Digital

无与伦比的布局结构和铺满整个网站的漂亮背景图片.

Tickerville

我更喜欢这个网站的设计，但我不知道这样的设计/样式是否适合一个财经相关网站.

Webstock

新西兰网络研讨会网站。

Cabedge

简洁、干净、舒服的布局。

I Love Typography

John 的排版专用博客.

Shylands

简洁、大粗字体、绝佳的色彩应用…

Superawesome

非常无与伦比的插画样式和色彩风格.

Happy Cog

一个经典的漂亮的网站。

Free People

我最喜欢的商务网站只有. The amount of details spent on this site is incredible.

Wish Tree

背景上的愿望和标签很有创意!

Biola Undergrad

另一个艺术类的设计.

Viget Labs

JS和CSS的良好应用(我的意思是滚动效果).

Svenigson

非常干净的Box布局.

Stuff and Nonsense

Andy Clarke的网站.

J R Velasco

由 Miguel Ripoll 设计(我最喜欢的设计师之一). 他对网页排版很有感觉 ，布局看起来挺乱，但是内容却是精心整理过的。

Explore Cascadia

一个字：漂亮

Yellow Stone Park

在Box范围内的优秀设计

Elliot Jay Stocks

Elliot Jay Stocks的一个设计博客.他是一位很有个性的天才设计师 (结论来自于我和他的谈话).

Freelance Switch

良好的设计和精彩的内容(自由职业相关).

Knoxville

抽象类流行样式

Electric Pulp

我非常喜欢水彩效果

Vivabit

我不是个喜欢流体样式设计的人，但是这是一个非常好的。

Surfgarden

漂亮简洁的2栏博客设计。

Tanya Merone

另一个单页面网站的范例

Matt Brett

Matt Brett的博客, 他是个游戏玩家

Larissa Meek

Larissa Meek的一个漂亮的博客,她从前是个模特，现在是 AgencyNet的一位艺术导演.

Noodle Box

对比颜色的良好应用

Kineda

Terry and Tami Ng 的博客(明星和娱乐新闻).

Pod3.tv

另一个设计优秀的博客

Kev Adamson

另一个写生风格的设计

Eleven3

另一个流行/抽象的表现

Turbo Milk

图标很漂亮

Veerle’s Blog

另一个经典的优秀博客。

31three

Jesse Bennett-Chamberlain的博客和作品集。

原文地址：http://www.webdesignerwall.com/trends/best-of-css-design-2007/

翻译不到位之处，还请高手指正！

专家谈CSS设计

时间：2009年03月25日作者：愚人码头查看次数:1,192 views评论次数：0

CSS 并不总是很好对付. 这取决于你的技巧和经验. CSS编码有时会成为一场噩梦, 特别是当你还不知道文件中的元素应该适用哪些选项的时候. 一个减少代码复杂性的简易法门, 就是利用哪些鲜为人知的CSS属性来创建适用性比较强的正确标注.

下面引用的70个专家技巧,附加了他们的相关文章地址.

• 如果感兴趣你还可以阅读 53 CSS-Techniques You Couldn’t Live Without(53个你必须掌握的CSS技术),
• Digg this article(挖掘这篇文章) 如果你觉得有用.

1.1. Workflow: 上路

• 当你确定了设计思路, 请用一个空白页面展开设计. “包括页头 , 导航条, 内容样例 和页脚 之后添加HTML标记, CSS控制,这样会让事情简单清晰起来.” [CSSing]
• 务必要重置CSS样式表 “你可能会经常删除哪些不必要的特殊设置, 而充分利用每个特性的缺省值. 而另一些人则倾向于做全局重置 Global white space reset , 就是在样式表的开头把所有要素的边据(margin)和空距(padding)全部归零. Eric Meyer’s Global Reset(全局重置), Christian Montoya’s initial CSS file(初始化CSS文件), Mike Rundle’s initial CSS file, Ping Mag’s initial CSS file. [Roger Johansson]
• 使用主样式表master stylesheet. “一个常见的错误就是, 我看到很多初学者和中级玩家, 在使用样式表的时候, 由于不同的浏览器对一些样式有不同的缺省设置, 再没有统一化的情况下, 就会导致在不同浏览器中显示效果不一致. 而招致程序员抱怨调试困难. 其实, 你只要重置这些设置, 很多问题都可以得到避免. ” [Master Stylesheet: The Most Useful CSS Technique(主样式表: 最有用的CSS技术)], [Ryan Parr]

1. master.css
2. @import url("reset.css");
3. @import url("global.css");
4. @import url("flash.css");
5. @import url("structure.css");

• 保持一个有用的CSS对象库. 这对调试很有用, 但应该避免出现在发布的版本中. 因为你可以同时使用多个类名称用来调试你的一个标记(i.e.

  ...

  用了三个类名称来标记

  ). [Richard K. Miller]

1. CSS:
2. .width100 { width: 100%; }
3. .width75 { width: 75%; }
4. .width50 { width: 50%; }
5. .floatLeft { float: left; }
6. .floatRight { float: right; }
7. .alignLeft { text-align: left; }
8. .alignRight { text-align: right; }

1.2. 组织化CSS编码

• 使用主样式表组织化CSS “用主样式表组织化的样式非常有利于网站维护 . 在这个样式表中输入 reset.css, global.css, flash.css (如果需要) 和 structure.css 以及间歇使用的拓扑样式, 这里是一个如何使用这些技术的样例”

1. h2 { }
2. #snapshot_box h2 {
3. padding: 0 0 6px 0;
4. font: bold 14px/14px "Verdana", sans-serif; }
5. #main_side h2 {
6. color: #444;
7. font: bold 14px/14px "Verdana", sans-serif; }
8. .sidetagselection h2 {
9. color: #fff;
10. font: bold 14px/14px "Verdana", sans-serif; }

• 使用标注组织样式表. “把你的样式表分成不同的区域, 例如: 全局(文件体, 段落, 列表等), 页头, 页尾,页面结构, 文字风格, 导航条, 表单, 标注, 扩展,等. [5 Tips for organizing Your CSS(组织化CSS的5的窍门)]

1. /* -----------------------------------*/
2. /* ---------->>> GLOBAL <<<-----------*/
3. /* -----------------------------------*/

• 用一个内容表来组织样式表. 在你的CSS文件头, 画一个内容表, 例如, 你可以勾画出CSS控制的不同区域, 用醒目的分割来划分他们. [5 Steps to CSS Heaven(5步跨进CSS天国)]
• 用字母次序表规划样式表. “我不知道怎么想到这个主意的, 反正用了几个月, 发现找到这些样式很容易.(译者注: 对于中文用户, 除非每个样式的名称很准确,并能被大家理解, 否则可用性会很差.)” [Christian Montoya]

1. body {
2. background:#fdfdfd;
3. color:#333;
4. font-size:1em;
5. line-height:1.4;
6. margin:0;
7. padding:0;
8. }

• 把代码分成不同的块.. “很多人直觉上都会这么做, 只要变成习惯, 经年累月的实践, 这应该是最好的办法. 例如:: /* Structure */, /* Typography */ etc.” [CSS Tips and Tricks(CSS窍门和魔法)]
• 钩子, 线, 和铅坠Hook, line, and sinker. 一旦你的CSS文档已经分成了不同的区块, 你就应该思考, 如何让这些小节点上的钩子结构化, 这将给你节省大量的时间, 并让文档更有说服力.” [Ryan Parr]
• 把样式表分成不同的块. “我通常把自己的样式表分成三个块. 第一部分是元素直白定义, 变换文体, 页头风格, 重置表单的间距, 一些链接的风格, 等等. 接下来, 我会定义一些类, 例如提示框, 警告框, 等等, 我倾向于先定义主容器, 然后定义这个主容器中的元素, 这样扫一眼,就可以看到文档的规划结构, 对于哪些没有约束的容器, 我一般也要给他们一个名字.” [Jonathan Snook]

1.3. Workflow: 控项编号, 类, 同类项, 属性 Handling IDs, Classes, Selectors, Properties

• 让容器最小化. “结构化灌装文档. 新手会使用很多像表格一样的单元去构建一个文档. 而用结构化的要素构建文档才是最有效的. 要做到这点, 必须开始之前统盘考虑所有要素, 争取用通用的结构获得相同的效果, 而不是不断定义哪些小巧的DIV单元. ” [Ryan Parr]
• 属性最小化. “善用CSS. 这个大原则可以派生很多小原则: 如果没有一个点来增加属性, 就不要增加, 如果你不确定该属性的用途, 就不要增加, 如果相同的属性被赋予很多地方, 争取在一个地方定义它.” [CSSing]
• 同类项最小化. “避免不必要的同类项, 同类项越少, 问题就越容易处理.” [Jonathan Snook]
• CSS 修复点(hack)最小化. “除非是公认的或文档化的缺陷, 尽量不要使用修复点. 我常常看到的情况是, 修复点本身变成了问题. 最好找到问题的根源, 从根本上解决或避免, 而不是滥用修复点.[10 Quick Tips for an easier CSS life(10个让CSS更简单的窍门)]
• 使用CSS常量开发. “所谓常量 – 就是在很多地方使用的固定数值. 在CSS文档前面创建这些常量的说明, 颜色对照表, 利用替换的方式, 可以减少修订中的错误.” [Rachel Andrew]

1. # /*
2. # Dark grey (text): #333333
3. # Dark Blue (headings, links) #000066
4. # Mid Blue (header) #333399
5. # Light blue (top navigation) #CCCCFF
6. # Mid grey: #666666
7. # */

• 使用通用命名空间. 一套好的命名体系, 会在修复缺陷时, 节省大量时间. 我建议使用 parent_child 结构. [10 CSS Tips]
• 按语法定义类和编号. “错误的名称会引起岐义, 不便于沟通协作, 也会导致重复定义”. [Garrett Dimon]
• 用通用的CSS定义给同类项编组. “当一些元素的类型,类,或ID:s 使用相同的属性, 你可以把这些同类项编组, 以便一起定义, 而不是分开重复定义” [Roger Johansson]
• 如果一个独立属性需要复用, 就把它独立出来. “如果你发现一个属性的定义被广泛使用, 不妨把它单拿出来定义” [5 Steps to CSS Heaven]
• 尽可能树状化表达你的编号和类. 文档的层次化 contextual selectors 十分必要. 这样可以使文档更容易阅读和使用. [Chric Casciano]
• 学会充分利用CSS的瀑性(继承性)特征. “如果你的网站中有两个类似的显示区(box),你愿意定义两个样式, 还是定义一个样式后, 用一个外部样式对它进行修正?” [5 Steps to CSS heaven]
• 使用工具化标记(Tag): , 和 . “可以充分使用这些工具化标记, 对XHTML来说, 它具有更好的语意结构性, 过多的利用类来定义类似的要素, 会让文档结构本身的语法环境遭到破坏”. [Mike Rundle’s 5 CSS Tips]

1.4. Workflow: 使用缩写标注

• 缩写十六进位色彩标注. “在颜色定义中: #000 等同于 #000000, #369 等同于 #336699 [Roger Johansson]
• 用 LoVe/HAte-次序定义链接伪类 Link, Visited, Hover, Active. “可以确保你看到所有的链接样式.” [Eric Meyer]

1. a:link { color: blue; }
2. a:visited { color: purple; }
3. a:hover { color: purple; }
4. a:active { color: red; }

• 用 TRouBLed-次序定义外边距, 内边距和边框: Top, Right, Bottom, Left. “用顺时针的方向,从顶部开始定义, 养成这种习惯,还可以用缩写法快速定义.” [Roger Johansson]
• 使用缩写属性 shorthand properties.
  “使用缩写定义 margin, padding and border 属性可以节省大量空间.

1. CSS:
2. margin: top right bottom left;
3. margin:1em 0 2em 0.5em;
4. (margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;)

1. CSS:
2. border:width style color;
3. border:1px solid #000;

1. CSS:
2. background: color image repeat attachment position;
3. background:#f00 url(http://www.blog.com.cn/background.gif) no-repeat fixed 0 0;

1. CSS:
2. font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family;
3. font: italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

1.5. Workflow: 建立拓扑结构

• 用62.5%的比例, 保持 EM单位和PX单位的协同性. font-size 的缺省值是 16px; 利用这个原则, 你可以换算一个 Em 大约是10像素 (16 x 62.5% = 10). “我倾向于让不同文字之间的比例保持在62.5%. 这样可以让你同时用em 和 px 两种方法思考 ” [Jonathan Snook]
• 使用通用字符集UTF-8编写代码. . [20 pro tips]

• 使用 CSS转换大小写. 如果你相让一些内容全部大写, 很简单,只需要在CSS中做如下定义即可”. [20 pro tips]

1. h1 {
2. text-transform: uppercase;
3. }

• 使用 small-caps . 例如:

1. h1 {
2. font-variant: small-caps;
3. }

• Cover all the bases – 定义通用字体. “如果我们使用某些特殊的字体, 必须要确定浏览者的机器上也装载这些字体, 因此我们必须了解哪些是通用的字体, 才能保证设计和展示是一致的. [Getting into good coding habits]

1. p {
2. font-family: Arial, Verdana, Helvetica, sans-serif;
3. }

• 用 1.4em – 1.6em 定义线高 line-height. “line-height:1.4” 合理的线长 line-lengths应避免超过10个单词 . 例如纯黑或纯白在CRT显示器上过亮. 尝试使用次白 (#fafafa) 和灰黑(#333333,).比较理想” [Christian Montoya]
• 用 100.01% 定义HTML元素(html-element). 这个特义值 100.01% 定义字符大小可以解决很多浏览器的bug. 首先, 用百分比设置缺省的 body font size 就用这个值, 这样基本上可以解决IE, Opera, Safari中的字体不同大小和缩放的问题.” [CSS: Getting into good habits]

1.6. Workflow: 调试

• 给每个容器加边框 “例如. div { border:1px red dashed; } 这样看起来很舒服. 还有其他的方法 bookmarklets that apply borders 例如 * { border: 1px solid #ff0000; }. [Chric Casciano]. [CSS Crib Sheet]

1. * { border: 1px solid #f00; }

• 调试时, 先检查封闭元素. “很多意想不到的错误,都是由于该封闭的元素,没有被封闭导致的”. [10 CSS Tips]

2.1. 技术窍门: IDs, Classes

• 每页只能有一个ID, 但可以有多个类. “检查你的 IDs: 一个页面只能有一个元素使用一个确定的ID,很多元素可以用相同的类定义, 注意 ID 和 Class 的名字只能用使用 [A-Za-z0-9] 的字母或数字以及连接符号 (-), 开始字母不能用数字或连接符号(参照 CSS2 语法和类型.” [Roger Johansson]
• 元素在同类项(selectors)中是大小写相关的. “记住大小写相关. 当 CSS用在XHTML, 因为XML是大小写相关的.” [Roger Johansson]
• CSS classes 和 IDs 必须合法. “我们在定义这些对象的使用最好用他们的功能, 而不是他的外观” [CSS Best Practices]
• 一个元素可以使用多个类“你可以分配多个类给一个元素, 因此你通过多定义一些不同的类,而有选择的使用他们,完成你对样式的约束.” [Roger Johansson]

2.2. 技术窍门: 利用同类项

Roger Johansson 曾写过很有用的一篇文章 CSS 2.1 Selectors. 强烈推荐阅读这篇文章.你可以发现很多有用的东西. 例如同类项父子定义 ‘>’ 和 ‘+’ 在 IE6 和早期版本中并不支持.

• 你可以使用子同类项. “A child selector targets an immediate child of a certain element. A child selector consists of two or more selectors separated by a greater than sign, “>”. The parent goes to the left of the “>”, and whitespace is allowed around the combinator. This rule will affect all strong elements that are children of a div element. [Roger Johansson]

1. div > strong { color:#f00; }

• 使用多血缘同类项(adjacent sibling selector ). An adjacent sibling selector is made up of two simple selectors separated by a plus sign, “+”. Whitespace is allowed around the adjacent sibling combinator. The selector matches an element which is the next sibling to the first element. The elements must have the same parent and the first element must immediately precede the second element. [Roger Johansson]

1. p + p { color:#f00; }

• 使用特性同类项 一个特性同类项, 可以通过四种方式找到要定义的对象:

1. [att]
2. Matches elements that have an att attribute, regardless of its value.
3. [att=val]
4. Matches elements that have an att attribute with a value of exactly “val”.
5. [att~=val]
6. Matches elements whose att attribute value is a space-separated list that contains “val”. In this case “val” cannot contain spaces.
7. [att|=val]
8. Matches elements whose att attribute value is a hyphen-separated list that begins with “val”. The main use for this is to match language subcodes specified by the lang attribute (xml:lang in XHTML), e.g. “en”, “en-us”, “en-gb”, etc.

• The selector in the following rule matches all p elements that have a title attribute, regardless of which value it has:

1. p[title] { color:#f00; }

• The selector matches all div elements that have a class attribute with the value error:

1. div[class=error] { color:#f00; }

• Multiple attribute selectors can be used in the same selector. This makes it possible to match against several different attributes for the same element. The following rule would apply to all blockquote elements that have a class attribute whose value is exactly “quote”, and a cite attribute (regardless of its value):

1. blockquote[class=quote][cite] { color:#f00; }

• 使用降阶同类项descendant selectors. “Descendant selectors can help you eliminate many class attributes from your markup and make your CSS selectors much more efficient. ” [Roger Johansson]

2.3. 技术窍门: 链接样式化

• 如果使用锚点, 你要小心. “如果在你的编码中使用锚点 () 你要注意, 他会使用 :hover 和 :active 这些伪类. 为避免这些问题, 你要使用ID 来定义这些锚点,或使用内部约束 slightly more arcane 语法: :link:hover, :link:active” [Dave Shea]
• 定义链接关系 “The rel attribute is supposed to indicate a semantic link relationship from one resource to another.

1. a[rel~="nofollow"]::after {
2. content: "\2620";
3. color: #933;
4. font-size: x-small;
5. }
6. a[rel~="tag"]::after {
7. content: url(http://www.technorati.com/favicon.ico);
8. }

• “These make use of the attribute selector for space separated lists of values. Any a element with a relationship containing those values will be matched. Links with the nofollow relationship will be followed by a dark red skull and crossbones (?) and those with the tag relationship will be followed by the Technocrati icon.” [Handy CSS]
• You can mark external links automatically. Many people make use of the non-standard rel="external" relationship to indicate a link to an external site. However, adding that to each and every link is time consuming and and unnecessary. This style rule will place an north east arrow after any link on your site to an external site. [Handy CSS]

1. a[href^="http://"]:not([href*="smashingmagazine.com"])::after {
2. content: "\2197";
3. }

• 利用 outline: none;来去除链接产生的虚点框. 这一点对导航条很有用 remove dotted links

1. a:focus {
2. outline: none;
3. }

2.4. 技术窍门: CSS-技术

• 付给 标记一个 ID. “大多数情况下, 给body 放置一个 ID , 可以逐页控制CSS, 而不必要不断更换模板” [Ryan Parr, Invasion of Body Switchers]
• 用CSS创建相同高度的列. Equal Height Technique: a method to make all columns appear to be the same height. But without the need for faux column style background images. Faux Columns: with background images.
• 用 CSS做垂直布局. “假设你有一个导航菜单高度是2em. 解决方案: 在CSS中把线高设定成和显示模块一样的高度.在这个案例中,字符可以在显示模块中间浮动. ” [Evolt.org]
• 使用伪元素 pseudo-elements 和类 classes 创建动态内容. Pseudo-classes and pseudo-elements. Pseudo-classes and pseudo-elements can be used to format elements based on information that is not available in the document tree. For example, there is no element that refers to the first line of a paragraph or the first letter of an element’s text content. You can use :first-child, :hover, :active, :focus, :first-line, :first-letter, :before, :after and more.
• 通过设置

  ---

  分割的更漂亮. “把水平分割线 (

  ---

  ) 用图形代替可以增加页面的美观性. [CSS: Best Practices]
• 在每个页面使用相同的导航条 (X)HTML-编码. “许多网站都想强化导航条, 但你需要在每个页面优化导航条代码, 我们如何把两者完美的处理好呢?” [Ten More CSS Tricks you may not know]

1. XHTML:
2. • Home
   • About us
   • Contact us

• Insert an id into the tag. The id should be representative of where users are in the site and should change when users move to a different site section.

1. CSS:
2. #home .home, #about .about, #contact .contact
3. {
4. commands for highlighted navigation go here
5. }

• 布局中,使用” margin: 0 auto;" 水平居中. “利用 CSS来水平居中一个元素, 你需要设定这个元素的宽度,和水平间距就可以做到.” [Roger Johansson]

1. XHTML: