<!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. PHP面试 PHP基础知识 七（文件及目录处理）

    文件操作 文件打开函数 fopen()函数 //用来打开一个文件 打开时需要指定打开模式 语法:fopen( filename, mode, include_path, context); filen ...

  2. 剑指offer第二版面试题11：旋转数组的最小数字（JAVA版）

    题目:把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转.输入一个递增排序的数组的一个旋转,输出旋转数组的最小元素.例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转,该数 ...

  3. kafka单机版的安装、集群部署 及使用

    1.安装kafka(单机版) 1.1上传 kafka_2.11-2.0.0.tgz 到 /root/Downloads 1.2解压 tar 包 tar -zxvf kafka_2.11-2.0.0.t ...

  4. 去除字符串中的HTML标签

    背景:Kindeditor内容保存在数据库中的类型是text,包含文字和HTML标签. 需求:显示内容的前50个字(纯文字内容) 方法:将字段查出去除标签,截取前50 import java.util ...

  5. JQuery中内容操作函数、validation表单校验

    JQuery:内容体拼接(可以直接拼接元素节点和内容节点) JQuery实现: 方案1:A.append(B); == B.appendTo(A);A的后面拼接B 方案2: A.prepend(B); ...

  6. 第十八天：CSV、JSON、Excel、SQLite

    一.CSV文件 1.读取 reader = csv.reader(打开的file对象), reader为可迭代对象 2.用namedtuple映射列名 with open('apple.csv') a ...

  7. html清除页面缓存

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" ...

  8. usleep - 睡眠若干微秒

    总览 (SYNOPSIS) usleep [number] 描述 (DESCRIPTION) usleep 睡眠 指定的 微秒数. 缺省值 是 1. 选项 (OPTIONS) --usage 显示 简 ...

  9. ARM 汇编指 跳转指令 b , bl

    1. 跳转指令 [ b ] [ bl ]   指令格式:<opcode><cond> <address> 不带返回的跳转指令:b mov r0, #0x12 mov ...

  10. 微信小程序 初阶

    公司最近安排要学习一下微信小程序的开发,大体看了看,幸亏还有点javascript的底子,学起来不至于太难,其它的语法什么的真需要好好适应适应....头大 从头开始看微信小程序开发的文档,目前来说没有 ...