资讯频道 → Web前端
阅读更多

5顶
1踩

Web前端

原创新闻 24 个实用的 HTML5 前端开发教程

2012-12-28 17:34 by 副主编 wangguo 评论(2) 有54102人浏览
css html5 jquery web

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

本文带来24个实用的web前端开发教程，涵盖HTML5、CSS3、jQuery等技术，希望能够帮你学习到一些新的技术，或为你的开发工作带来一些灵感。你可以通过图片下面的链接来查看演示和详细教程。

1.  使用jQuery、HTML5和CSS3创建音频播放器



演示 / 教程

2.  使用jQuery、HTML5和CSS3创建视频播放器



演示 / 教程

3.  制作可本地存储信息的HTML5表单



演示 / 教程

4.  使用HTML5和CSS3创建非常酷的表单



演示 / 教程

5.  使用伪元素和自定义属性创建CSS3菜单



演示 / 教程

6.  使用CSS3 Transitions创建虚化效果菜单



演示 / 教程

7.  HTML5 Gamepad（游戏手柄） API入门



演示 / 教程

8.  使用HTML5和CSS3创建流式布局



演示 / 教程

9.  使用CSS 3D Transforms创建类似苹果的登录表单



演示 / 教程

10.  使用jQuery和CSS3创建图像滑块



演示 / 教程

11.  使用CSS3伪元素创建堆叠效果



演示 / 教程

12.  基于HTML5 Canvas和jQuery的图片幻灯效果



演示 / 教程

13.  纯CSS下拉菜单



演示 / 教程

14.  创建三角形效果



演示 / 教程

15.  CSS3 vs Photoshop：Transforms



演示 / 教程

16.  基于CSS Transitions的圆形悬浮效果



演示 / 教程

17.  创建手写信风格的联系人表单



演示 / 教程

18.  CSS社交按钮



演示 / 教程

19.  创新型的Web字体样式



演示 / 教程

20.  HTML5 Slider元素



演示 / 教程

21.  基于CSS3 Transitions和Transforms的表单



演示 / 教程

22.  使用CSS3实现Orman Clark的垂直导航菜单



演示 / 教程

23.  弹出式的个人信息框



演示 / 教程

24.  使用jQuery、CSS3和HTML5创建上传表单



演示 / 教程

Via Queness
  • 大小: 21.2 KB
  • 大小: 45.9 KB
  • 大小: 22.5 KB
  • 大小: 20.9 KB
  • 大小: 28.3 KB
  • 大小: 32.4 KB
  • 大小: 20.6 KB
  • 大小: 51 KB
  • 大小: 23.8 KB
  • 大小: 30.6 KB
  • 大小: 31.2 KB
  • 大小: 42.7 KB
  • 大小: 23.9 KB
  • 大小: 10.3 KB
  • 大小: 33.6 KB
  • 大小: 47.4 KB
  • 大小: 30.5 KB
  • 大小: 22.3 KB
  • 大小: 34.6 KB
  • 大小: 28 KB
  • 大小: 20.3 KB
  • 大小: 22.3 KB
  • 大小: 25.3 KB
  • 大小: 20.9 KB
5
顶
1
踩
评论 共 2 条 请登录后发表评论
2 楼 coffeesweet 2012-12-31 15:01
第6个很适合做个人站。
1 楼 qweer521775 2012-12-30 15:08
挺漂亮滴

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • HTML5前端教程分享：前端模块化开发

    由于以前一直做 JavaEE 开发的缘故，在 JavaScript 开发中，我已经习惯将项目中的一些通用功能抽象出来，形成一个个的独立函数，以便于实现代码复用，如： function css(element, attr) { // 获取 element 元素的 ...

  • 【前端系列教程之HTML5】01_HTML概述

    作为一个前端开发工程师，使用一款自己上手且功能强大的开发工具是非常重要的，但是面对这么多开发工具，到底哪个比较好呢？下面给大家推荐几款自己感觉还不错的前端开发工具，希望作为大家的参考。 1.1.1、...

  • Delphi Web前端开发教程（1）：基于TMS WEB Core框架

    Delphi WEB开发框架简介............................................................... 23 Delphi开发的部分应用软件App展示..................................................... 25 Delphi/Object Pascal...

  • 写给Web开发人员看的HTML5教程,响应式Web开发项目教程（HTML5+CSS3+Bootstrap）

    内容简介互联网的世界离不开前端开发，大前端时代最大的特点在于一次开发，同时适用多个平台，可以说是Web统一的时代。本书将当前热门响应式Web开发与HTML5和CSS3完美的结合起来，以项目为导向，深刻且通俗地揭示了...

  • 分享 82个实用的前端开发工具

    希望这些工具可以提升的开发效率，同时，也可以帮助您更好的学习前端开发。 01、Day.js 地址：https://day.js.org/en/ Day.js 是一个极简的 Javascript 库，大小只有大约 2Kb。 它可以在浏览器和 NodeJs（服务器端...

  • 前端开发应知网站(强烈推荐)

    作为一名前端开发者（所有程序员）最起码遇到bug就算不会解决也应该会搜解决问题的答案。 一般笔者会先在百度搜（关键词一定要输入正确） 如果没搜到会再去bing里面看看 还没有的话就去github的Issues里面再看看 ...

  • 45个实用的前端开发工具汇总

    作为开发者的我们，学会使用一些适合自己的开发工具，可以让我们的生活更加自由轻松，因此，今天我跟大家分享45款实用的工具，主要是针对开发与设计人员的，希望这些工具能够帮助到你。 现在，我们就开始今天的内容...

  • 为前端开发者准备的 20 个实用的 HTML5 教程

    HTML5越来越受追捧，成为耀眼的技术明星，应用领域也越广，在这里为前端开发者准备了20个实用的HTML5教程。 HTML5: 基础知识 从头开始编码的HTML5布局 用 HTML5 设计一个博客 用 HTML5+CSS3 创建优雅的...

  • 大屏大概是怎么个开发法（前端）

    写在前面，博主是个在北京打拼的码农，从事前端工作5年了，做过十多个大大小小不同类型的项目，最近心血来潮在这儿写点东西，欢迎大家多多指教。 对于文章中出现的任何错误请大家批评指出，一定及时修改。 有任何想...

  • WEB前端开发学习5大网站，你用过几个？

    “工欲善其事，必先利其器”，学习WEB前端开发也是一样。 一、前端视频教程-51自学网 我要自学网是由佛山市丰智胜教育咨询服务有限公司倾力打造的在线实用技能学习平台。该平台成立于2007年6月7日，是一家专业...

  • 这12个前端在线工具网站，建议每个开发人员了解下

    尽管前端网站开发可能会具有挑战性，但并不一定非常困难。...希望这些资源能够帮助您更好地完成前端开发工作。1. CanIUsecaniuse.com是一个流行的网站，它提供了关于不同Web技术的浏览器兼容性信息。该网站列...

  • web前端入门到实战：纯HTML做出几个实用网页效果

    在我们以往看到的页面效果中，很多效果是需要JS搭配使用的，而今天在本文中，我将介绍如何使用纯HTML打造属于自己的实用效果。 **1. **折叠手风琴 使用Details和Summary标签可以创建没有JavaScript代码的可折叠手...

  • 最实用的web前端开发知识框架图

    web前端的知识点非常多，也非常散，需要好几层结构来组织这个体系，否则就会显得很乱。那么如何组织、把谁和谁放在一块儿？这是真正值得我们去思考的，你也可以自己来思考一下这个问题。 在我总结的这个知识框架中...

  • 2021年web前端开发视频教程零基础自学HTML/VUE/JS全栈项目实战全套课程

    【web前端开发课程介绍】： 随着移动互联网的深入发展，多屏互动和多端兼容友好的界面成为目前系统重要的需求，让前端开发工程师一跃成为目前市场紧俏的人才。 本课程内容包含目前的Vue、React前端框架，把全栈...

  • HTML5前端开发实战08-外语培训

    在这个专栏中介绍了前端开发基本技能，例如：HTML5、CSS、JavaScript等等。然而由于它的定位就是基础理论知识，所以在项目开发这方面就略显不足了。为了弥补欠缺，我打算新开一个专栏《HTML5前端开发实战》讲解前端...

  • Web前端：前12个易于Web开发的前端开发工具

    如今，大多数组织都专注于前端开发，以提高用户参与度，产生投资回报率，网站效率和更好的网站外观。所有这些因素都有助于增强数字平台的业务可见性。

  • HTML5前端知识图谱

    HTML5知识图谱HTML5知识概要 HTML5知识概要

  • 前端开发：Html5和CSS3

    HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。 HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，...

  • Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）

    转载：http://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-12.html ...梦想天空博客关注 前端开发 技术，分享各种增强网站用户体验的 jQuery 插件，展示前沿的 HTML5

  • 如何成为前端开发人员（完整的实用指南）

    前端开发人员，也称为前端工程师，是指通过HTML，CSS和Javascript将设计转换为工作网站页面的人员，以便用户可以通过浏览器访问该网站页面并与之交互。 十年前，还没有“前端开发人员”这样的术语。当有人开发网站...

Global site tag (gtag.js) - Google Analytics