炫意 HTML5

  • 网站首页
  • 业界动态
    • HTML5动态
    • JScript动态
  • HTML5教程
  • HTML5游戏
  • Javascript
  • CSS3教程
  • 前端资源
    • 工具下载
    • 演示效果
    • HTML5网站
  • HTML5论坛
当前位置: HTML5首页 » CSS3教程 » 10个不错的CSS3表单教程
HTML5特性:Canvas | WebGL | SVG | Video | Form | 选择器 | 本地储存 | 本地数据库 | 离线应用 | WebWorker | WebSocket | 桌面提醒 | 拖拽 | 地理位置定位

HTML5教程

  • HTML5拖拽上传图片,可以多张同时上传
  • Web Notifications - Web通知
  • HTML5实现从桌面拖拽到网页
  • HTML5表单新功能解析
  • HTML5之Geolocation API、如何获取女神地址
  • 移动浏览器内核

CSS3教程

  • CSS实例教程:创意CSS3头像展示教程
  • HTML5+CSS3城市场景动画
  • CSS3制作迷你播放器面板
  • css3学习-插花的杯子
  • 15种基础的可以直接使用的CSS3样式
  • 25个CSS3高级用户界面特效教程(2)

Javascript

  • JavaScript异常 档案
  • 纯 JavaScript 实现的 OAuth 认证
  • 使用3D引擎threeJS实现星空粒子移动
  • WebSocket的JavaScript例子
  • node.js,你能理解么
  • 谷歌提升Dart编译器及虚拟机速度,核心库将无大变
Print Friendly and PDF
 
炫意HTML5 | CSS3教程 | 2011 年 8 月 28 日

10个不错的CSS3表单教程

腾讯微博 新浪微博 百度搜藏 QQ空间 人人 QQ收藏 雅虎收藏 做啥 豆瓣分享 Google+ 更多分享

   注:本文由敏捷翻译自Jean-Baptiste Jung的博文。如需转载,请参照文章末尾处的声明。

   CSS3的出现,为制作更好的网页表单带来无数新的可能。在本文中,我收集了10种运用新技术CSS3,制作非常棒的表单的教程。

   1. HTML5 和 CSS3表单

   HTML5引进了类似诸如滑动条、数字旋转器、日期选择自定义这些实用的新表单元素。该教程会教你怎样用HTML制作表单,并且和CSS3相得益彰。它能够将CSS3和HTML5巧妙地结合在一起。


   2. 无图片和JavaScript的 CSS3 表单

   虽然这个教程是法语的,但是效果出人意料。对于不会法语的读者,只需要找到源代码,并充分利用它。



   3. 使用 HTML5 & CSS3 制作一个样式新颖的联系表单

   我非常喜欢英国web开发人员Chris Spooner的作品。这次,他的一个实用教程,它告诉你如何创作表单并利用CSS3设计。制作表单并用CSS3去美化的实用教程。看看他的作品,是不是非常酷?


   4. 精美的 CSS3 搜索表单

   大多数搜索表单(包括我现在正在使用的!)看起来索然无味。稍微借用CSS3,你就能将过时、无聊的表单变得非常时髦、吸引人。这是一个必读的教程。



   5. 用CSS3制作更精美的网页表单

   这个精简的教程会告诉你如何利用CSS3的一些基本功能(比如:box-shadow),来制作一个表单。


   6. 流畅的CSS3登录表单

   同样,这也是个精简的教程,它会教你利用CSS3制作一张无插图的简易表单。



   7. 梦幻般的CSS3表单

   看,这个表单是不是非常棒?这个表单没有使用任何图片,只有CSS3。我强烈建议大家好好的学习这个教程以及源代码,因为你会学到非常多精湛的技术,来制作无插图的精美表单。


   8. 简洁个性的CSS3表单

   这个表单简易、简洁且样式新颖。虽然没有什么特别的,但在制作绝大多数网站时你会用得到这些技巧。


   9. 使用 CSS3 和 jQuery 的用户注册表单

   对于制作更为实用的表单来说,jQuery绝对不失为一个非常棒的工具。这个教程会教给你如何使用CSS3制作一个好看的表单,以及如何利用jQuery制作一个用户界面更友好的表单。



   10. jQuery和CSS3下拉菜单集成的表单

   最后一个教程同样重要,它教你制作jQuery & CSS3 下拉菜单集成表单。毫无疑问,你的客户肯定会喜欢的!



   ——————————————————————-
   本文转自 伯乐在线




文章标签:css3、css3教程、教程
  1. 20个很酷的CSS3导航菜单制作教程
  2. 47个惊人的CSS3动画演示
  3. 24个为Web开发人员准备的CSS3实用教程
  4. 给力,20个HTML5视频播放器及代码
  5. 让混蛋IE支持CSS3的项目-PIE
  6. 11个CSS3按钮制作教程
  7. 纯CSS3制作的Windows7开始菜单
  8. CSS 3模块化简介
  9. Dreamweaver CS5.5 简体中文版
  10. CSS和CSS3按钮选择器对比
  11. CSS3+jQuery制作切角的Tabs
  12. 使用CSS3创建多级导航菜单
« Diffbot:开发者工具 将web内容转换成应用 9个HTML5和JavaScript特效 »
没有评论
点击这里取消回复。
发表评论

  • HTML5论坛文章精选
    • HTML5 LocalStorage实现跨页面通信channel
    • jQuery和CSS3创建多种风格绚丽的菜单
    • HTML5 中 div section article 的区别
    • 理解Node.js的event loop
    • [视频教程] HTML5最简单的入门教程
  • 赞助商广告
  •  炫意HTML5站长推荐
    5本经典的HTML5教程
    HTML5开发工具
    HTML5是什么
    20个很酷的CSS3导航菜单制作教程
  •  近期文章推荐阅读
    • HTML5拖拽上传图片,可以多张同时上传
    • JavaScript异常 档案
    • 谷歌欲颠覆html5标准:新编码减6成体积
    • 纯 JavaScript 实现的 OAuth 认证
    • Web Notifications – Web通知
    • HTML5实现从桌面拖拽到网页
    • HTML5表单新功能解析
    • HTML5开发者心声:浏览器兼容性成最大问题
    • HTML5成功移植虚幻3:《史诗城堡》Demo发布
    • Turbulenz:HTML5 2D和3D游戏引擎开源
    • 携程网实习案例同享:运用HTML5监控网站功用
    • Fb收购HTML5游戏平台Spaceport部分团队
    • HTML5多平台互联网技术
    • 使用3D引擎threeJS实现星空粒子移动
    • HTML5之Geolocation API、如何获取女神地址
    • CSS实例教程:创意CSS3头像展示教程
    • WebSocket的JavaScript例子
    • node.js,你能理解么
    • 中国HTML5产业联盟呼之欲出广告平台作用凸显
    • 移动浏览器内核
  •  炫意 HTML5 的标签
    android API app canvas css css3 css3教程 dart flash google html html5 html5动态 html5教程 html5游戏 JavaScript jquery node.js web webgl Web编程语言 互联网 动画 原创 字体 工具 平台 应用 开发 开发工具 拖拽 支持html5 教程 标签 框架 浏览器 游戏 演示 移动 移动互联网 编辑器 脚本语言 观点 视频 选择器
  • 炫意HTML5
    新浪微博: http://weibo.com/xyhtml5
    腾讯微博: http://t.qq.com/xyhtml5
    读者墙壁: 帅哥美女到此一游

  •  热门文章推荐阅读

  • 全站友情链接
    币购优惠  TinySEO 
  • 关联文章 (YARPP)
    1. 20个很酷的CSS3导航菜单制作教程
    2. 47个惊人的CSS3动画演示
    3. 24个为Web开发人员准备的CSS3实用教程
    4. 给力,20个HTML5视频播放器及代码
    5. 让混蛋IE支持CSS3的项目-PIE
    6. 11个CSS3按钮制作教程
    7. 纯CSS3制作的Windows7开始菜单
    8. CSS 3模块化简介
    9. Dreamweaver CS5.5 简体中文版
    10. CSS和CSS3按钮选择器对比
    11. CSS3+jQuery制作切角的Tabs
    12. 使用CSS3创建多级导航菜单

炫意 HTML5 © 2011.       网站地图     HTML5网站     HTML5游戏

无觅相关文章插件,快速提升流量