<!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. react-loadable路由懒加载

    load.js import Loadable from 'react-loadable'; import './styles/load.styl' // 按需加载组件 export default ...

  2. 剑指offer——67左旋转字符串

    题目描述 汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果.对于一个给定的字符序列S,请你把其循环左移K位后的序列输出.例如,字符序列S=”abc ...

  3. 一份完整的 Java 成神路线图，值得收藏！

    Java,是现阶段中国互联网公司中,覆盖度最广的研发语言. 有不少朋友问,如何深入学习Java后端技术栈,今天分享一个,互联网牛人整理出来的完整的Java成神路线图. 一:常见模式与工具 学习Java ...

  4. redis 部署方式及常见特性

    单机部署 redis的单机部署 如何保证redis的高并发和高可用? redis的主从复制原理?redis的哨兵原理? redis单机能承载多高并发?如果单机扛不住如何扩容扛更多的并发? redis会 ...

  5. 【小知识】神经网络中的SGD优化器和MSE损失函数

    今天来讲下之前发的一篇极其简单的搭建网络的博客里的一些细节 (前文传送门) 之前的那个文章中,用Pytorch搭建优化器的代码如下: # 设置优化器 optimzer = torch.optim.SG ...

  6. zabbix--监控的组件和进程介绍

    上图是zabbix的架构,zabbix proxy(代理),可以减小IO并发. zabbix web GUI是用php写的画图工具,从数据库抓取数据. zabbix database zabbix获取 ...

  7. VMware中 CentOS7挂载windows共享文件夹

    在编译自己的hadoop时,不想再次在虚拟机中下载jar包,就想到了挂载自己本地的maven仓库,使用本地仓库来进行编译,这里就需要使用VMware的VMware Tools了,直接复制官方文档如下 ...

  8. grunt中调用webpack

    项目中一些很老的技术需要运用webpack管理,这时候必须使用grunt+webpack 配合使用 .做个笔记,不限多说直接上代码 grunt结合webpack 下面是 Gruntfile.js co ...

  9. BCZM : 1.9

    有n个学生参加见面会,分别对m个研究组中的若干个感兴趣,为了满足所有学生的要求,每个学生都能参加自己感兴趣的见面会,如果每个见面会的时间为t,如何安排才能使得所有见面会的总时间最短? 分析: 先建立模 ...

  10. 【原理】LVM（Logical Volume Manager）动态卷管理

    一张图让你学会LVM   导读 随着科技的进步,人们不知不觉的就进入了大数据的时代,数据的不断增加我们发现我们的磁盘越来越不够用了,接下来就是令人头疼的事情--加硬盘,数据的备份与还原.LVM就是Li ...