Google的 Chrome实验室 收集了很多让人难以置信的基于 HTML5 Canvas 和 JavaScript 的实验项目，里面的例子都很独特，让人惊叹。我从未想过结合 HTML 和 JavaScript 能实现这么强大的效果。今天，本文与大家分享其中9个很棒的例子，为了有更好的效果，建议在Chrome浏览器中浏览。 Untangle拖动蓝点，让所有线都不相交，看看你多久能解开？ :) Z Type一款太空射击游戏，基于ImpactJS游戏库开发。 Cube Out模仿经典的益智游戏Blockout（三维俄罗斯方块），移动和旋转方块填补空白，完成一层后会自动消隐。 Bounce 一款javascript游戏，点击和控制蓝色的盒子，让黄色的点击不要碰到红色的点。 Sketch 3D一款非常棒的素描工具，这里可看别人的作品。 ConductorConductor转换纽约地铁系统为一个互动的弦乐器，使用真实的地铁时刻表来模拟。 Bacterium模仿水族馆，您可以创建丰富多彩，充满活力的运动模式。 Ultra Neuron Pong这是模仿经典的Pong游戏开发的一款基于HTML5技术的游戏。 Tank World一款让人惊叹的三维射击游戏。
View DetailsHTML 5 可以说是近十年来 Web 标准最巨大的飞跃。和以前的版本不同，HTML 5 并非仅仅用来表示 Web 内容，它的使命是将 Web 带入一个成熟的应用平台，在这个平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。尽管 HTML 5 的实现还有很长的路要走，但 HTML 5 正在改变 Web。为了方便大家学习HTML 5 ，本文与大家分享几份 HTML 5 标签、属性、事件及浏览器兼容性速查表。 HTML 5 Cheat Sheet 非常完整的一份HTML 5速查表，包括HTML 5 标签、属性、事件及其浏览器兼容性，图片格式。 HTML 5 Visual Cheat Sheet HTML 5标签速查表，PDF格式。 HTML5 Canvas Cheat Sheet HTML 5 Canvas速查表，PDF格式。 HTML 5 Cheat Sheet 另外一份HTML 5标签速查表，PDF格式。 另外推荐三个很有帮助的网站： 1、当前浏览器HTML5支持情况在线测试：http://www.html5test.com/ 2、当前浏览器对HTML5、CSS3的支持情况：http://www.findmebyip.com/ 3、各个浏览器对HTML5、CSS3支持情况大全：http://www.caniuse.com/ 转自：http://www.cnblogs.com/lhb25/archive/2011/03/16/1965681.html
View Details//关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write("<script language=javascript>window.close();</script>"); //关闭,父窗口和子窗口都不弹出对话框,直接关闭 this.Response.Write("<script>"); this.Response.Write("{top.opener =null;top.close();}"); this.Response.Write("</script>"); //弹出窗口刷新当前页面width=200 height=200菜单。菜单栏,工具条,地址栏,状态栏全没有 this.Response.Write("<script language=javascript>window.open('rows.aspx',’newwindow',’width=200,height=200′)</script>"); //弹出窗口刷新当前页面 this.Response.Write("<script language=javascript>window.open('rows.aspx')</script>"); this.Response.Write("<script>window.open('WebForm2.aspx',’_blank');</script>"); //弹出提示窗口跳到webform2.aspx页(在一个IE窗口中) this.Response.Write(" <script language=javascript>alert('注册成功');window.window.location.href=’WebForm2.aspx';</script> "); //关闭当前子窗口,刷新父窗口 this.Response.Write("<script>window.opener.location.href=window.opener.location.href;window.close();</script>"); this.Response.Write("<script>window.opener.location.replace(window.opener.document.referrer);window.close();</script>"); //子窗口刷新父窗口 this.Response.Write("<script>window.opener.location.href=window.opener.location.href;</script>"); this.Response.Write("<script>window.opener.location.href=’WebForm1.aspx';</script>"); //弹出提示窗口.确定后弹出子窗口(WebForm2.aspx) this.Response.Write("<script language=’javascript'>alert('发表成功！');window.open('WebForm2.aspx')</script>"); //弹出提示窗口,确定后,刷新父窗口 this.Response.Write("<script>alert('发表成功！');window.opener.location.href=window.opener.location.href;</script>"); //弹出相同的一页 <INPUT type="button" value="Button" onclick="javascript:window.open(window.location.href)"> // Response.Write("parent.mainFrameBottom.location.href=’yourwebform.aspx?temp=" +str+"';"); <SCRIPT LANGUAGE="javascript"> <!-- window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no') //这句要写成一行 --> </SCRIPT> 参数解释： <SCRIPT LANGUAGE="javascript"> js脚本开始； window.open 弹出新窗口的命令； 'page.html' 弹出窗口的文件名； 'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空"代替； height=100 窗口高度； width=400 窗口宽度； top=0 窗口距离屏幕上方的象素值； left=0 窗口距离屏幕左侧的象素值； toolbar=no 是否显示工具栏，yes为显示； menubar，scrollbars 表示菜单栏和滚动栏。 resizable=no 是否允许改变窗口大小，yes为允许； location=no 是否显示地址栏，yes为允许； status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许； </SCRIPT> […]
View Details语法： box-shadow：<length> <length> <length> <length> || <color> 取值： <length> <length> <length>? <length>? || <color>： 阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色 说明： 设置块阴影 box-shadow这个属性应用的非常普遍，可以使你的元素立刻变得漂亮起来，只是记得不要把值设得太离谱。 box-shadow的四个参数： x-offset x轴偏移 y-offset y轴偏移 blur 模糊值 color of shadow 阴影颜色 下面来看一个例子，代码如下：
|
1 |
<div><span style="COLOR: #0000ff"><!</span><span style="COLOR: #ff00ff">DOCTYPE html</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">html</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">head</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">title</span><span style="COLOR: #0000ff">>盒子阴影</</span><span style="COLOR: #800000">title</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">meta </span><span style="COLOR: #ff0000">charset</span><span style="COLOR: #0000ff">="utf-8"</span><span style="COLOR: #ff0000"> </span><span style="COLOR: #0000ff">/></span><br /><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">style</span><span style="COLOR: #0000ff">></span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #800000"><br />.box </span><span style="background-color: rgb(245, 245, 245); ">{</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> width</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">300px</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> height</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">300px</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> background-color</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">#fff</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> <br /> </span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #008000">/*</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #008000"> 设置阴影 </span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #008000">*/</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> -webkit-box-shadow</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">1px 1px 3px #292929</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> -moz-box-shadow</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">1px 1px 3px #292929</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> box-shadow</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">1px 1px 3px #292929</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /></span><span style="background-color: rgb(245, 245, 245); ">}</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #800000"><br /></span><span style="COLOR: #0000ff"></</span><span style="COLOR: #800000">style</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"></</span><span style="COLOR: #800000">head</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">body</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">div </span><span style="COLOR: #ff0000">class</span><span style="COLOR: #0000ff">="box"</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">br </span><span style="COLOR: #0000ff">/><</span><span style="COLOR: #800000">br </span><span style="COLOR: #0000ff">/><</span><span style="COLOR: #800000">br </span><span style="COLOR: #0000ff">/><</span><span style="COLOR: #800000">br </span><span style="COLOR: #0000ff">/></span><br />看，是不是很有立体感？没有设置边框啊。<br /><span style="COLOR: #0000ff"></</span><span style="COLOR: #800000">div</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"></</span><span style="COLOR: #800000">body</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"></</span><span style="COLOR: #800000">html</span><span style="COLOR: #0000ff">></span></div> |
运行效果如下（Chrome中）： 还可以一次运用多个box-shadows，这样做会产生一些有趣的效果，看下面这个例子：
|
1 |
<div><span style="COLOR: #0000ff"><!</span><span style="COLOR: #ff00ff">DOCTYPE html</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">html</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">head</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">title</span><span style="COLOR: #0000ff">></</span><span style="COLOR: #800000">title</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">meta </span><span style="COLOR: #ff0000">charset</span><span style="COLOR: #0000ff">="utf-8"</span><span style="COLOR: #ff0000"> </span><span style="COLOR: #0000ff">/></span><br /><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">style</span><span style="COLOR: #0000ff">></span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #800000"><br />.box </span><span style="background-color: rgb(245, 245, 245); ">{</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> width</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">300px</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> height</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">300px</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> background-color</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">#fff</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> <br /> </span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #008000">/*</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #008000"> 设置阴影 </span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #008000">*/</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> -webkit-box-shadow</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">1px 1px 3px green, -1px -1px 3px blue</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> -moz-box-shadow</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">1px 1px 3px green, -1px -1px 3px blue</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> box-shadow</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">1px 1px 3px green, -1px -1px 3px blue</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /></span><span style="background-color: rgb(245, 245, 245); ">}</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #800000"><br /></span><span style="COLOR: #0000ff"></</span><span style="COLOR: #800000">style</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"></</span><span style="COLOR: #800000">head</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">body</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">div </span><span style="COLOR: #ff0000">class</span><span style="COLOR: #0000ff">="box"</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">br </span><span style="COLOR: #0000ff">/><</span><span style="COLOR: #800000">br </span><span style="COLOR: #0000ff">/><</span><span style="COLOR: #800000">br </span><span style="COLOR: #0000ff">/><</span><span style="COLOR: #800000">br </span><span style="COLOR: #0000ff">/></span><br />看，我有两个颜色的阴影！O(∩_∩)O哈！<br /><span style="COLOR: #0000ff"></</span><span style="COLOR: #800000">div</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"></</span><span style="COLOR: #800000">body</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"></</span><span style="COLOR: #800000">html</span><span style="COLOR: #0000ff">></span></div> |
运行效果如下（Chrome中）： 可以看到，有两个颜色的阴影。 看下面一个例子：为下面这张图片添加阴影，让其有立体感：
|
1 |
<div><span style="COLOR: #0000ff"><!</span><span style="COLOR: #ff00ff">DOCTYPE html</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">html</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">head</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">title</span><span style="COLOR: #0000ff">></</span><span style="COLOR: #800000">title</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">meta </span><span style="COLOR: #ff0000">charset</span><span style="COLOR: #0000ff">="utf-8"</span><span style="COLOR: #ff0000"> </span><span style="COLOR: #0000ff">/></span><br /><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">style</span><span style="COLOR: #0000ff">></span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #800000"><br />body </span><span style="background-color: rgb(245, 245, 245); ">{</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> width</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">500px</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> margin</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">50px auto</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /></span><span style="background-color: rgb(245, 245, 245); ">}</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #800000"><br />.box </span><span style="background-color: rgb(245, 245, 245); ">{</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> position</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">relative</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> -webkit-box-shadow</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">1px 2px 4px rgba(0, 0, 0, 0.5)</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> -moz-box-shadow</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">1px 2px 4px rgba(0, 0, 0, 0.5)</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> box-shadow</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">1px 2px 4px rgba(0, 0, 0, 0.5)</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> padding</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">10px</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> background</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">#fff</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /></span><span style="background-color: rgb(245, 245, 245); ">}</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #800000"><br />.box img </span><span style="background-color: rgb(245, 245, 245); ">{</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> width</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">100%</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> border</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">1px solid #8a4419</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> border-style</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">inset</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /></span><span style="background-color: rgb(245, 245, 245); ">}</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #800000"><br />.box:after </span><span style="background-color: rgb(245, 245, 245); ">{</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> content</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">''</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> position</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">absolute</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> z-index</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">-1</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> <br /> </span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #008000">/*</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #008000"> 阴影部分 </span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #008000">*/</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> -webkit-box-shadow</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">0 15px 20px rgba(0, 0, 0, 0.3)</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> -moz-box-shadow</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">0 15px 20px rgba(0, 0, 0, 0.3)</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> box-shadow</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">0 15px 20px rgba(0, 0, 0, 0.3)</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> <br /> width</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">70%</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> left</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">15%</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> height</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">100px</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /> bottom</span><span style="background-color: rgb(245, 245, 245); ">:</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #0000ff">0</span><span style="background-color: rgb(245, 245, 245); ">;</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #ff0000"><br /></span><span style="background-color: rgb(245, 245, 245); ">}</span><span style="BACKGROUND-COLOR: #f5f5f5; COLOR: #800000"><br /></span><span style="COLOR: #0000ff"></</span><span style="COLOR: #800000">style</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"></</span><span style="COLOR: #800000">head</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">body</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">div </span><span style="COLOR: #ff0000">class</span><span style="COLOR: #0000ff">="box"</span><span style="COLOR: #0000ff">></span><br /> <span style="COLOR: #0000ff"><</span><span style="COLOR: #800000">img </span><span style="COLOR: #ff0000">src</span><span style="COLOR: #0000ff">="allstar.jpg"</span><span style="COLOR: #ff0000"> title</span><span style="COLOR: #0000ff">="球星云集"</span><span style="COLOR: #ff0000"> </span><span style="COLOR: #0000ff">/></span><br /><span style="COLOR: #0000ff"></</span><span style="COLOR: #800000">div</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"></</span><span style="COLOR: #800000">body</span><span style="COLOR: #0000ff">></span><br /><span style="COLOR: #0000ff"></</span><span style="COLOR: #800000">html</span><span style="COLOR: #0000ff">></span></div> |
运行效果如下（Chrome中）： 以前我吗需要在photoshop中把图片做成这样的效果，现在可以直接用CSS代码来实现了。 转自：http://www.cnblogs.com/lianjun/archive/2011/03/14/1983465.html
View Details一、HTTP-EQUIV HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。常用的HTTP-EQUIV类型有： 1、Content-Type和Content-Language (显示字符集的设定) 用法：<Meta http-equiv="Content-Type" Content="text/html; Charset=gb2312">或<Meta http-equiv="Content-Language" Content="zh-CN"> 设定页面使用的字符集，用以说明主页制作所使用的文字或语言，浏览器会根据此来调用相应的字符集显示页面内容。简体中文一般为GB2132，繁体中文为BIG5，日文的字符集是iso-2022-jp，韩文的是ks_c_5601等。 2、Refresh (刷新) 用法：<Meta http-equiv="Refresh" Content="30">或<Meta http-equiv="Refresh" Content="5; Url=http://www.bazhan.net"> 让网页多少秒刷新自己，或在多少秒后让网页自动链接到其它网页。 3、Expires (期限) 用法：<Meta http-equiv="Expires" Content="0">或<Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT"> 指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新调阅。注意：必须使用GMT的时间格式。 4、Pragma (cach模式) 用法：<Meta http-equiv="Pragma" Content="No-cach"> 网页不保存在缓存中，每次访问都刷新页面。这样设定，访问者将无法脱机浏览。 5、Set-Cookie (cookie设定) <Meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday,21-Oct-98 16:14:21 GMT; path=/"> 浏览器访问某个页面时会将它存在缓存中，下次再次访问时就可从缓存中读取，以提高速度。当你希望访问者每次都刷新你广告的图标，或每次都刷新你的计数器，就要禁用缓存了。通常HTML文件没有必要禁用缓存，对于ASP等页面，就可以使用禁用缓存，因为每次看到的页面都是在服务器动态生成的，缓存就失去意义。如果网页过期，那么存盘的cookie将被删除。必须使用GMT的时间格式。 6、Window-target (显示窗口的设定) 用法：<Meta http-equiv="Widow-target" Content="_top"> 强制页面在当前窗口以独立页面显示。这个属性是用来防止别人在框架里调用你的页面。Content选项：_blank、_top、_self、_parent。 7、Pics-label (网页RSAC等级评定) 用法：<META http-equiv="Pics-label" Contect="(PICS－1.1’http://www.bazhan.net' I gen comment 'RSACi North America […]
View DetailsALIGN align 设置或获取表格排列。 ALLOWTRANSPARENCY allowTransparency 设置或获取对象是否可为透明。 APPLICATION APPLICATION 表明对象的内容是否为 HTML 应用程序(HTA)，以便免除浏览器安全模式。 ATOMICSELECTION 指定元素及其内容是否可以一不可见单位统一选择。 BEGIN begin 设置或获取时间线在该元素上播放前的延迟时间。 BORDER border 设置或获取框架间的空间，包括 3D 边框。 canHaveChildren 获取表明对象是否可以包含子对象的值。 canHaveHTML 获取表明对象是否可以包含丰富的 HTML 标签的值。 CLASS className 设置或获取对象的类。 contentWindow 获取指定的 frame 或 iframe 的 window 对象。 DATAFLD dataFld 设置或获取由 dataSrc 属性指定的绑定到指定对象的给定数据源的字段。 DATASRC dataSrc 设置或获取用于数据绑定的数据源。 disabled 获取表明用户是否可与该对象交互的值。 END end 设置或获取表明元素结束时间的值，或者元素设置为重复的简单持续终止时间。 firstChild 获取对象的 childNodes 集合的第一个子对象的引用。 FRAMEBORDER frameBorder 设置或获取是否显示框架的边框。 hasMedia 获取一个表明元素是否为 HTML+TIME 媒体元素的 Boolean 值。 HEIGHT height 设置或获取对象的高度。 HIDEFOCUS hideFocus 设置或获取表明对象是否显式标明焦点的值。 HSPACE hspace 设置或获取对象的水平边距。 ID id 获取标识对象的字符串。 innerText 设置或获取位于对象起始和结束标签内的文本。 isContentEditable 获取表明用户是否可编辑对象内容的值。 isDisabled 获取表明用户是否可与该对象交互的值。 isMultiLine 获取表明对象的内容是包含一行还是多行的值。 isTextEdit 获取是否可使用该对象创建一个 TextRange 对象。 […]
View Details<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="580" height="110"> <param name="_cx" value="10372"> <param name="_cy" value="2355"> <param name="FlashVars" value="-1"> <param name="Movie" value="swf.swf"> <param name="Src" value="1.swf"> <param name="WMode" value="Transparent"> <param name="Play" value="-1"> <param name="Loop" value="-1"> <param name="Quality" value="High"> <param name="SAlign" value> <param name="Menu" value="0"> <param name="Base" value> <param name="AllowScriptAccess" value="always"> <param name="Scale" value="ShowAll"> <param name="DeviceFont" value="0"> <param name="EmbedMovie" value="0"> <param name="BGColor" value> <param name="SWRemote" value> <embed src="1.swf" width="580" height="110" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" menu="false"></embed> </object> ——————————————————————————————————————————- 参数和属性 下列标记属性和参数描述了由“发布”命令创建的 HTML 代码。在编写自己的用于显示 Flash 内容的 HTML 时，可以参考此列表。除非特别说明，否则所有条目都同时适用于 object 标记和 embed 标记。可选条目也在此列出。Internet Explorer […]
View Details这篇文字收集了45个让人觉得不可思议的 CSS3 应用示例，它们验证了 CSS3 Transform 和 Transition 等属性的强大能力。随着越来越多的浏览器对 CSS3 支持的不断完善，设计师和开发者们有了更多的选择，以前需要使用 JavaScript 才能实现的各种很酷的界面效果和动画，如今使用纯 CSS 代码就可以很容易实现。 CSS3 Clock With jQuery Another Image Gallery Sliding Vinyl 3D Cube That Rotates Using Arrow Keys Multiple 3D Cubes (Slide In/Out) CSS3 Accordion Auto-Scrolling Parallax Isocube Image Gallery Matrix 7 Javascript-effect Alternatives Using CSS3 Image Hover Effects Turning Coke Can (Control With Scrollbar) 3D Meninas Polaroid Gallery Space Note: this one is graphic intense and takes a while to load, but the result is crazy! Mac Dock Drop-In Modals Zooming Polaroids Animated Rocket Poster […]
View Details1 又是几个基本概念 为什么要说又呢？ 在讨论继承时，我们已经列出了一些基本概念了，那些概念是跟封装密切相关的概念，今天我们要讨论的基本概念，主要是跟继承与多态相关的，但是它们跟封装也有一些联系。 1.1 定义和赋值 变量定义是指用 var a; 这种形式来声明变量。 函数定义是指用 function a(…) {…} 这种形式来声明函数。 var a = 1; 是两个过程。第一个过程是定义变量 a，第二个过程是给变量 a 赋值。 同样 var a = function(…) {}; 也是两个过程，第一个过程是定义变量 a 和一个匿名函数，第二个过程是把匿名函数赋值给变量 a。 变量定义和函数定义是在整个脚本执行之前完成的，而变量赋值是在执行阶段完成的。 变量定义的作用仅仅是给所声明的变量指明它的作用域，变量定义并不给变量初始值，任何没有定义的而直接使用的变量，或者定义但没有赋值的变量，他们的值都是 undefined。 函数定义除了声明函数所在的作用域外，同时还定义函数体结构。这个过程是递归的，也就是说，对函数体的定义包括了对函数体内的变量定义和函数定义。 通过下面这个例子我们可以更明确的理解这一点： Java代码 alert(a); alert(b); alert(c); var a = "a"; function a() {} function b() {} var b = "b"; var c = "c"; var c = function() {} […]
View DetailsJavaScript 是一种非常灵活的面向对象程序设计语言，它与传统的强类型的面向对象程序设计语言（如 C++，Java，C# 等）有很大不同，所以要实现如 C++、java、C# 当中的一些特性就需要换一种思考方式来解决。今天主要讨论如何在 JavaScript 脚本中实现数据的封装（encapsulation）。 数据封装说的简单点就是把不希望调用者看见的内容隐藏起来。它是面向对象程序设计的三要素之首，其它两个是继承和多态，关于它们的内容在后面再讨论。 关于数据封装的实现，在 C++、Java、C# 等语言中是通过 public、private、static 等关键字实现的。在 JavaScript 则采用了另外一种截然不同的形式。在讨论如何具体实现某种方式的数据封装前，我们先说几个简单的，大家所熟知却又容易忽略的 JavaScript 的概念。 1 几个基本概念 1.1 变量定义 在 JavaScript 语言中，是通过 var 关键字来定义变量的。 但是如果我们直接给一个没有使用 var 定义的变量赋值，那么这个变量就会成为全局变量。 一般情况下，我们应该避免使用没有用 var 定义的变量，主要原因是它会影响程序的执行效率，因为存取全局变量速度比局部变量要慢得多。 但是这种用法可以保证我们的变量一定是全局变量。 另外，为了保证速度，我们在使用全局变量时，可以通过 var 定义一个局部变量，然后将全局变量赋予之，由此可以得到一个全局变量的局部引用。 1.2 变量类型 没有定义的变量，类型为 undefined。 变量的值可以是函数。 函数在 JavaScript 中可以充当类的角色。 1.3 变量作用域 变量作用域是指变量生存周期的有效范围。 单纯用 { } 创建的块不能创建作用域。 with 将它包含的对象作用域添加到当前作用域链中，但 with 不创建新的作用域。with 块结束后，会将对象作用域从当前作用域链中删除。 try-catch 中，catch 的错误对象只在 catch 块中有效，但 catch 块中定义的变量属于当前作用域。 其它如 if、for、for-in、while、do-while、switch 等控制语句创建的块不能创建作用域。 用 function 创建的函数，会创建一个新的作用域添加到当前作用域中。 2 封装 下面我们就来讨论具体的封装。首先说一下大家最熟悉的几种封装：私有实例成员、公有实例成员和公有静态成员。最后会讨论一下大家所不熟悉的私有静态成员和静态类的封装办法。因为下面要讨论的是面向对象编程，所有当函数作为类来定义和使用时，我们暂且将其成为类。 2.1 私有实例成员 私有实例成员在 JavaScript 中实际上可以用函数内的局部变量来实现，它相当于类的私有实例成员。例如： class1 = function() { // private […]
View Details