<!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. 汇编程序的Hello world

    原文链接:http://www.orlion.ga/989/ 一.汇编程序的Hello world x86 AT&T: .data   msg:       .ascii "Hell ...

  2. Request 接收参数乱码原理解析一：服务器端解码原理

    “Server.UrlDecode(Server.UrlEncode("北京")) == “北京””,先用UrlEncode编码然后用UrlDecode解码,这条语句永远为true ...

  3. Windows 8（虚拟机环境）安装.NET Framework3.5(includes .NET 2.0 and 3.0)

    按照这篇文章:http://blogs.technet.com/b/aviraj/archive/2012/08/04/windows-8-enable-net-framework-3-5-inclu ...

  4. [Azure附录]2.在Windows Server 2012中配置AD域服务

    <Windows Azure Platform 系列文章目录> 本章我们配置的AD域名为contoso.com 1.安装完AD域服务后,我们返回服务器管理器界面,点击"将此服务器 ...

  5. 简单几步把LOGO变字体

    今天学到一招,所以决定简单写写如何利用图标字体生成器IcoMoon把自己制作的图标变成字体,下面以OSChina的图标为例. 一.确保logo转成纯色,并保存为svg格式 因为OSC的logo是绿色带 ...

  6. 实现iOS图片等资源文件的热更新化(四): 一个最小化的补丁更新逻辑

    简介 以前写过一个补丁更新的文章,此处会做一个更精简的最小化实现,以便于集成.为了使逻辑具有通用性,将剥离对AFNetworking和ReativeCocoa的依赖.原来的文章,可以先看这里: htt ...

  7. python数据库(mysql)操作

    一.软件环境 python环境默认安装了sqlite3,如果需要使用sqlite3我们直接可以在python代码模块的顶部使用import sqlite3来导入该模块.本篇文章我是记录了python操 ...

  8. 画一画javascript原型链

    在javascript中,几种数据类型String,Number,Boolean,Object,Function都是函数,可称之为函数对象. 可以说拥有prototype属性的都是函数. 所有对象都拥 ...

  9. 正则表达式匹配a标签的href

    JS代码: <html> <head> <script language="javascript"> var a='<P><A ...

  10. ASP.NET MVC程序中动态修改form的Action值

    在练习ASP.NET MVC时,为了实现一个小功能,POST数据至服务器执行时,需要动态修改form的action值. 下面Insus.NET列举一个例子来演示它.让它简单,明白易了解. 你可以在控制 ...