<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>会员注册</title>
     <style>
         /*使用通配符设置margin设置文字行于行之间的宽度*/
         *{
             margin: 5px;
         }
         /*设置全页背景*/
         body{
             background: url("./img/register_bg.png") no-repeat center;
             line-height: 1;
         }

         /*绘制登录框*/
         .beijing{
             border: 5px solid #EEEEEE;
             width: 1000px;
             height: 700px;
             margin: auto;
             background: white;
         }

         /*设置左上字体*/
         .d1{
             color: #FFD266;
         }
         .d2{
             color: #ABA9A7;
         }

         /*设置浮动调格式*/
         .zuo{
             float: left;
         }
         .zhong{
             float: left;
         }
         .you{
             float: right;
         }

         /*设置右边字体*/
         #p1{
             font-size: 10px;
         }
         #p2{
             color: red;
             font-size: 10px;
         }

         /*设置中间格式*/
         /*设置文字右对齐颜色灰色*/
         .td_left{
             width: 100px;
             height: 45px;
             text-align: right;
             color: #ABA9A7;
         }

         /*设置文本框长度*/
         .td_right{
             padding-left: 50px;
             box-sizing: border-box;
         }
         #username,#password,#email,#name,#tel,#birthday,#checkcode{
             width: 251px;
             height: 32px;
             border: 1px solid #ABA9A7;
             /*设置边框圆角*/
             border-radius: 10px;
         }
         #checkcode{
             width: 100px;
         }

         /*设置按钮*/
         #td_sub{
             width: 100px;
             height: 30px;
             background: #FFD266;
         }

     </style>
 </head>
 <body>
 <div class="beijing">
     <div class="zuo">
         <p class="d1">新用户注册</p>
         <p class="d2">USER REGISTER</p>
     </div>

     <div class="zhong">
         <table>
             <tr>
                 <td class="td_left"><label for="username">用户名</label></td>
                 <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
             </tr>

             <tr>
                 <td class="td_left"><label for="password">密码</label></td>
                 <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
             </tr>

             <tr>
                 <td class="td_left"><label for="email">Email</label></td>
                 <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
             </tr>

             <tr>
                 <td class="td_left"><label for="name">姓名</label></td>
                 <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
             </tr>

             <tr>
                 <td class="td_left"><label for="tel">手机号</label></td>
                 <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
             </tr>

             <tr>
                 <td class="td_left"><label>性别</label></td>
                 <td class="td_right">
                     <input type="radio" name="gender" value="male"> 男
                     <input type="radio" name="gender" value="female"> 女
                 </td>
             </tr>

             <tr>
                 <td class="td_left"><label for="birthday">出生日期</label></td>
                 <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
             </tr>

             <tr>
                 <td class="td_left"><label for="checkcode" >验证码</label></td>
                 <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                     <img src="img/verify_code.jpg">
                 </td>
             </tr>

             <tr>
                 <td colspan="2" align="center"><input id="td_sub" type="submit" value="注册"></td>
             </tr>
         </table>
     </div>

     <div class="you">
         <p id="p1">已有账号？<a id="p2" href="#">立即登录</a></p>
     </div>
 </div>
 </table>
 </body>
 </html>

HTML_案例(注册案例CSS版)的更多相关文章

  1. HTML_页面注册案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Java基础知识强化之集合框架笔记37：用户登录注册案例

    1. 登录注册案例分析图解: 2. 用户登录案例 详细分析 和 分包实现: (1)用户登录案例详细分析(面向对象思想) 按照如下的操作,可以让我们更符合面向对象思想: • 有哪些类呢?         ...

  3. 《实战突击：PHP项目开发案例整合(第2版)(含DVD光盘1张)》

    <实战突击:PHP项目开发案例整合(第2版)(含DVD光盘1张)> 基本信息 作者: 徐康明    辛洪郁 出版社:电子工业出版社 ISBN:9787121221378 上架时间:2014 ...

  4. vue新手入门之使用vue框架搭建用户登录注册案例，手动搭建webpack+Vue项目（附源码，图文详解，亲测有效）

    前言 本篇随笔主要写了手动搭建一个webpack+Vue项目,掌握相关loader的安装与使用,包括css-loader.style-loader.vue-loader.url-loader.sass ...

  5. 会话跟踪技术 - Cookie 和 Session 快速上手 + 登陆注册案例

    目录 1. 会话跟踪技术概述 2. Cookie 2.1 Cookie的概念和工作流程 2.2 Cookie的基本使用 2.3 Cookie的原理分析 2.4 Cookie的使用细节 2.4.1 Co ...

  6. 安全之路:Web渗透技术及实战案例解析(第2版)

    安全之路:Web渗透技术及实战案例解析(第2版)

  7. 登录注册案例(Servlet+JSP+Maven)

    项目案例模板之登录注册的实现 案例演示 案例代码 设计表 pom.xml  <dependencies>  <dependency>    <groupId>jun ...

  8. 零基础学习java------33---------http协议，tomcat（其如何在eclipse上发布），注册案例

    一. HTTP协议 https://www.cnblogs.com/vamei/archive/2013/05/11/3069788.html 二. tomcat---------->web服务 ...

  9. 用户登陆注册【JDBC版】

    前言 在讲解Web开发模式的时候,曾经写过XML版的用户登陆注册案例!现在在原有的项目上,使用数据库版来完成用户的登陆注册!如果不了解的朋友,可以看看我Web开发模式的博文! 本来使用的是XML文件作 ...

随机推荐

  1. SimpleDateFormat("yyyy-MM-dd hh:mm:ss.SSS")时间转换问题

    SimpleDateFormat("yyyy-MM-dd hh:mm:ss.SSS")时间转换问题 程序代码: import java.text.ParseException; i ...

  2. SAS市场研究应用介绍:组合/联合分析

    SAS市场研究应用介绍:组合/联合分析 一 SAS市场研究模块介绍 市场研究是指研究组织(企业)与客户.公众三者关系的规律的过程,是市场营销领域中的一个重要元素.它把消费者.客户.公众和营销者通过信息 ...

  3. ajax 重复提交

    1.一次点击事件触发两次请求,找到的原因是重复引用了同一个.js文件,后台返回来的数据是个页面,在这个页面里面又引用了.js,所以导致一次点击多次请求

  4. hibernate5.2.10.Final基本配置

    1.在官网去下载,解压后在lib/required目录下的所有jar包都是必要的. 2.为了之后配置方便,建议在eclipse里面安装一个东东,操作步骤是在eclipse->Help->I ...

  5. pair的用法

    如何定义?(初始化) 1. pair<int,int>p; 2.定义即初始化,也可以这个样子 pair<,); 里面的类型还可以是string,double等. 3.还可以这样子初始 ...

  6. Codeforces 1169B Pairs

    题目链接:http://codeforces.com/contest/1169/problem/B 题意:给你 m 对数 ,问你能不能在 1 − n 之间找到俩个不相等的 x 和 y 使得 对于前面每 ...

  7. Spring事务详细解释

    前言 Spring在TransactionDefinition接口中规定了7种类型的事务传播行为.事务传播行为是Spring框架独有的事务增强特性,他不属于的事务实际提供方数据库行为.这是Spring ...

  8. SVM-SVR

    高频率的接触到了SVM模型,而且还有使用SVM模型做回归的情况,即SVR.另外考虑到自己从第一次知道这个模型到现在也差不多两年时间了,从最开始的腾云驾雾到现在有了一点直观的认识,花费了不少时间.因此在 ...

  9. Xcode使用篇-重新安装Xcode

    卸载Xcode sudo rm -rf /Applications/Xcode.app sudo rm -rf /Library/Preferences/com.apple.dt.Xcode.plis ...

  10. Django完成常用四大功能

    返回主目录:Django框架 内容目录: 1.pycharm连接数据库及相应操作 2.手撸登录注册编辑删除 2.1 登录.注册 2.2 ORM简单操作 2.3 编辑.删除 3.完整代码 一.pycha ...