<!doctype html>

 <html lang="en">

  <head>

   <meta charset="UTF-8">

   <meta name="Generator" content="EditPlus®">

   <meta name="Author" content="">

   <meta name="Keywords" content="">

   <meta name="Description" content="">

   <title>HTML5&CSS3经典动态表格</title>

   <style>

     *:focus{outline:none}

     *{list-style-type:none;margin:0;padding:0}

     /*style*/

     #myForm h2,#myForm label{font-family: Georgia, Times, "Times New Roman", serif;display:inline}

     #Tips,#Notes{font-size:11px;}

     #Tips{display:inline;float:right;margin-top:20px;color:#d45252;}

     /*ul*/

     #myForm ul{width:800px;}

     /*li*/

     #myForm li{padding:12px;position:relative;border-bottom:1px dashed #eee}

     #myForm li:first-child,#myForm li:last-child{border-bottom:1px solid #666}

     /*label*/

     #myForm label{width: 150px;margin-top: 3px;display: inline-block;float: left;padding: 3px;}

     /*input*/

     #myForm input{height: 20px;width: 220px;padding: 5px 8px;}

     /*textarea*/

     #myForm textarea{width:300px;padding:8px;}

     /*Notes*/

     #Notes{background: #d45252;

         border-radius: 3px 3px 3px 3px;

         color: white;

         margin-left: 8px;

         padding: 5px 6px;

         z-index: 99999;

         position: absolute;

         display: none;

         }

     #myForm input:focus +#Notes{display: inline;}

     /*animation*/

     #myForm input,#myForm textarea{

         border: 1px solid #aaa;

         box-shadow: 0px 0px 3px #ccc;

         border-radius: 2px;

         padding-right: 30px;

         -moz-transition: padding 0.25s;

         -webkit-transition: padding 0.25s;

         -o-transition: padding 0.25s;

         transition: padding 0.25s;

     }

     #myForm input:focus,#myForm textarea:focus {

         background: #fff;

         border: 1px solid #555;

         box-shadow: 0 0 3px #aaa;

         padding-right: 70px;

         border-color: #b03535;

     }

     /*border-color*/

     #myForm input:required,#myForm textarea:required{

         box-shadow: 0 0 5px #5cd053;

         border-color: #28921f;

     }

     #myForm input:focus,#myForm textarea:focus {border-color: #b03535;box-shadow: 0 0 5px #d45252;}

     /****button*****/

     button.submit {

         margin-left:155px;

         background-color: #68b12f;

         background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));

         background: -webkit-linear-gradient(top, #68b12f, #50911e);

         background: -moz-linear-gradient(top, #68b12f, #50911e);

         background: -ms-linear-gradient(top, #68b12f, #50911e);

         background: -o-linear-gradient(top, #68b12f, #50911e);

         background: linear-gradient(top, #68b12f, #50911e);

         border: 1px solid #509111;

         border-bottom: 1px solid #5b992b;

         border-radius: 3px;

         -webkit-border-radius: 3px;

         -moz-border-radius: 3px;

         -ms-border-radius: 3px;

         -o-border-radius: 3px;

         box-shadow: inset 0 1px 0 0 #9fd574;

         -webkit-box-shadow: 0 1px 0 0 #9fd574 inset;

         -moz-box-shadow: 0 1px 0 0 #9fd574 inset;

         -ms-box-shadow: 0 1px 0 0 #9fd574 inset;

         -o-box-shadow: 0 1px 0 0 #9fd574 inset;

         color: white;

         font-weight: bold;

         padding: 6px 20px;

         text-align: center;

         text-shadow: 0 -1px 0 #396715;

     }

     button.submit:hover {

         opacity: 0.85;

         cursor: pointer;

     }

     button.submit:active {

         border: 1px solid #20911e;

         box-shadow: 0 0 10px 5px #356b0b inset;

         -webkit-box-shadow: 0 0 10px 5px #356b0b inset;

         -moz-box-shadow: 0 0 10px 5px #356b0b inset;

         -ms-box-shadow: 0 0 10px 5px #356b0b inset;

         -o-box-shadow: 0 0 10px 5px #356b0b inset;

     }

   </style>

  </head>

  <body>

     <form id="myForm" action="#" method="post" name="myForm">

         <ul>

             <li>

                 <h2>用户注册</h2>

                 <span id="Tips">*必须认真填写*</span>

             </li>

             <li>

                 <label for="name">用户名:</label>

                 <input type="text" placeholder="Super_walker" required>

             </li>

             <li>

                 <label for="password">密码:</label>

                 <input type="password" placeholder="bluehawk***" required>

                 <span id="Notes">请输入用户密码！</span>

             </li>

             <li>

                 <label for="email">邮箱:</label>

                 <input type="text" placeholder="super_vipboy@163.com" required>

                 <span id="Notes">例如： "name@something.com"</span>

             </li>

             <li>

                 <label for="website">个人网站:</label>

                 <input type="url" placeholder="http://www.cnblogs.com/-walker/" pattern="(http|https)://.+" required>

                 <span id="Notes">例如： "http://someaddress.com"</span>

             </li>

             <li>

                 <label for="message">个人信息:</label>

                 <textarea name="message" cols="40" rows="6" required></textarea>

             </li>

             <li>

                 <button class="submit" type="submit">注册</button>

             </li>

         </ul>

     </form>

  </body>

 </html>

<!doctype html>HTML5&CSS3经典动态表格

  • 用户注册

    *必须认真填写*

  • 用户名:
  • 密码: 请输入用户密码！
  • 邮箱: 例如： "name@something.com"
  • 个人网站: 例如： "http://someaddress.com"
  • 个人信息:
  • 注册

HTML5&CSS3经典动态表格的更多相关文章

  1. HTML5&CSS3经典动态表单-2

    上一个demo效果没出来!实际如下 代码没问题.不知道为啥,展示的demo里光标获取焦点的时候不会有如下效果

  2. HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量） （二）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 C ...

  3. HTML5 & CSS3编程入门经典 ((美)Rob Larsen) pdf扫描版

    HTML和CSS是构建网页所需要了解的两种核心编程语言,拉尔森编著的这本<HTML5&CSS3编程入门经典>详细介绍了这两种语言. <HTML5&CSS3编程入门经典 ...

  4. 2019.4.25 表格表单与HTML5 && CSS3

    目录 表格 标签 属性 表格间距离 表格的内边距 表格的边框 样式 边框合并 行合并 列合并 display 表单 标签 属性 提交的网址 请求方式 input相关 扩大响应范围 字符 密码 单选框 ...

  5. html5+css3实现跑动的爱心/动态水滴效果[原创][5+3时代]

    大风起兮云飞扬,安得猛士兮走四方!html5+css3,不学不行. 做web开发已经有好几年了,见证了太多语言的崛起和陨落. 其实作为一个程序员最苦逼的事情莫过于每天要不停的追赶各大公司新出的框架和语 ...

  6. 12款非常精致的免费 HTML5 & CSS3 网站模板

    01. Joefrey Mahusay 很炫的单页网站模板,基于 HTML5 & CSS3 制作,适合用于设计师个人简历.摄影师和平面设计师的个人作品展示. 演示  下载 02. Folder ...

  7. 《零基础学HTML5+CSS3(全彩版)》读书笔记

    2019年1月31日星期四 1点 <零基础学HTML5+CSS3(全彩版)>开始全面学习 前提: 11月20日开始学Python,可能因为太累了,也可能遇到了瓶颈,进入了一个迷茫期,1月6 ...

  8. 【HTML5&CSS3进阶04】CSS3动画应该如何在webapp中运用

    动画在webapp的现状 webapp模式的网站追求的就是一个体验,是HTML5&CSS3浪潮下的产物,抛开体验不说,webapp模式门槛比较高: 而体验优化的一个重点便是动画,可以说动画是w ...

  9. HTML5+CSS3学习笔记（一）

    HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...

随机推荐

  1. poj 2385Apple Catching（简单dp）

    /* 题意: 有两棵苹果树,每一棵苹果树每一秒间隔的掉落下来一个苹果,一个人在树下接住苹果,不让苹果掉落! 人在两棵树之间的移动是很快的!但是这个人移动的次数是有限制的,问最多可以接住多少个苹果! 思 ...

  2. 在WPF应用程序中利用IEditableObject接口实现可撤销编辑的对象

    这是我辅导的一个项目开发中的例子,他们是用WPF做界面开发,在学习了如何使用MVVM来实现界面与逻辑的分离,并且很好的数据更新之后,有一个疑问就是,这种双向的数据更新确实很不错,但如果我们希望用户可以 ...

  3. Oracle Dataguard之failover

    Oracle Dataguard中,角色转换包含两类:Switchover和Failover.上文<Oracle Dataguard之switchover>中,我们已经谈过了switcho ...

  4. 《Selenium2自动化测试实战--基于Python语言》 --即将面市

    发展历程: <selenium_webdriver(python)第一版>   将本博客中的这个系列整理为pdf文档,免费. <selenium_webdriver(python)第 ...

  5. Fort.js – 时尚、现代的表单填写进度提示效果

    Fort.js 是一款用于时尚.现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非常简单.提供了Default.Gradi ...

  6. Dagger2 生成代码学习

    接上一篇文章介绍了Dagger2的初步使用,相信刚接触的人会觉得很奇怪,怎么会有很多自己没有定义的代码出现,为什么Component的创建方式是那样的.为了搞清楚这些东西,我们需要查看一下Dagger ...

  7. solr：快速开始

    本文已挪至  http://www.zhoujingen.cn/blog/8535.html 明年工作主要和搜索有关,在自己学习过程中分享让更多人受益是我一贯的做法,所以我会把对Solr的学习在这里与 ...

  8. QT学习笔记5

    Qt标准对话框之QFileDialog //QString path=QFileDialog::getOpenFileName(this,tr("open image"),&quo ...

  9. 大M法（Big M Method）

    前面一篇讲的单纯形方法的实现,但程序输入的必须是已经有初始基本可行解的单纯形表. 但实际问题中很少有现成的基本可行解,比如以下这个问题: min f(x) = –3x1 +x2 + x3 s.t. x ...

  10. 基于HTML5的WebGL结合Box2DJS物理引擎应用

    上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是 ...