使用HTML5,CSS3和jQuery增强网站用户体验

简介: 日期:2011/11/16  来源:GBin1.com 记 得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验? 是不是立刻就想到了flash实现?这彷佛年代久远的事了。使用现在最流行的web技术 HTML5,CSS3和jQuery,同样也可以实现类似的用户体验。

日期:2011/11/16  来源:GBin1.com

记 得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验? 是不是立刻就想到了flash实现?这彷佛年代久远的事了。使用现在最流行的web技术 HTML5,CSS3和jQuery,同样也可以实现类似的用户体验。而且使用这些特性将会比使用flash更加有效。也许你可能刚知道Adobe停止开 发移动版flash的消息,虽然在桌面中我们还拥有大量的flash的应用,但是随着HTML标准的完善,可能flash也要退出历史舞台了。在今天这篇 文章中,我们 将介绍一些非常实用的教程,技巧和资源来帮助大家构建一个更加丰富的用户界面。请大家给积极我们留言!您的支持是我们的最好的动力!

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

表单类

jQuery的美化Checkbox

这个教程将帮助你构建一个非常动感的checkbox,用来替换缺省的checkbox,相信大家会喜欢更富有活力的UI界面

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

Rethinking forms in HTML5

这是来自Nettus+的超棒教程,将教你如何使用HTML5特性来构建表单

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

jQuery impromtu

一个alert,对话框等组件的替代品,用户将会更喜欢这种UI元素

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

jQuery Simple Modal

一个非常灵活的对话框框架,提供了非常好的用户界面设计,能够帮助你生成非常酷的表单

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

mcDropdown

多层选择下拉框,非常适合树状结构的展现

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

jQ transform

个人非常喜欢使用的表单美化插件,能够帮助你构建漂亮的UI界面。

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

Emblematiq niceforms

非常不错的一款jQUery框架,允许你使用设计的主题将表单转化成非常酷UI。当然你也可以自己自定义一个主题

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

Uniform

Uniform将使用自定义的皮肤遮盖缺省的表单,并且可以和你实际的表单元素同步,保证了访问和兼容

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

image buttons a part of input fields

教你如何生成输入框中的按钮

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

DynamicWP contact form

非常不错的WP插件,能够生成一个停靠页边的联系人表单,不使用的时候自动隐藏

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

jQuery highlight

jQuery高亮显示功能,能够让输入高亮,提示用户输入内容

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

jQuery inline form validation

个人非常喜欢使用的表单输入验证插件,具体使用参考这篇文章:

使用jQuery插件jquery.validationEngine实现表单验证功能

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

导航类

White smoke menu style

这个jQuery开发的导航菜单让人想起了flash开发的菜单效果,整个移动如此的顺畅,让你感觉它就是flash开发的。 兼容所有的浏览器,即使javascript被关闭也可以正常工作。

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 jQuery mb.Menu

如果你想开发一个多层的属性菜单,那么这个插件就是你要找的解决方法之一。


使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

Coda Slider

一个非常不错的滑动面板,非常适合滑动类型面板的应用。 并且可以使用高级特性增强功能

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

 ID Tabs

如果考虑扩展性,这个插件恐怕是你能找到的最好的面板导航标签页插件了。

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

Smooth horizontal sliding menu

这个教程教你如何使用jQuery来创建一个垂直滑动显示的子菜单

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

jBreadCrumb Menu

这个可以缩放的当前位置可以自动根据当前位置长度来缩放,非常不错的创意

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

jQuery FLOWERNAV

非常动感的一个导航实现, 能够给你的链接添加一个花朵的效果

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

jQuery Accordion

一个使用非常简单的手风琴显示效果

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

用户界面类

jQuery Slide Note

Slide node是一个可以帮助你提供一些有效提示或者信息从而方便你访问用户使用网站的插件。

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

jQuery page peel

一个非常酷的显示广告的插件。

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

jQuery infiniScroll

jQuery的无限滚动效果插件,用来帮助你现实大幅的内容

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

jQuery SliderNav

一个动态垂直滑动显示导航菜单的插件

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

jQuery tipped

一个非常酷的插件允许你添加提示到你的网站。当然提供了可选的皮肤。

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

Supersized

一个能够让你的网站背景幻灯显示的插件

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

Imagin8

不是一个简单的图片幻灯插件,它能够让你指定一个目录,这个目录下的所有图片都能够显示,不需要你在HTML代码中指定,非常实用!

jQuery Lettering

一个可以帮助你控制每个单独字母的插件。 帮助你有效的创建一些独特的文字效果

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

jQuery stylesheet Switcher

这个插件允许你添加链接来修改页面的样式表

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

Flip

Flip是一个帮助你实现翻动元素效果的jQuery插件

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

目录
相关文章
|
10天前
|
XML 前端开发 JavaScript
Html:CSS介绍
Html:CSS介绍
25 1
|
10天前
|
前端开发
Html:CSS的书写位置
Html:CSS的书写位置
19 0
|
5天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
6天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!
|
9天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
9 2
|
11天前
|
JavaScript 前端开发
JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS
17 4
|
9天前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
|
10天前
|
前端开发 数据安全/隐私保护 容器
HTML+CSS 水滴登录页
该代码实现了一个创意的水滴登录页面,包含一个水滴形状的登录框与两个按钮(忘记密码和注册)。登录框包括用户名、密码输入框及登录按钮。页面设计独特,采用渐变色与动态效果,增强了交互性和视觉美感。以下为关键实现步骤: - 重置默认样式。 - 设置页面背景颜色和尺寸。 - 定义登录表单容器的布局、位置和尺寸。 - 设置登录表单内容样式,包括3D效果和过渡动画。 - 创建伪元素增强水滴效果。 - 设定输入框容器和输入框样式。 - 为提交按钮、忘记密码和注册按钮设定特定样式,并添加悬停效果。
WK
|
12天前
|
存储 移动开发 前端开发
HTML5和CSS5有什么区别
HTML5和CSS5在网页设计中扮演不同角色。HTML5是超文本标记语言的第五版,通过新特性如实时更新、跨平台运行及更好的安全性等,定义网页内容和结构。尽管常说CSS5,实际最新的CSS版本包含多个模块如CSS Grid和Flexbox,主要用于控制网页布局和样式,提供强大的选择器、动画支持和响应式设计,与HTML5相辅相成,共同构建现代网页的基础架构。
WK
28 3
|
25天前
|
XML JavaScript 前端开发
JavaWeb基础4——HTML,JavaScript&CSS
HTML,JavaScript&CSS、元素、标签、css 选择器、属性、JavaScript基础语法、JavaScript对象、BOM浏览器对象模型、DOM文档对象模型、事件监听、正则对象RegExp/ES6
JavaWeb基础4——HTML,JavaScript&CSS
下一篇
无影云桌面