<!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. python 参数定义库argparse

    python 参数定义库argparse 这一块的官方文档在这里 注意到这个库是因为argparse在IDE中和在ipython notebook中使用是有差异的,习惯了再IDE里面用,转到ipyth ...

  2. vbs 之 解决打开Excel文件格式与扩展名指定格式不一致的问题

    ' Q:解决打开Excel文件格式与扩展名指定格式不一致的问题' A: 使用工作簿saveAs时,往往忽略掉它的第二个参数FileFormat,添加即可. 比如: set bookDiff = oEx ...

  3. Linux初始化的汇编代码

    1. 内核文件布局 首先看一下arch/x86/boot/Setup.ld文件,它定义了链接后的内核文件布局. 1: /* 2: * setup.ld 3: * 4: * Linker script ...

  4. Vue 学习笔记之 —— 组件（踩了个坑）

    最近在学习vue,学习组件时,遇到了一个问题,困扰了半个多小时.. <!DOCTYPE html> <html lang="en"> <head> ...

  5. JSON 教程首页

    JSON教程 JSON或JavaScript对象表示法是一个轻量级的基于文本的开放式标准,旨在为人类可读的数据交换. JSON格式最初是由Douglas Crockford规定,在RFC4627中描述 ...

  6. 34-Ubuntu-用户权限-05-超级用户

    超级用户 Linux系统中的root(超级用户)账号通常用于系统的维护和管理,对操作系统的所有资源具有访问的权限. 在大多数的Linux版本中,都不推荐直接使用root账号登录系统. 在Linux安装 ...

  7. HXY烧情侣

    题目描述 众所周知,HXY已经加入了FFF团.现在她要开始喜(sang)闻(xin)乐(bing)见(kuang)地烧情侣了.这里有n座电影院,n对情侣分别在每座电影院里,然后电影院里都有汽油,但是要 ...

  8. 牛客网多校训练第四场C sequence

    (牛客场场有笛卡尔树,场场都不会用笛卡尔树...自闭,补题心得) 题目链接:https://ac.nowcoder.com/acm/contest/884/C 题意:给出两个序列a,b,求max{mi ...

  9. fabs() abs()

    fabs() 面向实数取绝对值 abs() 返回int

  10. useradd -帐号建立或更新新使用者的资讯

    总览 SYNOPSIS useradd [-c comment] [-d home_dir] [-e expire_date] [-f inactive_time] [-g initial_group ...