HTML5
关注
分享
扫一扫
文章平均质量分 62
zlpx1983
这个作者很懒，什么都没留下…
展开
-
在JQuery 中用fadeToggle()设置动画的持续时间
的例子展示了，你如何利用fadeToggle()设置渐变动画的持续时间。 <!DOCTYPE html><html><head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&...2011-10-23 16:02:02 · 1071 阅读 · 0 评论 -
在HTML对象上应用多个class Name
<!DOCTYPE html><html><head> <title>Applying multiple class names to an object in HTML</title> <style type="text/css"> .sty1 {原创 2012-06-12 22:34:40 · 335 阅读 · 0 评论 -
利用CSS3创建用户可以改变大小的DIV容器
下面的例子展示了你如何利用CSS3创建用户可以改变大小的DIV容器。通过设置resize和overflow样式。 <!DOCTYPE html><html><head> <title></title> <style type="text/css"> .isResi原创 2011-11-30 19:01:23 · 259 阅读 · 0 评论 -
使用CSS3生成一个inset盒子阴影
在前面的例子里面， 用CSS3创建一个简单盒子的阴影。下面的例子，展示给你在box-shadow样式里面用CSS3和指定inset的参数。<!DOCTYPE html><html><head> <title>Creating an inset box shadow on a container using CSS3</ti...原创 2012-06-03 19:55:55 · 1416 阅读 · 0 评论 -
使用AJAX和XMLHttpRequest动态加载内容
下面的例子展示了你如何动态load内容。使用AJAX和XMLHttpRequest object.<!DOCTYPE html><html><head> <title>Dynamically loading content using AJAX and XMLHttpRequest</title> <s...原创 2012-06-03 19:49:05 · 241 阅读 · 0 评论 -
HTML5中交替变换表格的行颜色
下面的例子展示了你如何交替展示表格的行的颜色。使用CSS3中的 nth-child(event)和nth-child(odd)， CSS3的伪选择器。 <!DOCTYPE html><html><head> <title></title> <style type="text/css"&g2011-11-13 22:57:53 · 1470 阅读 · 0 评论 -
HTML5中用AJAX动态加载JSON文件
下面的例子展示了你如何动态加载和解析一个外部的JSON对象，使用了AJAX和HTML5的JSON.parse()方法。 <!DOCTYPE HTML><html><head> <title>Simple AJAX .JSON load example</title></head><...2011-11-08 14:20:46 · 796 阅读 · 0 评论 -
使用CSS3生成简单的box影子
下面的例子展示了你可生成一个简单的box的影子，使用css3中的box-shadow <!DOCTYPE html><html><head> <title>Creating a simple box shadow on a container using CSS3</title> <styl...原创 2012-04-28 16:27:00 · 239 阅读 · 0 评论 -
将javascript对象转换为JSON字符串
下面的例子展示了你可以转换一个JavaScript对象成为JSON兼容的的字符串。使用JavaScript的静态的方法JSON.stringify()。<!DOCTYPE html><html><head> <title>Converting a JavaScript object to a JSON string&l...2012-04-24 12:51:22 · 165 阅读 · 0 评论 -
在HTML列表上改变列表位置风格
下面的例子展示了你如何在list上增加list-style-image。 <!DOCTYPE HTML><html><head> <title>Using a custom image as a bullet on an HTML list</title> <style type="text...原创 2012-06-12 22:56:12 · 515 阅读 · 0 评论 -
在HTML列表上动态改变列表位置风格
下面的例子展示了你如何在list上动态改变list-style-type。<!DOCTYPE HTML><html><head> <title>Changing the bullet type on an HTML list</title> <style type="text/css"&原创 2012-06-12 23:04:32 · 358 阅读 · 0 评论 -
在HTML5中自动设置Form的焦点
下面的例子展示了你如何在HTML5中设置Form的焦点。通过设置autofocus属性。<!DOCTYPE html><html><head> <title>Autofocusing a form input text control in HTML5</title></head><b...原创 2012-03-28 11:40:00 · 308 阅读 · 0 评论 -
使用CSS3建立不可选的的文字
下面的例子展示了在HTML5中你如何使用CSS建立不可选的文字。 <!DOCTYPE HTML><html><head> <title>Creating non-selectable text using CSS</title> <style type="text/css">原创 2012-03-20 11:55:28 · 97 阅读 · 0 评论 -
在HTML5中使用Form新的input types
下面的例子展示了在HTML5中你如何使用新的form input type，和现在的iPod Touch（使用IOS4.2.1和Safari 5.0.2）输出一样。<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title&2012-03-19 13:09:53 · 134 阅读 · 0 评论 -
在容器内使用CSS设置背景颜色
下面的例子展示了你如用CSS3展示当用鼠标经过的时候，改变背景的颜色。<!DOCTYPE HTML><html><head> <title>Setting a background color hover on a container using CSS</title> <style type=...2012-03-19 13:02:57 · 546 阅读 · 0 评论 -
用CSS3在一个容器中使用特定的圆角
下面的例子展示了你如何使用CSS3在HTML容器中设置一个特定的圆角半径。使用border-top-left-radius 和border-bottom-right-radius样式。<!DOCTYPE HTML><html><head> <title>Rounding specific corners on a co...2012-03-18 22:56:58 · 243 阅读 · 0 评论 -
用CSS3生成多列文本流
下面的例子展示了你如何生成多列文字的布局。通过设置column-count 。 <!DOCTYPE html><html><head> <title>Creating multi-column text flows using CSS3</title> <style type="text/c...2012-03-18 22:51:47 · 177 阅读 · 0 评论 -
用HTML5的本地存储功能
下面的例子展示了在HTML5应用程序中你如何保存数据在客户端本地，使用localStorage属性。 <!DOCTYPE HTML><html><head> <title>Using local storage in HTML5</title></head><body onload="2012-03-09 18:43:14 · 130 阅读 · 0 评论 -
在JS中利用arrays 排序
下面的一组例子展示了你如何在JS中利用arrays排序 <!DOCTYPE HTML><html><head> <title>Sorting arrays using JavaScript</title></head><body> <div id="原创 2012-06-12 23:16:58 · 112 阅读 · 0 评论 -
在HTML的text input控件获取焦点时设置背景颜色
下面的例子展示了在HTML的text input控件获取焦点时设置背景颜色。通过设置background-color样式和:focuse 伪选择器（pseudo-selector）. <!DOCTYPE html><html><head> <title>Setting the background color on a...原创 2012-04-24 12:46:33 · 3154 阅读 · 0 评论 -
用HTML5产生操作系统通知
下面的例子展示了你如何产生系统的通知。使用HTML5中的Notifications API 和Google Chrome浏览器. <!DOCTYPE HTML><html><head> <title>Creating OS notifications in HTML5</title></head&...2011-12-13 15:07:32 · 322 阅读 · 0 评论 -
使用CSS3样式相邻选择器
使用 （+）符号。 <!DOCTYPE html><html><head> <style type="text/css"> h2 + p { color: red; } </style></head>&2011-10-24 13:39:25 · 230 阅读 · 0 评论 -
用CSS3设置mailto：像网页中使用css一样
下例显示了你可以怎样设计mailto:超链接的网页使用CSS属性选择器。 <!DOCTYPE html><html><head> <style type="text/css"> a[href^='mailto:'] { color: green; } ...原创 2011-10-24 13:31:01 · 441 阅读 · 0 评论 -
用JQuery寻找页面所有的电子邮箱地址
下面的例子展示了如何使用JQuery找到所有的电子邮箱地址。 <!DOCTYPE html><html><head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">...原创 2011-10-24 13:22:05 · 419 阅读 · 0 评论 -
HTML5内联编辑
下面的例子展示了使用div的内联编辑模式。 <html> <head> <title> Editable &lt;div&gt; Element </title> <script type="text/javascript"> fu2011-10-24 09:22:01 · 163 阅读 · 0 评论 -
用 JQuery隐藏内容
下面的例子展示了，你如何用JQuery动态显示和隐藏一段内容。使用hide(), show()和toggle()函数。 <html><head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.j...2011-10-23 21:35:23 · 116 阅读 · 0 评论 -
在HTML中的一个对象应用多个 class 名称
下面的例子展示了你如何应用多个CSS class名称给一个HTML对象。通过在HTML中设置class属性，或者在JavaScript设置className 属性。 <!DOCTYPE html><html><head> <title>Applying multiple class names to an object...原创 2011-10-23 21:27:59 · 2911 阅读 · 0 评论 -
在HTML5中利用Canvas画图
下面的例子展示了如何利用Canvas画图。可以在FF和Chrome等浏览器下查看。 <!DOCTYPE html><html><head><title>Canvas Example</title><script type="text/javascript">function loa2011-10-23 17:52:48 · 160 阅读 · 0 评论 -
用JQuery改变图片的透明度
下面的例子展示了你如何改变项目的透明度。当鼠标滑过<img>标签时，用hover()函数设置透明度样式。 <!DOCTYPE html><html><head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqu...原创 2011-10-23 16:50:58 · 3586 阅读 · 0 评论 -
使用CSS3样式Child选择器
使用 （>）符号。 <!DOCTYPE html><html><head> <style type="text/css"> body > p { color: red; } </style></head&am2011-10-24 13:43:55 · 212 阅读 · 0 评论 -
HTML5 使用CSS 格式化fieldset容器的Legend
下面的例子展示了，你如使用CSS来改变HTML5的Fieldset标签的legend。 <!DOCTYPE html><html><head> <style type="text/css"> label { color: #F00; } ...2011-10-25 13:25:03 · 184 阅读 · 0 评论 -
HTML5中截取文字
下面的例子展示了如何在在HTML5中截取text。通过设置 text-overflow 样式为“ellipsis”。 <!DOCTYPE html><html lang="en"><head> <style type="text/css"> .truncated { colo...2011-11-01 21:37:51 · 339 阅读 · 0 评论 -
用JQuery改变HTML中Element的text颜色
下面的例子展示了如何在在HTML5中用JQuery设置HTML中Element的颜色。用JQuery 和 CSS()方法 。 <!DOCTYPE html><html><head></head><body> <p id="debug">The quick brown fox g2011-11-01 21:29:47 · 370 阅读 · 0 评论 -
HTML5中使用geolocation API获取用户的位置
下面的例子展示了如何在在HTML5中通过geolocation API 获取用户的位置（经度，纬度）。 <!DOCTYPE html><html><head> <script type="text/javascript"> function body_onLoad() { i...2011-10-27 13:20:02 · 192 阅读 · 0 评论 -
在JQuery监听Progressbar UI小部件的完成事件
下面的例子展示了如何在ProgressBar UI 小部件上监听完成事件。 <!DOCTYPE html><html><head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="sty...2011-10-27 12:57:47 · 221 阅读 · 0 评论 -
在JQuery中开始使用Progressbar UI小部件
下面的例子展示了如何在ProgressBar UI 小部件上通过JQuery设置value选项来设置它的value。 <!DOCTYPE html><html><head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquer...2011-10-26 12:22:22 · 117 阅读 · 0 评论 -
HTML5 给input和textarea HTML标签增加 prompt
下面的例子展示了，如何给INPUT和TEXTAREA标签通过设置attribute。 <!DOCTYPE html><html><body> <table> <tr> <th>Username:</th> &2011-10-26 12:22:07 · 638 阅读 · 0 评论 -
HTML5 使用fieldset 标签给元素分组
下面的例子展示了，如何使用<FIELDSET>给元素分组, 如何使用<LEGEND>标签。 <!DOCTYPE html><html><head></head><body> <fieldset> <legend2011-10-25 14:14:19 · 256 阅读 · 0 评论 -
HTML5 使用fieldset 标签disable属性
下面的例子展示了，如何使用FIELDSET的disable属性。<!DOCTYPE html><html><body> <fieldset disabled> <legend>Comments form</legend> <table>2011-10-25 14:14:06 · 638 阅读 · 0 评论 -
在HTML5中定制数据属性
下面的例子展示了你如何在HTML5中定制数据的属性。使用dataset属性和getAttribute()方法。 <!DOCTYPE html><html><head> <title>Using custom data attributes in HTML5</title> <style type=...原创 2012-04-02 14:02:19 · 94 阅读 · 0 评论