<!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. 深入理解javascript函数系列第三篇——属性和方法

    × 目录 [1]属性 [2]方法 前面的话 函数是javascript中的特殊的对象,可以拥有属性和方法,就像普通的对象拥有属性和方法一样.甚至可以用Function()构造函数来创建新的函数对象.本 ...

  2. Netbeans不能正常启动glassfish或者部署失败不能运行的问题

    错误信息:D:\临时文件\netbeans\WebTest\build\web中部署GlassFish Server 4, deploy, Connection refused: connect, f ...

  3. poj 2492A Bug's Life(并查集)

    /* 目大意:输入一个数t,表示测试组数.然后每组第一行两个数字n,m,n表示有n只昆虫,编号从1—n,m表示下面要输入m行交配情况,每行两个整数,表示这两个编号的昆虫为异性,要交配. 要求统计交配过 ...

  4. java匿名类和匿名对象及this的其他用法

    /* 匿名内部类:就是内部类的简写格式. 必须前提:内部类必须继承或者实现一个类或者接口. 匿名内部类其实就是一个匿名 子类对象. 格式:new 父类对象 or 接口(){ 子类内容:(覆盖父类的, ...

  5. spring源码分析之spring-core-io

    1. 看一下源码整体结构: 抓住主要点Resource.ResourceLoader和ResourceEditor 其中Resource作用 Interface for a resource desc ...

  6. Java Management extentsions（jmx）与tomcat

    1,概念:一个可以使用JMX管理器来管理的Java对象称为JMX管理资源(JMX manageable resource).事实上,一个JMX管理资源也可以是一个应用程序.一个实现或者一个服务.设备. ...

  7. Java:那些把自己陷进去的误区（一）

    那些把自己陷进去的误区 1.1数据类型   1.整型: 1.在Java中,整形的范围为-2147 483 648—2147483647,并且这个范围与运行Java代码的机器无关,此举大大解决了移植问题 ...

  8. Hadoop阅读笔记（二）——利用MapReduce求平均数和去重

    前言:圣诞节来了,我怎么能虚度光阴呢?!依稀记得,那一年,大家互赠贺卡,短短几行字,字字融化在心里:那一年,大家在水果市场,寻找那些最能代表自己心意的苹果香蕉梨,摸着冰冷的水果外皮,内心早已滚烫.这一 ...

  9. weback学习笔记

    weback可以把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理.同时支持amd cmd CommonJS语法.同时可以和gulp一块使用. ...

  10. QT学习笔记6

    事件(event) 一般来说,使用Qt编程时,我们并不会把主要精力放在事件上,因为在Qt中,需要我们关心的事件总会发出一个信号.比如,我们关心的是QPushButton的鼠标点击,但我们不需要关心这个 ...