<!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. C#多线程之旅(4)——APM初探

    源码地址:https://github.com/Jackson0714/Threads 原文地址:C#多线程之旅(4)——APM初探 C#多线程之旅目录: C#多线程之旅(1)——介绍和基本概念 C# ...

  2. 如何对SharePoint网站进行预热(warmup)以提高响应速度

    问题描述 SharePoint Server是一个易于使用的协作平台,目前在越来越多的企业中被应用开来.SharePoint Server是通过网站的形式向最终用户提供服务的,而这个网站是基于ASP. ...

  3. 12款界面精美的 HTML5 & CSS3 网站模板

    这里分享的12款完全采用响应式设计的 HTML5 & CSS3 网站设计模板.每一个细节都精心设计,以创建一个美妙的用户体验.这些响应主题和模板最适合用于电子商务,商业门户网站,个人作品集以及 ...

  4. .net using使用小结

    在.net中using使用方法有3种,分别是using指令.using定义使用范围.using别名. using指令,即引用命名空间. using System; using System.Colle ...

  5. SQL Server 存储(5/8)：理解IAM 页

    在以前的文章里,我们讨论了数据页,GAM和SGAM,还有PFS页.今天我们一起来讨论下索引分配映射(Index Allocation Map:IAM)页. 在SQL Server 2005和以后的版本 ...

  6. 【原创】Django-ORM基础

    概述 1.什么是ORM? ORM,即Object-Relational Mapping(对象关系映射),它的作用是在关系型数据库和业务实体对象之间作一个映射,这样,我们在具体的操作业务对象的时候,就不 ...

  7. .NET Core扩展IServiceCollection自动注册服务

    前言 在ASP.NET Core中使用依赖注入中使用很简单,只需在Startup类的ConfigureServices()方法中,通过IServiceCollection接口进行注入即可,其它的无需关 ...

  8. React-Native 给客户端来个「同音词模糊搜索」

    APP上线一段时间有用户反应说不方便找东西,其实APP的数据不大也就三四百条而以,但受限于手机端展示区域太小.信息大爆炸,大家也基本上不会去记具体的名称都是根据模糊的印象进行搜索而且现在大家基本都用拼 ...

  9. SQL--使用NewID函数，创建GUID列

    USE master GO IF EXISTS (SELECT * FROM sysdatabases WHERE name='DB_Temp') DROP DATABASE DB_Temp GO C ...

  10. android 开发：shape和selector和layer-list的（详细说明）

    目录(?)[+] Shape 简介 使用的方法 属性 Selector 简介 使用的方法 layer-list 简介 例子 最后   <shape>和<selector>在An ...